React Server Components

.

El año 2020 ha sido una locura para todos nosotros. Para estas fiestas de fin de año, el equipo de React ha anunciado recientemente una emocionante investigación sobre una nueva forma de construir aplicaciones React con React Server Components.

Por favor, ten en cuenta que React Server Components está todavía en desarrollo y no se recomienda para producción todavía. La característica es completamente opcional y todavía puedes escribir tu componente como lo haces hoy.

Puedes ver la charla de una hora y la demo aquí, pero aquí hay una guía de 5 minutos que resalta y explica las partes importantes.

Además, si tienes curiosidad por saber cómo los nuevos componentes de React juegan un papel en los futuros sistemas de diseño, te recomiendo que leas:

React Server Component es una forma de escribir componentes de React que se renderizan en el lado del servidor con el objetivo de mejorar el rendimiento de las aplicaciones React.

Uno de los problemas a los que se enfrenta el desarrollo de aplicaciones con React es el elevado número de peticiones de red que se realizan habitualmente mientras los usuarios esperan a que la página/los datos que han solicitado estén disponibles:

Por ejemplo, el enfoque común para la obtención de datos hoy en día es llamar a las APIs utilizando el gancho useEffect:

useEffect(() => {
axios.get("URL HERE")
.then((response) => {
// set data into state setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, );

Aunque no hay nada malo en ello, este enfoque de obtención de datos siempre costará algo de tiempo para renderizar algo significativo para el usuario.

El otro problema es, por supuesto, el tamaño del paquete. La minificación, la división del código, la eliminación del código muerto son algunos ejemplos de métodos utilizados para reducir el tamaño del bundle de la aplicación React. ¿Por qué? Porque un tamaño de bundle grande tarda en descargarse. No todo el mundo tiene acceso a un dispositivo rápido y a un internet rápido:

Los componentes del servidor de React ayudarán a resolver los dos problemas anteriores y mucho más.

Cómo funcionan los React Server Components

Debido a que React Server Components está todavía en fase experimental, los detalles de implementación de esta característica podrían cambiar. Aun así, puedes agarrar algunos de sus conceptos centrales mirando la demo.

Lo primero que hay que notar es que hay varios paquetes con una versión experimental en el archivo package.json:

"react": "0.0.0-experimental-3310209d0",
"react-dom": "0.0.0-experimental-3310209d0",
"react-fetch": "0.0.0-experimental-3310209d0",
"react-fs": "0.0.0-experimental-3310209d0",
"react-pg": "0.0.0-experimental-3310209d0",
"react-server-dom-webpack": "0.0.0-experimental-3310209d0",

Los paquetes react , react-dom y react-server-dom-webpack utilizan una versión experimental que habilita React Server Component, mientras que react-fetch , react-fs y react-pg son un grupo de paquetes wrapper utilizados para interactuar con el sistema de entrada/salida (Se denominan React IO Libraries)

El siguiente punto es que esta demo está alimentada por Express.js, lo cual tiene sentido porque se necesita un servidor para renderizar los componentes. Pero esto también plantea la pregunta: ¿significa esto que los Server Components sólo funcionan en un entorno JavaScript? ¿Qué pasa con Go, Java y otros entornos del lado del servidor?

Es posible que veamos soporte para otros entornos en el futuro, así que dejemos de lado este punto por ahora.

Por supuesto, todos estos detalles de implementación podrían cambiar en el futuro, a medida que avance la investigación.

Pasando al código dentro de la carpeta src/, se pueden ver tres tipos de extensiones para los archivos de componentes:

• .server.js la extensión indica un Componentes de Servidor
• .client.js la extensión indica Componentes de Cliente React
• La extensión normal .js es para componentes compartidos. Estos componentes pueden ejecutarse en el servidor o en el cliente, dependiendo de quién los importe.

Cuando inicies la aplicación con el comando npm start, se ejecutarán dos tareas de forma concurrente:

• El servidor Node que se ejecuta usando el script server/api.server.js
• La construcción de Webpack para el bundle React del lado del cliente, usando el script scripts/build.js

Mirando el script del servidor, puedes ver que se está importando el app.server.js en el archivo:

const ReactApp = require('../src/App.server').default;

Y más tarde se procesa como Node Writable stream:

const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

El código bajo la extensión .server.js incluyendo sus dependencias no se incluye en el bundle del cliente, lo que significa que tiene efecto cero en el tamaño del bundle.

Los componentes del servidor tienen acceso directo a la base de datos o al sistema de archivos en el servidor, por lo que puede recoger cualquier dato que necesite y enviarlo al cliente en el primer render. Puedes ver el ejemplo en el archivo NoteList.server.js:

export default function NoteList({searchText}) {const notes = db.query(
`select * from notes where title ilike  order by id desc`,

).rows;
return notes.length > 0 ? (
<ul className="notes-list">
{notes.map((note) => (
<li key={note.id}>
<SidebarNote note={note} />
</li>
))}
</ul>
) : (
<div className="notes-empty">
{searchText
? `Couldn't find any notes titled "${searchText}".`
: 'No notes created yet!'}{' '}
</div>
);
}

Los Componentes Servidor no pueden tener ninguna interactividad, lo que significa que no puedes useStateni crear listeners en el lado del servidor. Tienes que poner el estado en tu lado del cliente e importarlos desde los Componentes Servidor.

¿Cuál es el beneficio de React Server Component?

• Los componentes servidor no están incluidos en el bundle. Nunca son descargados por el navegador, teniendo un efecto nulo en el tamaño del bundle
• Puedes reducir el tamaño de tu bundle moviendo los componentes estáticos, de sólo renderización, al lado del servidor y mantener los componentes interactivos-estáticos en el lado del cliente
• Los componentes del servidor pueden acceder a los recursos del lado del servidor. Puedes obtener datos de la base de datos o del sistema de archivos directamente, y también puedes obtenerlos de las APIs al igual que en el lado del cliente
• Los componentes del servidor también pueden leer consultas GraphQL

¿Qué diferencia hay con el renderizado del lado del servidor?

SSR, tal y como funciona hoy en día en las aplicaciones React, es simplemente enviar componentes renderizados como HTML al cliente para que tu aplicación parezca tener una respuesta rápida. El usuario no puede hacer nada con tu aplicación hasta que el JavaScript se descargue.

React Server Components es diferente. Como se muestra en la demo, los Server Components no se renderizan como HTML, sino como un formato especial que se transmite al cliente. El flujo no tiene un protocolo estándar por ahora, pero se parece mucho al formato JSON. Aquí hay un trozo de la respuesta:

M1:{"id":"./src/SearchField.client.js","chunks":,"name":""}

Mientras que el SSR sólo se utiliza una vez para el renderizado inicial, los Server Components pueden ser re-fetcheados varias veces para volver a renderizar los datos (en el caso de la demo, los posts markdown).

Conclusión

Los Server Components de React son una nueva y excitante característica que puede cambiar la forma en que los desarrolladores escriben su aplicación React. Permite que las aplicaciones React importen paquetes sin afectar al tamaño del paquete del cliente, creando una representación estática de la aplicación que puede hacerse interactiva mediante el uso de Client Components.

Los desarrolladores también pueden utilizar tanto Server Components como Client Components bajo un único árbol DOM, lo que le permite volver a obtener los componentes del servidor sin destruir el estado de los componentes del cliente.

Pero como esta característica es todavía experimental, es difícil determinar cómo será realmente útil en la naturaleza. Por un lado, esta característica sólo se puede utilizar bajo el entorno de servidor Node.js actualmente.

El equipo de React se centra actualmente en llevar esta característica a meta-frameworks como Next.js y Gatbsy, lo que significa que podría pasar algún tiempo (si es que alguna vez) antes de que veamos soporte para otros lenguajes del lado del servidor como PHP, Python, Go, o Ruby.

Para recapitular, React del lado del cliente no va a desaparecer. React del lado del servidor es opcional.

Además, he compartido mis pensamientos sobre ¿Debería crear un sistema de diseño para los componentes de servidor de React? que podría interesarte.