1.
RENDERIZADO
El renderizado es el proceso de generar la representación visual de una página
web en el navegador. En otras palabras, es el proceso mediante el cual se
convierten los elementos HTML, CSS y JavaScript de una página en lo que
finalmente vemos en nuestra pantalla.
Cuando accedemos a una página web, el navegador recibe el código fuente de
la página, que está escrito en HTML. A continuación, el navegador interpreta ese
código y lo convierte en una estructura de objetos conocida como el "árbol de
nodos" o "DOM" (Document Object Model). El DOM es una representación en
memoria de la estructura y contenido de la página.
Una vez que el navegador ha construido el DOM, aplica las reglas de estilo
definidas en las hojas de estilo CSS para determinar cómo se deben mostrar los
elementos de la página. Esto se conoce como el "renderizado de estilo" o
"renderizado CSS".
Finalmente, el navegador utiliza el DOM y las reglas de estilo para generar la
disposición y la apariencia visual de los elementos de la página, lo que se conoce
como "renderizado de diseño" o "renderizado visual". Esto implica calcular las
dimensiones y la posición de los elementos, aplicar efectos visuales y mostrar el
contenido en la pantalla.
El renderizado ocurre cada vez que se carga una página web o cuando hay
cambios en el DOM o en las hojas de estilo que afectan la apariencia de la
página. Este proceso puede llevar tiempo, especialmente si la página contiene
muchos elementos o requiere la ejecución de scripts JavaScript complejos.
2. PRE-RENDERIZADO
El prerrenderizado (prerendering en inglés) es el proceso de generar el contenido
de una página web de antemano, antes de que un usuario acceda a ella. En lugar
de esperar a que el navegador del usuario cargue la página y la renderice en ese
momento, el prerrenderizado permite generar una versión estática o dinámica de
la página de antemano y enviarla al usuario de manera más rápida.
El objetivo principal del prerrenderizado es mejorar el rendimiento y la velocidad
de carga de una aplicación web. Al generar el contenido antes de tiempo, se
reduce el tiempo de espera percibido por el usuario, ya que la página se muestra
instantáneamente en lugar de tener que esperar a que se cargue y se genere en
el navegador.
3. HIDRATACIÓN (HYDRATION)
La hidratación (hydration en inglés) se refiere al proceso de agregar
interactividad y funcionalidad a una página web prerrenderizada. Después de
que una página se ha prerrenderizado, se envía al navegador como HTML
estático. Sin embargo, para permitir la interacción del usuario y el funcionamiento
de los componentes dinámicos, es necesario "hidratar" la página.
1
Fuente: [Link]
La hidratación implica tomar el HTML estático generado durante el
prerrenderizado y vincularlo con el código JavaScript correspondiente en el
navegador. El código JavaScript se encargará de asociar los eventos, gestionar
el estado y proporcionar la interactividad en la página.
En el caso de [Link], después de que se ha prerrenderizado una página, se
envía al navegador como HTML estático junto con el código JavaScript necesario
para la hidratación. El navegador ejecuta el código JavaScript y, mediante la
reconciliación del DOM, establece la interactividad y funcionalidad de la página.
La hidratación es importante porque permite que una página web
prerrenderizada funcione como una aplicación web interactiva. Los componentes
pueden responder a eventos del usuario, realizar solicitudes a servidores y
actualizar el estado en tiempo real.
2
Fuente: [Link]
4. PRE-RENDERIZADO ESTATICO Y DEL SERVIDOR
a. PRE-RENDERIZADO ESTATICO
Prerenderizado Estático (Static Generation - SSG): Con SSG, [Link] genera
HTML estático para cada página en el momento de la compilación. Esto significa
que las páginas se generan de antemano y se almacenan en caché, lo que
permite servir el contenido rápidamente a los usuarios.
Es muy común usar pre-renderizado estático en el siguiente tipo de páginas:
• Páginas de inicio: Las páginas de inicio generalmente contienen
contenido estático, como información sobre la empresa, descripciones de
productos o servicios destacados, testimonios de clientes, etc. Dado que
este contenido no cambia con frecuencia, el prerrenderizado estático es
una opción eficiente para generar y almacenar en caché el HTML de la
página de inicio.
• Páginas de marketing y landing pages: Estas páginas a menudo tienen un
contenido estático que se crea con el propósito de promocionar un
producto, servicio o evento. Pueden incluir descripciones, beneficios,
llamadas a la acción y formularios de registro. El prerrenderizado estático
es ideal para estas páginas, ya que el contenido no cambia
frecuentemente y se puede generar de antemano para una entrega rápida
al usuario.
• Páginas de contenido informativo: Si tienes páginas que proporcionan
información estática, como preguntas frecuentes, políticas de privacidad,
términos y condiciones, páginas de contacto, etc., el prerrenderizado
estático es una excelente opción. Estas páginas generalmente no
requieren interactividad ni actualizaciones frecuentes, por lo que se
pueden prerrenderizar y servir como HTML estático de manera eficiente.
3
Fuente: [Link]
• Blogs y artículos: Si tienes un blog o una sección de artículos en tu sitio
web, puedes utilizar el prerrenderizado estático para generar y almacenar
en caché el HTML de cada artículo. Esto permitirá una entrega rápida de
los contenidos a los usuarios y mejorará la experiencia de lectura.
Vamos a ver un ejemplo:
Supongamos que tenemos una página simple con contenido estático que
deseamos prerrenderizar estáticamente.
1- Creamos un archivo de componente React para la página:
// pages/[Link]
import React from 'react';
export default function AboutPage() {
return (
<div>
<h1>Acerca de nosotros</h1>
<p>Somos una empresa dedicada a brindar soluciones
tecnológicas.</p>
</div>
);
}
4
Fuente: [Link]
2- Compilar y generar los archivos estáticos:
Ejecuta el siguiente comando en la consola para compilar y generar los archivos
estáticos:
npm run build
3- Desplegar y servir los archivos estáticos:
Despliega los archivos estáticos generados en un servidor o plataforma de
hosting compatible.
Cuando un usuario acceda a la página "Acerca de nosotros", [Link] entregará
el archivo HTML prerrenderizado estático junto con el código JavaScript
necesario para hidratar la página.
a. PRE-RENDERIZADO ESTATICO CON ACCESO A DATOS
En los casos que vimos hasta ahora, vimos páginas que podían generar en
tiempo de construcción sin acceder a fuentes de datos externas. Sin embargo,
puede ser que en nuestro sitio, necesitemos acceder al sistema de archivos, una
función externa de un tercero (API, esto lo vamos a ver en el ultimo Sprint) o una
consulta a la base de datos.
En [Link], puedes utilizar el prerrenderizado estático con datos mediante la
función getStaticProps. Esta función se ejecuta durante el tiempo de
compilación y te permite obtener datos de fuentes externas, como una API, una
base de datos o archivos locales.
Veamos un ejemplo que muestra cómo puedes utilizar getStaticProps para
prerrenderizar estáticamente una página que utiliza un archivo local para
almacenar datos:
Tenemos un archivo [Link] que contiene la información de algunos productos:
// [Link]
{
"products": [
{
"id": 1,
"name": "Producto 1",
"description": "Descripción del producto 1"
},
{
"id": 2,
"name": "Producto 2",
5
Fuente: [Link]
"description": "Descripción del producto 2"
},
{
"id": 3,
"name": "Producto 3",
"description": "Descripción del producto 3"
}
]
}
A continuación, vamos a utilizar [Link] y la función getStaticProps para
prerrenderizar estáticamente una página que muestra los productos utilizando
los datos del archivo [Link]:
// pages/[Link]
import React from 'react';
import fs from 'fs';
import path from 'path';
export default function ProductsPage({ products }) {
return (
<div>
<h1>Productos</h1>
<ul>
{[Link]((product) => (
<li key={[Link]}>
<h3>{[Link]}</h3>
<p>{[Link]}</p>
</li>
))}
</ul>
</div>
6
Fuente: [Link]
);
}
export async function getStaticProps() {
const filePath = [Link]([Link](), '[Link]');
const jsonData = [Link](filePath, 'utf-8');
const data = [Link](jsonData);
return {
props: {
products: [Link],
},
};
}
En este ejemplo, hemos utilizado los módulos fs y path de [Link] para leer el
archivo [Link] desde el sistema de archivos. Luego, hemos convertido los
datos en un objeto JavaScript utilizando [Link]().
La función getStaticProps se utiliza para obtener los datos de los productos
desde el archivo [Link] y pasarlos como props al componente ProductsPage.
Durante el tiempo de compilación, [Link] generará de manera estática la página
[Link] con los datos de los productos incluidos.
a. PRE-RENDERIZADO DEL LADO DEL SERVIDOR
Prerenderizado del Lado del Servidor (Server-Side Rendering - SSR): Con SSR,
[Link] genera el HTML en cada solicitud del cliente. Esto permite la generación
de contenido dinámico en tiempo real.
Es muy común usar pre-renderizado del lado del servidor en el siguiente tipo de
páginas:
• Contenido dinámico o actualizado frecuentemente: Si tienes contenido en
tu aplicación web que cambia con frecuencia o requiere acceso a datos
en tiempo real, el prerrenderizado del lado del servidor es una opción útil.
Con SSR, cada vez que un usuario solicita una página, se genera el HTML
en el servidor, lo que permite mostrar contenido actualizado y dinámico en
tiempo real.
7
Fuente: [Link]
• Interactividad y personalización basada en el usuario: Si necesitas
proporcionar una experiencia altamente interactiva y personalizada para
cada usuario, SSR puede ser beneficioso. Al generar el HTML en el
servidor para cada solicitud, puedes adaptar el contenido en función de
las preferencias del usuario, datos de sesión o información contextual
específica.
• Rendimiento en tiempo de carga: El prerrenderizado del lado del servidor
puede ayudar a mejorar el tiempo de carga inicial de la página. Aunque el
HTML inicial se genera en el servidor, los navegadores modernos pueden
comenzar a renderizar y mostrar el contenido antes de que se complete
la carga total de la página. Esto puede resultar en una apariencia más
rápida para los usuarios, ya que no tienen que esperar a que se
descarguen y ejecuten el JavaScript necesario para hidratar la página.
• SEO y rastreo de motores de búsqueda: Si el SEO (Search Engine
Optimization) es una consideración importante para tu aplicación web, el
SSR puede ser beneficioso. Los motores de búsqueda pueden rastrear e
indexar fácilmente el contenido prerrenderizado del lado del servidor, lo
que ayuda a que tus páginas sean descubiertas y clasificadas en los
resultados de búsqueda.
• Acceso a datos confidenciales o autenticación del servidor: Si tu
aplicación web requiere acceso a datos confidenciales o utiliza lógica de
autenticación en el servidor, el prerrenderizado del lado del servidor es
útil. Puedes realizar las solicitudes a los servicios o bases de datos
seguros en el servidor y luego generar el HTML con los datos
correspondientes antes de enviarlo al cliente.
Veamos este ejemplo donde tenemos una página de productos donde los datos
se obtienen de una fuente externa en el servidor:
// pages/[Link]
import React from 'react';
export default function ProductsPage({ products }) {
return (
<div>
<h1>Productos</h1>
<ul>
{[Link]((product) => (
<li key={[Link]}>
<h3>{[Link]}</h3>
<p>{[Link]}</p>
8
Fuente: [Link]
</li>
))}
</ul>
</div>
);
}
export async function getServerSideProps() {
// Simula obtener los datos de productos desde una fuente
externa en el servidor
const response = await
fetch('[Link]
const data = await [Link]();
return {
props: {
products: data,
},
};
}
En este ejemplo, utilizamos la función getServerSideProps en lugar de
getStaticProps. La función getServerSideProps se ejecuta en el servidor
para cada solicitud y obtiene los datos de productos desde una fuente externa
(en este caso, simulada utilizando una API ficticia).
Dentro de getServerSideProps, hacemos una solicitud HTTP a la API de
productos y esperamos la respuesta. Luego, los datos se pasan como props al
componente ProductsPage. En cada solicitud, los datos se obtienen en tiempo
real desde el servidor, lo que permite contenido dinámico y actualizado.
Al utilizar el prerrenderizado del lado del servidor, el contenido de la página se
genera en el servidor y se envía al cliente con los datos ya incluidos. Esto es útil
cuando necesitas datos que cambian con frecuencia o dependen de la
interacción del usuario.
Es importante tener en cuenta que el prerrenderizado del lado del servidor tiene
un costo adicional en el rendimiento y la carga del servidor en comparación con
el prerrenderizado estático. Por lo tanto, es recomendable utilizarlo cuando sea
realmente necesario y en páginas donde los datos cambien con frecuencia o
requieran interacción en tiempo real.
9
Fuente: [Link]
1. OBTENCION DE DATOS (FETCHING)
Muchas veces cuando armamos nuestro sitio web, nos nutrimos de datos desde
otros sistemas o sitios. Como vimos en ejemplos anteriores esto se hace usando
APIs provistas por dicho sistemas. Usualmente es complejo tratar con los
resultado que nos proveen, pero [Link] nos facilita usando la
biblioteca SWR, que tiene un hook muy utilizado.
SWR (Stale-While-Revalidate) es una biblioteca que simplifica el manejo de la
caché y la obtención de datos en aplicaciones React. SWR se integra de manera
excelente con [Link] y proporciona una forma sencilla y eficiente de realizar
solicitudes HTTP y mantener los datos actualizados.
Veamos un ejemplo de cómo utilizar SWR para el data fetching en [Link]:
import React from 'react';
import useSWR from 'swr';
export default function ProductsPage() {
const { data, error } = useSWR('/api/products', fetcher);
if (error) {
return <div>Error al cargar los datos.</div>;
}
if (!data) {
return <div>Cargando datos...</div>;
}
return (
<div>
<h1>Productos</h1>
<ul>
{[Link]((product) => (
<li key={[Link]}>
<h3>{[Link]}</h3>
10
Fuente: [Link]
<p>{[Link]}</p>
</li>
))}
</ul>
</div>
);
}
const fetcher = (url) => fetch(url).then((res) =>
[Link]());
En este ejemplo, utilizamos useSWR para realizar una solicitud HTTP a
/api/products. La función useSWR toma dos argumentos: la URL de la API y una
función de fetcher que se utiliza para realizar la solicitud HTTP y analizar la
respuesta.
Dentro del componente, useSWR devuelve un objeto con las propiedades data
y error. data contiene los datos obtenidos de la API, mientras que error
indica si ocurrió algún error durante la solicitud.
En función del estado de data y error, mostramos diferentes mensajes en la
interfaz de usuario. Si hay un error, mostramos un mensaje de error. Si los datos
aún no están disponibles, mostramos un mensaje de carga. Una vez que los
datos se obtienen correctamente, los utilizamos para renderizar la lista de
productos.
Finalmente, la función de fetcher toma una URL como argumento y utiliza la
función fetch de JavaScript para realizar una solicitud HTTP GET a la URL
especificada. Luego, utiliza el método json() en la respuesta para analizar los
datos JSON devueltos por la API.
La magia de SWR radica en que maneja automáticamente el almacenamiento
en caché y la actualización de los datos. Si se realiza una nueva solicitud a la
misma URL, SWR proporcionará automáticamente los datos en caché mientras
realiza una nueva solicitud en segundo plano para actualizarlos. Esto mejora la
experiencia del usuario al mostrar datos rápidamente y mantenerlos actualizados
en tiempo real.
11
Fuente: [Link]