Server Components Wars: PHP Strikes Back

Hola. Gracias por la cálida bienvenida. Y hoy, nos divertiremos con un lenguaje de 30 años y React. Porque todos amamos React, ¿verdad? Así que soy Edoardo. Soy un dev rel senior en Storyblok. Storyblok es un CMS headless y es tan hermoso que ni siquiera tengo que hablar de ello.

Hablaremos sobre componentes de servidor. Y quiero que te concentres en esta palabra. Los componentes de servidor se ejecutan exclusivamente en el servidor. Podrías decir, Edo, sí. Todos sabemos eso. Todos sabemos que los componentes de servidor se ejecutan en el servidor, sí. Trabajo en SDKs de código abierto, SDKs de React, y SDKs de próxima generación, y veo los problemas, y veo que muchos de nosotros realmente no entendemos cómo funcionan los componentes de servidor, los componentes de React funcionan.

Así que quiero que te concentres en esta palabra y te llevaré a un viaje a través del tiempo, y comenzaremos con el episodio uno primero. La amenaza de PHP. Y recuerdas tal vez hace 30 años, esta era la web. Algunos de ustedes estaban allí, algunos de ustedes ni siquiera habían nacido. Pero esta era la web en ese entonces. Y este tipo, Rasmus Lerdorf, ideó una solución ingeniosa, un lenguaje de scripting para tener páginas web dinámicas cargando datos de algún lugar, componiendo páginas en algo dinámico, ¿verdad? Y nació PHP.

Se llamaba Personal Home Page en ese entonces. Ahora, después de tres reescrituras completas del núcleo, y ahora PHP significa algo completamente diferente y nadie sabe el significado de PHP, pero ahora tenemos PHP que funciona exactamente así. Entonces nosotros, el cliente, hacemos una solicitud al servidor. El servidor sabe que la solicitud debe ser dirigida a un index.php o algo así. El index.php debe ser ejecutado por un intérprete. Los intérpretes tienen acceso a la API de DBMS, la API de POSIX, alguna API externa. Y luego el intérprete, el propósito del script era generar, es generar un archivo HTML. Este archivo luego regresa al servidor y al cliente. Este es todo el viaje de ida y vuelta, ¿verdad? Y el componente PHP simple es exactamente eso. Así que comenzamos desde arriba, nos conectamos a una base de datos MySQL, por ejemplo. Obtenemos algunos datos, y luego tenemos una plantilla, renderizamos datos.

Así que este script se ejecuta solo una vez. Nunca se vuelve a renderizar y el valor que renderizamos aquí se envía de vuelta al cliente y nunca cambia, ¿de acuerdo? Así que ahora pasamos al siguiente episodio y la siguiente esperanza. Así que cuando el imperio de PHP gobernaba, el problema era que cuando hacías una solicitud desde el cliente, tenías que esperar hasta que todo el procesamiento en el servidor se completara, ¿verdad? Así que ideamos una solución ingeniosa. Movimos el proceso de renderizado al cliente. Así que el proceso es bastante similar. Aún así, tenemos una solicitud al servidor.

El servidor envió algo al back end y generó un HTML y JS. Pero el JS ahora se renderiza en el cliente. Así que todo el proceso de renderizado ocurre a nivel del cliente. Así que resolvemos algo, pero aún tenemos que hacer algunas llamadas de vuelta al servidor para obtener algunos datos, buscar algo.

Así que Facebook se reunió. Facebook en ese entonces creó React. Y podrías pensar que aman mucho JS, ¿verdad? Pero si te digo que en realidad toda su infraestructura, todo su backend, todo su software estaba basado en PHP y todavía gran parte lo está. Así que React y JSX nacieron después de su arduo trabajo en PHP. De hecho, idearon un subconjunto, no, un superconjunto de PHP llamado XHP, que es esta cosa donde básicamente tienes fragmentos XML en el código PHP. Esto es XHP. Este es también el repositorio de GitHub para esta cosa. Y puedes reconocer algo aquí. Sí, estás en lo correcto. Así que básicamente, PHP, está bien.

Ahora, después de eso, sabes que tenemos algo nuevo. Tenemos el isomorphic JavaScript, universal JavaScript, lo que sea. Así que el renderizado del lado del servidor, otro patrón. Así que ahora comenzamos desde una solicitud al servidor. El servidor envía algo al backend de Node o lo que sea. Tenemos un shell renderizado. Así que tenemos algo de HTML y JS. Así que tenemos la primera pintura con contenido en el cliente. Pero luego necesitamos los datos. Así que necesitamos solicitar datos. Así que tenemos otro viaje de ida y vuelta. Se llama hidratación. Así que volvemos al servidor. El servidor nuevamente regresa al backend de Node. El backend de Node obtiene algún contenido de un DBMS, POSIX, o un CMS sin cabeza tan hermoso como Storyblok. Y luego tenemos el renderizado de contenido. Enviamos el contenido de vuelta al servidor, luego al cliente, y esta es la pintura con contenido más grande, ¿verdad?

Así que finalmente, PHP contraataca. ¿Por qué? Porque tenemos muchos problemas con el renderizado del lado del servidor. Sabes, requiere hidratación. Tenemos el paquete, que es masivo.

Tenemos complejidad. El SEO es difícil. La gestión del estado es un lío. Así que React server components.

Finalmente, tengo dos minutos para presentarles los React server components, pero seré muy rápido. Así que React server components. Básicamente, haces una solicitud al servidor. El servidor solicita algo a index.js procesado por Node. Node solicita algún contenido del backend, DBMS, un maravilloso headless CMS, y luego renderiza un HTML. El HTML se envía de vuelta al servidor, y luego de vuelta al cliente. Puede haber algún renderizado del lado del cliente además de eso hecho probablemente por React.

Ahora, este es un simple React server component, ¿verdad? Comenzamos desde arriba. Así que obtenemos algunos datos del DB, MySQL, por ejemplo. Cuando obtenemos algunos datos, cuando tenemos una plantilla, renderizamos esos productos de tendencia, ¿verdad? Y esto se ejecuta una vez en cada solicitud. Nunca se vuelve a renderizar, y el valor renderizado se envía de vuelta al cliente y nunca cambia. Hmm, recuerdo algo similar, ¿verdad? Sí, estás en lo correcto, y también Leah lo aprueba.

Así que mi mensaje para ustedes hoy es no crean en el bombo. Así que cada nueva tendencia, todo es solo bombo. Así que quiero que estudien patrones, que se centren en patrones, porque si realmente entienden patrones, pueden moverse fácilmente de un framework a uno nuevo, de un patrón a uno nuevo. Llegan a entender lo básico, ¿verdad? Y eso es todo por hoy. Muchas gracias. Pueden encontrarme en línea y en el stand de arriba. Gracias. Gracias. Gracias. Gracias.