El prefetching desde el servidor en una aplicación con server-side rendering permite enviar datos ya consultados al cliente, evitando que el navegador gaste recursos repitiendo la petición. Si trabajas con React y quieres acelerar la carga inicial de tu app, esta técnica te muestra cómo mover el fetch al backend y entregar la información lista a través del objeto window.

Por qué mover el fetch al servidor mejora la carga inicial

Cuando delegas las peticiones al cliente, cada usuario paga el costo de esperar a que el navegador consulte la API antes de pintar contenido. En el ejemplo de la app que consume la API de la NASA, al entrar a la ruta de galaxias se ve el típico estado de cargando mientras el cliente resuelve la petición.

Mover esa misma petición al servidor cambia el flujo: el backend consulta la API una vez, embebe la respuesta en el HTML y el cliente recibe los datos sin tener que volver a pedirlos.

¿Qué es el prefetching en SSR? Es la técnica de hacer la petición a una API desde el servidor antes de enviar el HTML al cliente, para que la información llegue ya cargada y la app no tenga que pedirla de nuevo en el navegador.

Cómo hacer una petición desde el servidor con Axios

La idea es definir una ruta GET en el servidor que intercepte la URL antes del render. En el archivo index del servidor declaras el manejador con request y response, y dentro haces la llamada de forma asíncrona [02:15].

Para las peticiones del lado del servidor, Axios es una librería cómoda y bien tipada. La instalas con yarn add axios y la importas en tu archivo de servidor.

ts import axios from 'axios';

app.get('/galaxies', async (req, res) => { try { const { data } = await axios.get(QUERY_URL); const initialProps = { galaxies: data.collection.items, }; res.send(render(req.url, initialProps)); } catch (error) { throw new Error('An error occurred in galaxies'); } });

Un detalle clave: el servidor debe enviar la respuesta, no retornarla. Confundir return con res.send deja al cliente esperando indefinidamente, un error fácil de cometer cuando vienes de escribir funciones puras [05:40].

Cómo estructurar las initialProps

Las initialProps son el objeto que viajará desde el servidor hasta el cliente. En este caso contienen la propiedad galaxies con el resultado de data.collection.items, exactamente la misma estructura que antes consumía el hook de React desde el navegador.

Esa simetría es lo que permite reemplazar el fetch del cliente sin reescribir la lógica de presentación.

Cómo inyectar datos en el DOM con window y JSON.stringify

El truco para pasar las initialProps al cliente es inyectarlas como un script dentro del HTML que renderiza el servidor. La función render recibe la URL y las initialProps (con valor por defecto de objeto vacío), y las pasa al template.

Dentro del template añades una etiqueta <script> sin atributo src, ubicada antes de la ejecución del bundle de la aplicación, para que la variable global esté disponible cuando React arranque.

html

<script> window.__initialProps__ = ${JSON.stringify(initialProps)}; </script>

JSON.stringify es indispensable porque el HTML es texto: convierte el objeto JavaScript en una cadena válida que el navegador puede parsear de vuelta. Sin esa conversión, el objeto se imprimiría como [object Object] y romperías el script.

¿Para qué sirve window.__initialProps__? Es una propiedad que añades al objeto global del navegador para que el cliente lea los datos que el servidor ya consultó, sin tener que repetir la petición a la API.

Cómo verificar que la inyección funciona

Después de reiniciar el servidor con yarn start, abres la pestaña Network del navegador con el filtro Fetch/XHR activo. En la ruta /galaxies, al inspeccionar el HTML deberías ver la etiqueta <script> con el objeto serializado, y al ejecutar window.__initialProps__ en la consola obtienes las galaxias listas.

En rutas que no hacen prefetch, el mismo window.__initialProps__ devolverá un objeto vacío gracias al valor por defecto.

Qué riesgos de seguridad tiene inyectar datos en el DOM

Inyectar información en window abre un nuevo vector de ataque: el servidor. Por eso esta técnica funciona bien para datos públicos, como un catálogo de galaxias de la NASA, pero nunca debes inyectar información sensible como datos de usuarios, tokens o credenciales.

Algunas reglas prácticas:

• Inyecta solo datos que también serían visibles en una respuesta pública de API.
• Retira del window las propiedades una vez que React las haya consumido.
• Si tu servidor corre en Node, refuerza las políticas de seguridad antes de pasar a producción.

El siguiente paso lógico es leer window.__initialProps__ desde el cliente y usar esos datos para renderizar las cards de galaxias sin volver a llamar a la API. ¿Ya intentaste aplicar este patrón en tu propio proyecto? Cuéntame en los comentarios qué API estás consumiendo.