Modos de Rendering en Next.js: Cliente, Servidor y Estático

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:57

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 2 de 19

Clase 2 / 19

Recursos

¿Qué es el rendering en Next.js?

El término "rendering" en el contexto de Next.js se refiere al proceso mediante el cual se transforma código y datos en una representación visible, concretamente desde JavaScript a HTML. Este concepto, aunque general, es esencial en el desarrollo web, y saber manejarlo puede mejorar considerablemente el desempeño de una aplicación.

¿Cuáles son los modos de rendering disponibles?

¿Qué es el client-side rendering?

El client-side rendering (CSR) implica que el trabajo de rendering ocurre en el navegador del usuario cada vez que se accede a una página. Esto es común en aplicaciones tipo single page application (SPA). Por ejemplo, al incluir etiquetas SRC para JavaScript, se ordena al navegador descargar y procesar ese código JavaScript para convertirlo en HTML.

¿Cuáles son las ventajas y desventajas?

Ventajas:
- Mayor interactividad: Las páginas pueden cargarse rápidamente después de que el JavaScript necesario se haya descargado.
- Facilidad de implementación para desarrollos que usan createReactApp.
Desventajas:
- Posible afectación al SEO: Los motores de búsqueda podrían tener dificultades para indexar contenido generado dinámicamente.
- Tiempo de carga inicial más lento: Ya que el navegador necesita descargar y procesar todo el JavaScript necesario.

¿Qué implica el server-side rendering?

El server-side rendering (SSR) implica que el servidor se encargue del procesamiento del JavaScript y lo transforme en HTML antes de enviarlo al navegador. Esto se realiza bajo demanda, y es usado por muchos lenguajes backend como Python, Ruby o PHP.

¿Cuál es la importancia del SSR?

Mejora del SEO: Los motores de búsqueda pueden indexar fácilmente el contenido ya que reciben HTML completo.
Reducción del tiempo de carga inicial: La página llega ya renderizada al navegador, lo que agiliza la percepción de carga por parte del usuario.
Un ejemplo de frameworks: Symfony, WordPress o Django utilizan este método, permitiendo un rendering eficiente en el servidor.

¿Cómo funciona el static generation?

El static generation es un modo de rendering que ocurre durante el proceso de compilación (build time). A diferencia de los dos métodos anteriores, este solo ocurre una vez cuando se construye el sitio, transformando JavaScript en HTML estático.

¿Por qué es relevante el static generation?

Eficiencia en aplicaciones y sitios estáticos: Ideal para crear páginas donde el contenido no cambia frecuentemente, como blogs o páginas informativas.
Ejemplo de frameworks: Algunos frameworks como Gatsby y Next.js implementan este tipo de rendering, facilitando la creación de sitios estáticos robustos y rápidos.

¿Cómo aprovechar las aplicaciones híbridas en Next.js?

Una de las características destacadas de Next.js es la posibilidad de crear aplicaciones híbridas, es decir, poder combinar diferentes modos de rendering en una misma aplicación.

¿Qué beneficios ofrece una aplicación híbrida?

Flexibilidad: Puedes escoger el tipo de rendering adecuado según la necesidad de cada página dentro de una aplicación.
Ejemplos de uso:
- Una página "About" podría usar static generation.
- Un dashboard de usuarios, que necesita datos actualizados constantemente, podría usar server-side rendering.
- Otros componentes de la aplicación podrían ser renderizados completamente en el cliente.

Esta funcionalidad permite a los desarrolladores obtener lo mejor de cada método de rendering y optimizar sus aplicaciones para el rendimiento y la experiencia del usuario.

Al manejar estos conceptos y aplicar las técnicas adecuadas, puedes desarrollar aplicaciones web eficientes, escalables y con una experiencia de usuario óptima. Sigue explorando y experimentando con estos métodos para entender mejor cuál se adapta a tus necesidades específicas.

Fernando Quinteros Gutierrez

Hace 5 años

🗒 Modos de Rendering

Ideas/conceptos claves

Rendering procesar pedazos de código (JS) y datos para mostrar su resultado (HTML)

Apuntes

Existen 3 formas de realizar un proceso de rendering
1. Client-side
  - Sucede bajo demanda en el navegador
  - El navegador cada vez que visite nuestro sitio, el trabajo lo realizara el navegador de tus usuarios
  - Ej.: Cada que agregas JS usando la etiqueta src, debido a que estamos diciendo al navegador que ejecute nuestra etiqueta, descargue y que procese el JS para convertirlo en HTML
  - Ej.: create-react-app ⇒ Es un boilerplate para crear aplicaciones React, sin agregar cambios y servidores, lo que terminaremos enviando a los usuarios, será una aplicación client-side
2. Server-side
  - Significa que tenemos un servidor que se encarga ya sea de manera total o parcial de hacer el rendering de JS y transformarlo a HTML
  - El navegador recibe por parte del servidor HTML ya listo para mostrarse
  - Sucede bajo demanda en el servidor
  - La gran mayoría de lenguajes y frameworks backend
  - Symfony (PHP), WordPress clásico (PHP), Flash (Python), Django (Python), etc.
3. Static rendering
  - Trata del que el HTML se construya en el proceso de compilación
  - Transformará el código JS a HTML una sola vez en "build time"
  - Jekill, Wintersmith, Gatsby, Hugo, Next.js

💡 Next.js te permite crear aplicaciones híbridas

Next.js te permitirá escoger entre uno o más rendering modes para las diferentes páginas de tu aplicación

📌 RESUMEN: Existen 3 formas de poder hacer un proceso de rendering, client side la cual el navegador del cliente se encargará de transformar el JS a HTML, server side que significa que un servidor se encargara de la transformación baja demando o Static rendering, en la cual el proceso de renderizado se realiza una única vez al momento de compilar la aplicación

Introducción: rendering modes de Next.js

Creación de sitios estáticos con Next.js y Jamstack

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Arquitectura del proyecto

Arquitectura Jam Stack con Next.js y GraphQL

Configuración de Contentful: Creación de Cuenta y API Tokens

Importación de Datos y Configuración en Contentful

Configuración y uso inicial de un proyecto Next.js con Contentful

Uso de GraphQL y Autogeneración en Next.js con Contentful

Static Generation

Renderizado de Listas con Next.js y Contentful

"Uso de getStaticProps en Next.js para Renderizado en Servidor"

Páginas Dinámicas en Next.js: Renderizado de Plantas y Entradas

Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

Ventajas y desventajas de Static Site Generation en Next.js

Incremental Static Generation

Configuración de Incremental Static Generation en Next.js

Uso del Fallback en Next.js: Estrategias y Aplicaciones

Estrategia Stale-While-Revalidate en Next.js

Ventajas y desventajas del Incremental Static Generation en Next.js

Server Side Rendering con Next.js: Ventajas y Desventajas

Siguientes pasos

Despliegue de Next.js hacia Producción: Variables y Optimización

Bonus

Lectura de Archivos en Next.js con Node.js y File System

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos