React Streaming: Renderizado del lado del servidor progresivo para una experiencia de usuario optimizada

En el mundo del desarrollo web, ofrecer una experiencia de usuario rápida y receptiva es primordial. Los usuarios esperan que los sitios web se carguen rápidamente y sean interactivos sin demora. React, una popular biblioteca de JavaScript para construir interfaces de usuario, ofrece una poderosa técnica llamada Renderizado del lado del servidor (SSR) en streaming para abordar este desafío. Este artículo profundiza en el concepto de React Streaming SSR, explorando sus beneficios, implementación y impacto en el rendimiento del sitio web y la experiencia del usuario.

¿Qué es el renderizado del lado del servidor (SSR)?

El renderizado tradicional del lado del cliente (CSR) implica que el navegador descargue los archivos HTML, JavaScript y CSS y luego renderice el contenido en el lado del cliente. Si bien es flexible, este enfoque puede provocar un retraso en la renderización inicial, ya que el usuario tiene que esperar a que se descarguen todos los recursos y se ejecute JavaScript antes de ver cualquier contenido. SSR, por otro lado, renderiza los componentes de React en el servidor y envía el HTML completamente renderizado al cliente. Esto da como resultado un tiempo de carga inicial más rápido, ya que el navegador recibe HTML completamente formado que se puede mostrar inmediatamente.

Las limitaciones del SSR tradicional

Si bien el SSR tradicional ofrece una mejora significativa con respecto al CSR, tiene sus propias limitaciones. En el SSR tradicional, toda la aplicación debe renderizarse en el servidor antes de que se envíe cualquier HTML al cliente. Esto puede ser un cuello de botella, especialmente para aplicaciones complejas con múltiples componentes y dependencias de datos. El Tiempo hasta el primer byte (TTFB) puede ser alto, lo que genera una lentitud percibida para el usuario.

Entra en React Streaming SSR: Un enfoque progresivo

React Streaming SSR supera las limitaciones del SSR tradicional al adoptar un enfoque progresivo. En lugar de esperar a que se renderice toda la aplicación en el servidor, Streaming SSR divide el proceso de renderizado en fragmentos más pequeños y transmite estos fragmentos al cliente a medida que están disponibles. Esto permite que el navegador comience a mostrar contenido mucho antes, mejorando el rendimiento percibido y reduciendo el TTFB. Piense en ello como un restaurante que prepara su comida por etapas: el aperitivo se sirve primero, luego el plato principal y, finalmente, el postre, en lugar de esperar a que toda la comida esté lista a la vez.

Beneficios de React Streaming SSR

React Streaming SSR ofrece numerosos beneficios para el rendimiento del sitio web y la experiencia del usuario:

• Tiempo de carga inicial más rápido: Al transmitir fragmentos HTML al cliente, el navegador puede comenzar a mostrar contenido mucho antes, lo que resulta en un tiempo de carga percibido más rápido y una mejor participación del usuario.
• Tiempo hasta el primer byte (TTFB) mejorado: Streaming SSR reduce el TTFB al enviar el fragmento HTML inicial tan pronto como está listo, en lugar de esperar a que se renderice toda la aplicación.
• Experiencia de usuario mejorada: Un tiempo de carga inicial más rápido conduce a una mejor experiencia de usuario, ya que los usuarios no se mantienen esperando a que aparezca el contenido.
• Mejor SEO: Los motores de búsqueda pueden rastrear e indexar el contenido de manera más efectiva, ya que el HTML está disponible de inmediato en el servidor.
• Hidratación progresiva: Streaming SSR permite la hidratación progresiva, donde el código React del lado del cliente adjunta gradualmente los oyentes de eventos y hace que la aplicación sea interactiva a medida que se transmiten los fragmentos HTML.
• Mejor utilización de los recursos: Al dividir el proceso de renderizado en fragmentos más pequeños, Streaming SSR puede mejorar la utilización de los recursos en el servidor.

Cómo funciona React Streaming SSR

React Streaming SSR aprovecha la API ReactDOMServer.renderToPipeableStream() para transmitir fragmentos HTML al cliente. Esta API devuelve una secuencia legible que se puede canalizar al objeto de respuesta del servidor. Aquí hay una ilustración simplificada de cómo funciona:

1. El servidor recibe una solicitud de una página.
2. El servidor llama a ReactDOMServer.renderToPipeableStream() para renderizar la aplicación React en una secuencia.
3. La secuencia comienza a emitir fragmentos HTML a medida que se renderizan los componentes React.
4. El servidor canaliza la secuencia al objeto de respuesta, enviando los fragmentos HTML al cliente.
5. El navegador recibe los fragmentos HTML y comienza a mostrarlos progresivamente.
6. Una vez que se han recibido todos los fragmentos HTML, el navegador hidrata la aplicación React, haciéndola interactiva.

Implementación de React Streaming SSR

Para implementar React Streaming SSR, necesitará un servidor Node.js y una aplicación React. Aquí hay una guía paso a paso:

1. Configurar un servidor Node.js: Cree un servidor Node.js utilizando un framework como Express o Koa.
2. Instalar React y ReactDOMServer: Instale los paquetes react y react-dom.
3. Crear una aplicación React: Cree una aplicación React con los componentes que desea renderizar en el servidor.
4. Usar ReactDOMServer.renderToPipeableStream(): En el código de su servidor, use la API ReactDOMServer.renderToPipeableStream() para renderizar su aplicación React en una secuencia.
5. Canalizar la secuencia al objeto de respuesta: Canalice la secuencia al objeto de respuesta del servidor para enviar los fragmentos HTML al cliente.
6. Manejar errores: Implemente el manejo de errores para detectar cualquier error que pueda ocurrir durante el proceso de renderizado.
7. Agregar una etiqueta de script para la hidratación: Incluya una etiqueta de script en el HTML para hidratar la aplicación React en el lado del cliente.

Fragmento de código de ejemplo (lado del servidor):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Tu componente React

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Punto de entrada del lado del cliente
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Lo sentimos, algo salió mal
');
    }
  });

  setTimeout(abort, 10000); // Opcional: Tiempo de espera para evitar colgar indefinidamente
});

app.use(express.static('public')); // Servir recursos estáticos

app.listen(port, () => {
  console.log(`Servidor escuchando en http://localhost:${port}`);
});

Fragmento de código de ejemplo (lado del cliente - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Componente de aplicación React de ejemplo (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("¡Datos cargados con éxito!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simula un retraso de carga
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
¡Bienvenido a Streaming SSR!
      
Esta es una demostración de React Streaming SSR.
      Cargando...
}>