# Renderizado de JavaScript

Si la página que desea rastrear requiere JavaScript para cargar dinámicamente todos los datos necesarios en el DOM, puede incluir un `render` parámetro en sus solicitudes en lugar de configurar y usar instrucciones de navegador personalizadas manualmente. Las solicitudes con este parámetro se renderizarán completamente y los datos se almacenarán en un archivo HTML o en una captura de pantalla PNG, dependiendo del parámetro especificado.

### HTML

Establezca el `render` parámetro en `html` para obtener la salida sin procesar de la página renderizada.

### PNG (Captura de pantalla)

Establezca el `render` parámetro en `png` para obtener una captura de pantalla codificada en Base64 de la página renderizada.

{% hint style="info" %}
Si desea rastrear una imagen y descargarla, consulte [**esta sección**](https://developers.oxylabs.io/documentation/es/soluciones-de-scraping/web-scraper-api/features/result-processing-and-storage/output-types/download-images)**.**
{% endhint %}

### Ejemplo de solicitud

{% tabs %}
{% tab title="cURL" %}

```shell
curl --user "user:pass" \
'https://realtime.oxylabs.io/v1/queries' \
-H "Content-Type: application/json" \
-d '{"source": "universal", "url": "https://www.example.com", "render": "html"}'
```

{% endtab %}

{% tab title="Python" %}

```python
import requests
from pprint import pprint

# Estructurar la carga útil.
payload = {
    'source': 'universal',
    'url': 'https://www.example.com',
    'render': 'html',
}

# Obtener respuesta.
response = requests.request(
    'POST',
    'https://realtime.oxylabs.io/v1/queries',
    auth=('user', 'pass1'),
    json=payload,
)

# En lugar de una respuesta con el estado del trabajo y la URL de resultados, esto devolverá el
# JSON de respuesta con el resultado.
pprint(response.json())
```

{% endtab %}

{% tab title="PHP" %}

```php
<?php

$params = [
    'source' => 'universal',
    'url' => 'https://www.example.com',
    'render' => 'html',
];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "https://realtime.oxylabs.io/v1/queries");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($params));
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_USERPWD, "user" . ":" . "pass1");

$headers = array();
$headers[] = "Content-Type: application/json";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
echo $result;

if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
}
curl_close($ch);
```

{% endtab %}

{% tab title="C#" %}

```csharp
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

namespace OxyApi
{
    class Program
    {
        static async Task Main()
        {
            const string Username = "YOUR_USERNAME";
            const string Password = "YOUR_PASSWORD";

            var parameters = new Dictionary<string, string>()
            {
                { "source", "universal" },
                { "url", "https://www.example.com" },
                { "render" : "html" },
            };


            var client = new HttpClient();

            Uri baseUri = new Uri("https://realtime.oxylabs.io");
            client.BaseAddress = baseUri;

            var requestMessage = new HttpRequestMessage(HttpMethod.Post, "/v1/queries");
            requestMessage.Content = JsonContent.Create(parameters);

            var authenticationString = $"{Username}:{Password}";
            var base64EncodedAuthenticationString = Convert.ToBase64String(System.Text.ASCIIEncoding.UTF8.GetBytes(authenticationString));
            requestMessage.Headers.Add("Authorization", "Basic " + base64EncodedAuthenticationString);

            var response = await client.SendAsync(requestMessage);
            var contents = await response.Content.ReadAsStringAsync();

            Console.WriteLine(contents);
        }
    }
}
```

{% endtab %}

{% tab title="Golang" %}

```go
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"net/http"
)

func main() {
	const Username = "YOUR_USERNAME"
	const Password = "YOUR_PASSWORD"

	payload := map[string]string{
		"source": "universal",
		"url": "https://www.example.com",
        	"render": "html",
	}

	jsonValue, _ := json.Marshal(payload)

	client := &http.Client{}
	request, _ := http.NewRequest("POST",
		"https://realtime.oxylabs.io/v1/queries",
		bytes.NewBuffer(jsonValue),
	)

	request.SetBasicAuth(Username, Password)
	response, _ := client.Do(request)

	responseText, _ := ioutil.ReadAll(response.Body)
	fmt.Println(string(responseText))
}
```

{% endtab %}

{% tab title="Java" %}

```java
package org.example;

import okhttp3.*;
import org.json.JSONObject;

public class Main implements Runnable {
    private static final String AUTHORIZATION_HEADER = "Authorization";
    public static final String USERNAME = "YOUR_USERNAME";
    public static final String PASSWORD = "YOUR_PASSWORD";

    public void run() {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("source", "universal");
        jsonObject.put("url", "https://www.example.com");
        jsonObject.put("render": "html");

        Authenticator authenticator = (route, response) -> {
            String credential = Credentials.basic(USERNAME, PASSWORD);

            return response
                    .request()
                    .newBuilder()
                    .header(AUTHORIZATION_HEADER, credential)
                    .build();
        };

        var client = new OkHttpClient.Builder()
                .authenticator(authenticator)
                .build();

        var mediaType = MediaType.parse("application/json; charset=utf-8");
        var body = RequestBody.create(jsonObject.toString(), mediaType);
        var request = new Request.Builder()
                .url("https://realtime.oxylabs.io/v1/queries")
                .post(body)
                .build();

        try (var response = client.newCall(request).execute()) {
            assert response.body() != null;
            System.out.println(response.body().string());
        } catch (Exception exception) {
            System.out.println("Error: " + exception.getMessage());
        }

        System.exit(0);
    }

    public static void main(String[] args) {
        new Thread(new Main()).start();
    }
}
```

{% endtab %}

{% tab title="Node.js" %}

```javascript
import fetch from 'node-fetch';

const username = 'YOUR_USERNAME';
const password = 'YOUR_PASSWORD';
const body = {
  'source': 'universal',
  'url': 'https://www.example.com',
  'render': 'html'
};
const response = await fetch('https://realtime.oxylabs.io/v1/queries', {
  method: 'post',
  body: JSON.stringify(body),
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + Buffer.from(`${username}:${password}`).toString('base64'),
  }
});

console.log(await response.json());
```

{% endtab %}

{% tab title="HTTP" %}

```http
# Toda la cadena que envíe debe estar codificada en la URL.

https://realtime.oxylabs.io/v1/queries?source=universal&url=https%3A%2F%2Fwww.example.com%2F&render=html&access_token=12345abcde
```

{% endtab %}

{% tab title="JSON" %}

```json
{
    "source": "universal", 
    "url": "https://www.example.com", 
    "render": "html"
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
El renderizado de JavaScript tarda más en rastrear la página. Establezca el tiempo de espera en el cliente a 180 segundos si utiliza los métodos de integración Realtime o Proxy Endpoint.
{% endhint %}

{% hint style="warning" %}
Para garantizar el menor consumo de tráfico posible, nuestro sistema no carga recursos innecesarios durante la renderización de la página.
{% endhint %}

## Forzar renderizado en páginas específicas

Para el rastreo exitoso, algunos tipos de páginas de dominios específicos requieren renderizado debido a su contenido dinámico. Nuestro sistema aplica automáticamente el renderizado en estas páginas, incluso si el usuario no lo establece explícitamente.

{% hint style="warning" %}
Tenga en cuenta que los trabajos renderizados consumen más tráfico en comparación con los trabajos no renderizados.
{% endhint %}

Queremos que nuestros usuarios sean plenamente conscientes de esto al rastrear las siguientes páginas:

{% file src="<https://338917265-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzrXw45naRpCZ0Ku9AjY1%2Fuploads%2FRJlTM36vJSANn0IV3PPf%2FForcing%20render%20-%20Strategy%20settings.csv?alt=media&token=b4785539-ea92-42b1-8186-153483936f07>" %}

Este enfoque ofrece la mejor experiencia de rastreo posible, asegurando la precisión y fiabilidad de los datos en estas páginas complejas.&#x20;

Si desea desactivar el renderizado, puede hacerlo agregando el siguiente parámetro a sus solicitudes:

```
"render": ""
```

## Instrucciones del navegador

Con nuestras instrucciones personalizadas de navegador también puede ejecutar diversas [**instrucciones del navegador**](https://developers.oxylabs.io/documentation/es/soluciones-de-scraping/web-scraper-api/features/js-rendering-and-browser-control/browser-instructions) tales como hacer clic, desplazarse, ingresar texto, esperar y más. Lea más:

{% content-ref url="browser-instructions" %}
[browser-instructions](https://developers.oxylabs.io/documentation/es/soluciones-de-scraping/web-scraper-api/features/js-rendering-and-browser-control/browser-instructions)
{% endcontent-ref %}