Pre-renderizado
Antes de hablar sobre obtención de datos, hablemos de uno de los conceptos más importantes en Next.js: Pre-renderizado.
Por defecto, Next.js pre-renderiza cada página. Esto significa que Next.js genera HTML para cada página por adelantado, en lugar de hacerlo todo mediante JavaScript del lado del cliente. El pre-renderizado puede resultar en mejor rendimiento y SEO.
Cada HTML generado está asociado con el código JavaScript mínimo necesario para esa página. Cuando un navegador carga la página, su código JavaScript se ejecuta y hace que la página sea completamente interactiva. (Este proceso se llama hidratación).
Verificar que el Pre-renderizado está Ocurriendo
Puedes verificar que el pre-renderizado está ocurriendo siguiendo estos pasos:
- Desactiva JavaScript en tu navegador. (Aquí cómo hacerlo en Chrome).
- Intenta acceder a esta página (el resultado final de este tutorial).
Deberías ver que tu aplicación se renderiza sin JavaScript. Esto se debe a que Next.js ha pre-renderizado la aplicación en HTML estático, permitiéndote ver la interfaz de usuario sin ejecutar JavaScript.
Nota: También puedes probar los pasos anteriores en
localhost, pero el CSS no se cargará si desactivas JavaScript.
Si tu aplicación es una aplicación React.js normal (sin Next.js), no hay pre-renderizado, por lo que no podrás ver la aplicación si desactivas JavaScript. Por ejemplo:
- Activa JavaScript en tu navegador y visita esta página. Esta es una aplicación React.js normal construida con Create React App.
- Ahora, desactiva JavaScript y accede a la misma página nuevamente.
- No verás la aplicación, en su lugar dirá "Necesitas activar JavaScript para ejecutar esta aplicación". Esto ocurre porque la aplicación no está pre-renderizada en HTML estático.
Resumen: Pre-renderizado vs. Sin Pre-renderizado
Aquí tienes un resumen gráfico rápido:
A continuación, hablemos sobre dos formas de pre-renderizado en Next.js.