Optimización Estática Automática

Next.js determina automáticamente que una página es estática (puede ser prerenderizada) si no tiene requisitos de datos bloqueantes. Esta determinación se hace por la ausencia de getServerSideProps y getInitialProps en la página.

Esta característica permite a Next.js emitir aplicaciones híbridas que contienen páginas tanto renderizadas en el servidor como generadas estáticamente.

Las páginas generadas estáticamente siguen siendo reactivas: Next.js hidratará tu aplicación en el lado del cliente para darle interactividad completa.

Uno de los principales beneficios de esta característica es que las páginas optimizadas no requieren cálculo del lado del servidor y pueden ser transmitidas instantáneamente al usuario final desde múltiples ubicaciones de CDN. El resultado es una experiencia de carga ultra rápida para tus usuarios.

Cómo funciona

Si getServerSideProps o getInitialProps está presente en una página, Next.js cambiará a renderizar la página bajo demanda, por solicitud (lo que significa Renderizado del lado del servidor (Server-Side Rendering)).

Si no es el caso anterior, Next.js optimizará estáticamente tu página automáticamente al prerenderizarla a HTML estático.

Durante el prerenderizado, el objeto query del enrutador estará vacío ya que no tenemos información de query para proporcionar durante esta fase. Después de la hidratación, Next.js activará una actualización de tu aplicación para proporcionar los parámetros de ruta en el objeto query.

Los casos en los que la query se actualizará después de la hidratación, activando otro renderizado, son:

• La página es una ruta dinámica.
• La página tiene valores de query en la URL.
• Hay rewrites configurados en tu next.config.js, ya que estos pueden tener parámetros que pueden necesitar ser analizados y proporcionados en la query.

Para poder distinguir si la query está completamente actualizada y lista para usar, puedes aprovechar el campo isReady en next/router.

Es bueno saber: Los parámetros añadidos con rutas dinámicas a una página que usa getStaticProps siempre estarán disponibles dentro del objeto query.

next build emitirá archivos .html para páginas optimizadas estáticamente. Por ejemplo, el resultado para la página pages/about.js sería:

.next/server/pages/about.html

Y si añades getServerSideProps a la página, entonces será JavaScript, así:

.next/server/pages/about.js

Consideraciones

• Si tienes una App personalizada (App) con getInitialProps, entonces esta optimización se desactivará en páginas sin Generación Estática.
• Si tienes un Documento personalizado (Document) con getInitialProps, asegúrate de verificar si ctx.req está definido antes de asumir que la página se renderiza en el servidor. ctx.req será undefined para páginas que están prerenderizadas.
• Evita usar el valor asPath en next/router en el árbol de renderizado hasta que el campo isReady del enrutador sea true. Las páginas optimizadas estáticamente solo conocen asPath en el cliente y no en el servidor, por lo que usarlo como prop puede llevar a errores de discrepancia. El ejemplo active-class-name demuestra una forma de usar asPath como prop.