Modos de renderizado en Next.js
Feb 21, 2022

Modos de renderizado en Next.js

Cada vez que se compila una aplicación en Next.js, se busca en cada página creada el mecanismo utilizado para obtener datos. Así, se determina la mejor manera de pre-renderizar, renderizar y visualizar estas páginas 🚀. Como vimos en el post anterior: Obteniendo datos con Next.js, existen varios mecanismos para obtener datos, y dependiendo de estos, tu sitio generará las páginas con una de las siguientes estrategias:

  1. Generación Estática (Static Generation: SSG) ⚡
  2. Renderizado del lado del servidor (Server Side Rendering: SSR) 🖥️
  3. Renderizado del lado del Cliente (Single Page Application: SPA) 🌐
Generación Estática (Static Generation: SSG) ⚡

Las páginas que en tiempo de compilación son completamente generadas en HTML y que son supremamente fáciles de cachear, se pueden generar si en tus páginas SOLO usaste getStaticProps o getStaticPaths.

Renderizado del lado del servidor (Server Side Rendering: SSR) 🖥️

Las páginas que en tiempo de compilación no son completamente generadas y que requieren algún tipo de información del servidor que solo cuando el usuario solicita la página se hace dicha petición y solicitud de datos al servidor. Estas páginas se generan si usaste, por ejemplo, getServerSideProps o getInitialProps. Estas páginas son cacheables luego de su primera carga.

Renderizado del lado del Cliente (Single Page Application: SPA) 🌐

Las páginas que también son cacheables y que pueden sin ningún problema ser completamente cacheadas, pero que una vez que el HTML ha cargado, necesitan solicitar información desde el lado del cliente (navegador). Normalmente, es lo que haces con los hooks o con el componentDidMount.

Renderizado Mixto 🌀

En una página puedes tener getServerSideProps, getInitialProps, o getStaticPaths junto con fetch dentro del componentDidMount o dentro del Hook. Esto es perfectamente normal y posible, y Next.js trata esto como una página mixta que puede seguir alguna de las dos primeras estrategias (SSR, SSG) y también obtención de los datos desde el cliente sin ningún problema.

Por defecto, todas las páginas son pre-renderizadas, es decir, el HTML y el contenido están casi listos para ser mostrados incluso si no tienen ninguno de los métodos de obtención de datos (getServerSideProps, getStaticPaths, getStaticProps). Tú implícitamente estás eligiendo qué mecanismo de pre-renderizado estás eligiendo para tus páginas al usar uno de los métodos de obtención de datos.

Conclusión 🏁

Espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente, o que simplemente te haya ayudado a entender cuáles son los mecanismos que tiene Next.js para la renderizar las páginas.

Ejercicios para practicar 📚💪

  1. Crea una aplicación en Next.js y experimenta con cada uno de los métodos de renderizado (SSG, SSR, SPA).
  2. Implementa una página con renderizado mixto, utilizando tanto getServerSideProps comofetch en un Hook.
  3. Compara el rendimiento y la experiencia de usuario en cada uno de los modos de renderizado.

Resumen en 3 puntos 📌

  1. Next.js ofrece tres modos de renderizado: Generación Estática (SSG), Renderizado del lado del servidor (SSR) y Renderizado del lado del Cliente (SPA).
  2. El método de obtención de datos que utilices en tus páginas determinará el modo de renderizado que Next.js aplicará.
  3. Es posible utilizar un enfoque mixto, combinando diferentes métodos de obtención de datos en una sola página.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda, no dudes en dejarme un comentario en la parte de abajo. Recuerda que si te gustó, también puedes compartir usando los links a las redes sociales en la parte de abajo. 📣🌟

Sebastian Gomez

Sebastian Gomez

Creador de contenido principalmente acerca de tecnología.

Leave a Reply

0 Comments

Related Posts

Categorias