Prerenderizado en Next.js
Dos formas de prerenderizado en Next.js
De forma predeterminada, Next.js renderiza previamente todas las páginas. Esto significa que Next.js genera HTML para cada página por adelantado, en lugar de que JavaScript, del lado del cliente, lo haga todo. La renderización previa puede resultar en un mejor rendimiento y SEO.
NextJS nos brinda dos formas de prerenderizado, que podemos usar para controlar cómo se deben representar las páginas. Tiene la forma denominada Static Generation, y tiene una alternativa, que se llama Server-side Rendering. Y las dos pueden parecer similares, pero se ejecutan, o el código se ejecuta, en diferentes momentos, como podras ver en el video de arriba.
Static Generation
Ese es el enfoque que normalmente debes utilizar en el prerenderizado en Next.js.
Cuando se usa Static Generation, un componente de página, se prerenderiza cuando realizas la construcción del proyecto NextJs (cuando lo construyes para desplegar en producción).
npm run build
Con Static Generation, de forma predeterminada, tu página no se prerenderiza sobre la marcha en el servidor cuando llega una petición (request) al mismo, sino que se prerenderiza cuando tu, como desarrollador, construyes la aplicación para producción. Y eso significa que después de que se desplegó en producción, esa página renderizada previamente no cambiará. Al menos no por defecto.
Si luego actualizas los datos y sabes que la página renderizada previamente debe cambiar, debes iniciar ese proceso de construcción y volver a desplegarla otra vez.
NextJS prepara tus páginas. Por defecto genera tus páginas, estáticamente, y lo hace por defecto durante el proceso de construcción. Pero si necesitas esperar por la obtención de los datos, si necesitas agregar la obtención de datos a un componente de la página, puede hacerlo exportando una función especial desde dentro del archivo del componente de página.
getStaticProps
export async function getStaticProps() {
// fetch data from an API
return {
props: { meetups:DUMMY_ITEMS },
};
}
Ahora, siempre podemos reconstruir nuestro sitio y volver a desplegarlo cuando cambien nuestros datos. Y para algunos sitios web, como los blogs personales, esta es una excelente alternativa porque sus datos no cambian con demasiada frecuencia, pero si los datos cambian con más frecuencia, hay una propiedad adicional (revalidate), que podemos agregar a este objeto devuelto.
revalidate
export async function getStaticProps() {
// fetch data form an API
return {
props: { items: DUMMY_ITEMS }, revalidate: 15
};
}
Cuando agregamos esta propiedad (revalidate) al objeto devuelto por getStaticProps, desbloqueamos una función llamada incremental Static Generation. La propiedad revalidate requiere un número, digamos 15, y este número es el número de segundos que NextJS esperará hasta que regenere esta página para una petición (request) entrante.
Esto significa que con la propiedad revalidate establecida con algúnb número, esta página no solo se generará durante el proceso de construcción. Se generará en ese proceso, pero no solo en ese punto, sino que también se generará cada 15 segundos en el servidor, al menos si hay solicitudes para esta página. Y luego estas páginas regeneradas reemplazaran las páginas pregeneradas más antiguas.
Y con esto, te asegurarás de que sus datos nunca tengan más de 15 segundos. Y, por lo tanto, la cantidad de segundos que desees usar aquí, depende de la frecuencia de actualización de sus datos. Si sus datos cambian una vez cada hora, entonces darle un valor de 3600 al número sería la mejr opción.
Pero independientemente del valor que le des al número, te asegurarás de que esta página se vuelva a generar ocasionalmente en el servidor después del despliegue, para que no tengas que volver a desplegar y reconstruir todo el tiempo solo porque cambiaron algunos datos.
Server-side Rendering
Por lo tanto, getStaticProps es una función muy útil que puedes exportar en los componentes de página para asegurarse de que tus páginas prerenderizadas contengan datos que quizás deba esperar. Ahora, con la propiedad revalidate, puedes asegurarse de que esta página también se actualice periódicamente después del despliegue. Pero a veces, incluso una actualización regular no es suficiente.
A veces querrás volver a generar esta página para cada petición (request) entrante. Por lo tanto, querrás regenerar la página dinámicamente, sobre la marcha, después del despliegue en el servidor. No durante el proceso de construcción, y no cada par de segundos, sino para cada petición. Y si ese es tu objetivo, existe una alternativa a getStaticProps.
Y esa es la función getServerSideProps. Al igual que getStaticProps, ese es un nombre reservado, que NextJS buscará. Y la diferencia con getStaticProps es que esta función ahora no se ejecutará durante el proceso de construcción, se ejecutará siempre en el servidor después del despliegue.
getServerSideProps
export async function getServerSideProps(context) {
const req = context.req;
const res = context.res;
// fetch data from an API
return {
props: { meetups:DUMMY_ITEMS }
};
}
Cualquier código que escribas en esta función siempre se ejecutará en el servidor, nunca en el cliente. Entonces puedes ejecutar el código del lado del servidor aquí, también puede realizar operaciones que usan credenciales (puedes obtenerlas del context.req) que no deben exponerse a tus usuarios porque este código solo se ejecuta en el servidor.
Existe otro método del que ya hemos hablado en otra publicación, getInitialProps. Este método se ejecutará en el servidor durante la carga de la página inicial y se ejecutará más tarde en el navegador si realiza la transición del lado del cliente a otras partes de la aplicación. En esta publicación que mencionamos, hablamos sobre una aplicación NextJS implementada en un entorno Kubernetes. Pero ese es otro tema.
Esta función, getServerSideProps, se ejecuta para cada petición entrante.
Podemos ver que en este método se pasa un parámetro. En este parámetro llamado context (en este caso, no lo usamos para nada, solo lo mostramos. Podríamos usarlo para la autenticación, por ejemplo), se obtiene acceso al objeto de la petición (request) , y el objeto de respuesta (response) a ser devuelto. Si has trabajado con NodeJS y Express antes, esto puede resultarle familiar. Con ellos, también obtiene objetos de petición y respuesta en su middleware para luego trabajar con ellos.
¿Qué forma de prerenderizado en Next.js es mejor?
¿Es mejor getServerSideProps o getStaticProps?
En el prerenderizado en Next.js, el método getServerSideProps puede sonar mejor porque se garantiza que se ejecutará para cada petición. Pero eso en realidad puede ser una desventaja, porque eso significa que debe esperar a que se genere tu página en cada petición entrante.
Ahora, si no tienes datos que cambien todo el tiempo, y con eso quiero decir que cambian varias veces cada segundo, y si no necesita acceder al objeto de petición (request), digamos para la autenticación, getStaticProps es mejor . Debido a que genera previamente un archivo HTML, ese archivo puede almacenarse y servirse mediante un CDN. Y eso simplemente es más rápido que regenerar y obtener esos datos para cada petición entrante. Por lo tanto, tu página será más rápida cuando trabaje con getStaticProps, porque luego se puede almacenar en caché y reutilizar, en lugar de regenerarse todo el tiempo.
Por lo tanto, solo debe usar getServerSideProps si necesita acceder a ese objeto de petición (req) porque no tienes acceso a la petición y respuesta en getStaticProps. O si tienes datos que cambian varias veces cada segundo, entonces incluso la propiedad Revalidate no te ayudará, entonces getServerSideProps es una excelente opción.
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!