Sebastian Gomez
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:
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.
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.
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. 📣🌟
Creador de contenido principalmente acerca de tecnología.