Ver fuente para confirmar que SSR está funcionando en Next.js

Cómo verificar si SSR está funcionando en su aplicación Next.js

¿Ha configurado su nueva aplicación Next.js? ¡Genial!

Ahora verifiquemos que la aplicación esté funcionando como esperamos que funcione. Es una aplicación Next.js, por lo que debería serlado del servidor renderizado.

Es uno de los principales puntos de venta de Next.js: si creamos un sitio usando Next.js, las páginas del sitio se procesan en el servidor, que entrega HTML al navegador.

Esto tiene 3 beneficios principales:

  • El cliente no necesita crear una instancia de React para renderizar, lo que hace que el sitio sea más rápido para sus usuarios.
  • Los motores de búsqueda indexarán las páginas sin necesidad de ejecutar el JavaScript del lado del cliente. Algo que Google comenzó a hacer, pero admitió abiertamente que es un proceso más lento (y debe ayudar a Google tanto como sea posible, si desea obtener una buena clasificación.
  • Puede tener metaetiquetas de redes sociales, útiles para agregar imágenes de vista previa, personalizar el título y la descripción de cualquiera de sus páginas compartidas en Facebook, Twitter, etc.

Veamos la fuente de la aplicación. Con Chrome, puede hacer clic con el botón derecho en cualquier lugar de la página y presionarVer código fuente.

Si ve la fuente de la página, verá el<div><h1>Airbnb clone</h1></div>fragmento en el HTMLbody, junto con un montón de archivos JavaScript: los paquetes de aplicaciones.

No necesitamos configurar nada, SSR (renderización del lado del servidor) ya está funcionando para nosotros.

La aplicación React se iniciará en el cliente y será la que impulsará interacciones como hacer clic en un enlace, utilizando la representación del lado del cliente. Pero al volver a cargar una página, se volverá a cargar desde el servidor. Y al usar Next.js, no debería haber diferencia en el resultado dentro del navegador: una página renderizada por el servidor debería verse exactamente como una página renderizada por el cliente.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: