Renderizado
El renderizado convierte el código que escribes en interfaces de usuario. React y Next.js te permiten crear aplicaciones web híbridas donde partes de tu código pueden renderizarse en el servidor o en el cliente. Esta sección te ayudará a entender las diferencias entre estos entornos de renderizado, estrategias y tiempos de ejecución.
Fundamentos
Para comenzar, es útil familiarizarse con tres conceptos fundamentales de la web:
- Los Entornos donde puede ejecutarse el código de tu aplicación: el servidor y el cliente.
- El Ciclo de Vida Solicitud-Respuesta que se inicia cuando un usuario visita o interactúa con tu aplicación.
- El Límite de Red que separa el código del servidor y del cliente.
Entornos de Renderizado
Existen dos entornos donde las aplicaciones web pueden renderizarse: el cliente y el servidor.
- El cliente se refiere al navegador en el dispositivo del usuario que envía una solicitud a un servidor para obtener el código de tu aplicación. Luego convierte la respuesta del servidor en una interfaz de usuario.
- El servidor se refiere a la computadora en un centro de datos que almacena tu código de aplicación, recibe solicitudes de un cliente y envía una respuesta apropiada.
Históricamente, los desarrolladores tenían que usar diferentes lenguajes (ej. JavaScript, PHP) y frameworks al escribir código para el servidor y el cliente. Con React, los desarrolladores pueden usar el mismo lenguaje (JavaScript) y el mismo framework (ej. Next.js o el framework de tu elección). Esta flexibilidad te permite escribir código para ambos entornos sin cambiar de contexto.
Sin embargo, cada entorno tiene su propio conjunto de capacidades y limitaciones. Por lo tanto, el código que escribes para el servidor y el cliente no siempre es el mismo. Hay ciertas operaciones (ej. obtención de datos o manejo del estado del usuario) que son más adecuadas para un entorno que para otro.
Entender estas diferencias es clave para usar React y Next.js efectivamente. Cubriremos las diferencias y casos de uso con más detalle en las páginas de Componentes del Servidor y Componentes del Cliente. Por ahora, sigamos construyendo nuestros fundamentos.
Ciclo de Vida Solicitud-Respuesta
En términos generales, todos los sitios web siguen el mismo Ciclo de Vida Solicitud-Respuesta:
- Acción del Usuario: El usuario interactúa con una aplicación web. Esto podría ser hacer clic en un enlace, enviar un formulario o escribir una URL directamente en la barra de direcciones del navegador.
- Solicitud HTTP: El cliente envía una solicitud HTTP al servidor que contiene información necesaria sobre qué recursos se solicitan, qué método se está usando (ej.
GET,POST) y datos adicionales si es necesario. - Servidor: El servidor procesa la solicitud y responde con los recursos apropiados. Este proceso puede incluir pasos como enrutamiento, obtención de datos, etc.
- Respuesta HTTP: Después de procesar la solicitud, el servidor envía una respuesta HTTP al cliente. Esta respuesta contiene un código de estado (que indica al cliente si la solicitud fue exitosa o no) y los recursos solicitados (ej. HTML, CSS, JavaScript, recursos estáticos, etc).
- Cliente: El cliente analiza los recursos para renderizar la interfaz de usuario.
- Acción del Usuario: Una vez que se renderiza la interfaz de usuario, el usuario puede interactuar con ella, y todo el proceso comienza de nuevo.
Una parte importante de construir una aplicación web híbrida es decidir cómo dividir el trabajo en el ciclo de vida y dónde colocar el Límite de Red.
Límite de Red
En el desarrollo web, el Límite de Red es una línea conceptual que separa los diferentes entornos. Por ejemplo, el cliente y el servidor, o el servidor y el almacén de datos.
En React, puedes elegir dónde colocar el límite de red cliente-servidor donde tenga más sentido.
Entre bastidores, el trabajo se divide en dos partes: el gráfico de módulos del cliente y el gráfico de módulos del servidor. El gráfico de módulos del servidor contiene todos los componentes que se renderizan en el servidor, y el gráfico de módulos del cliente contiene todos los componentes que se renderizan en el cliente.
Puede ser útil pensar en los gráficos de módulos como una representación visual de cómo los archivos en tu aplicación dependen unos de otros.
Puedes usar la convención "use client" de React para definir el límite. También existe una convención "use server", que le indica a React que realice algún trabajo computacional en el servidor mientras está en el cliente.
Construyendo Aplicaciones Híbridas
Cuando trabajas en estos entornos, es útil pensar en el flujo del código en tu aplicación como unidireccional. En otras palabras, durante una respuesta, tu código de aplicación fluye en una dirección: del servidor al cliente.
Si necesitas acceder al servidor desde el cliente, envías una solicitud nueva al servidor en lugar de reutilizar la misma solicitud. Esto facilita entender dónde renderizar tus componentes y dónde colocar el Límite de Red.
En la práctica, este modelo anima a los desarrolladores a pensar primero en qué quieren ejecutar en el servidor, antes de enviar el resultado al cliente y hacer que la aplicación sea interactiva.
Este concepto se volverá más claro cuando veamos cómo puedes entrelazar componentes del cliente y del servidor en el mismo árbol de componentes.