Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
La renderización es el proceso de convertir el código React en HTML. El método de representación que elija depende de los datos con los que esté trabajando y de cuánto le importe el rendimiento.
En Next.js, el renderizado es muy versátil. Puede representar páginas del lado del cliente o del servidor, de forma estática o incremental.
Eche un vistazo a cómo funcionan estos métodos y cómo funciona cada uno.
Representación del lado del servidor
Con la representación del lado del servidor (SSR), cuando un usuario visita una página web, el navegador envía una solicitud al servidor para esa página. El servidor obtiene los datos necesarios de la base de datos, si es necesario, y los envía junto con el contenido de la página al navegador. A continuación, el navegador se lo muestra al usuario.
El navegador realiza esta solicitud para cada enlace en el que el usuario hace clic, lo que significa que el servidor procesa la solicitud cada vez.
Esto puede reducir el rendimiento del sitio web. Sin embargo, la representación del lado del servidor es perfecta para páginas que consumen datos dinámicos.
Use getServerSideProps para reconstruir la página cada vez que un usuario la solicite.
exportarpor defectofunciónHogar({ datos }) {
devolver (
<principal>
// Usardatos
</main>
);
}exportarasíncronofuncióngetServerSideProps() {
// Obtener datos de una API externa
constante resolución = esperar buscar ('https://.../data')
constante datos = esperar res.json()
// Se pasará al componente de la página como accesorios
devolver { accesorios: { datos } }
}
getServerSideProps solo se ejecuta en el servidor y así es como se ejecuta:
- Cuando un usuario accede a la página directamente, se ejecuta en el momento de la solicitud y la página se procesa previamente con los accesorios que devuelve.
- Cuando un usuario accede a la página a través de un enlace Siguiente, el navegador envía una solicitud al servidor que lo ejecuta.
En la nueva versión, puede optar por la representación del lado del servidor mediante la obtención dinámica de datos en una página o un diseño.
Las recuperaciones de datos dinámicas son solicitudes de búsqueda () que optan específicamente por no almacenar en caché configurando la opción de caché en "no almacenar".
buscar('https://...', { caché: 'sin tienda' });
Alternativamente, establezca revalidar en 0:
buscar('https://...', { siguiente: { revalidar: 0 } });
Esta función se encuentra actualmente en versión beta, así que tenlo en cuenta. Puede leer más sobre las recuperaciones de datos dinámicos en el Documentos beta de Next.js 13.
Representación del lado del cliente
Debe usar la representación del lado del cliente (CSR) cuando necesite actualizar los datos con frecuencia o cuando no desee renderizar previamente su página. Puede implementar CSR a nivel de página o de componente. A nivel de página, Next.js obtiene datos en tiempo de ejecución y, cuando se realiza a nivel de componente, obtiene datos en el montaje. Debido a esto, la RSE puede contribuir a un desempeño lento.
Utilizar el gancho useEffect() para representar páginas en el cliente de esta manera:
importar { estado de uso, efecto de uso } de 'reaccionar'
funciónHogar() {
constante [datos, establecerDatos] = usarEstado(nulo)
constante [isLoading, setLoading] = useState(FALSO)usarEfecto(() => {
setCargando(verdadero)buscar('/api/get-data')
.entonces((res) => res.json())
.entonces((datos) => {
setData (datos)
setCargando(FALSO)
})
}, [])si (isLoading) regresa <pag>Cargando...</pag>
si (!datos) regresa <pag>Sin datos</pag>
devolver (
<división>
// Usardatos
</div>
)
}
También puede utilizar el gancho SWR. Almacena en caché los datos y los revalida en caso de que se vuelvan obsoletos.
importar usar ROE de 'swr'
captador constante = (... argumentos) => buscar(...argumentos).entonces((res) => res.json())
funciónHogar() {
constante {datos, error} = useSWR('/api/datos', buscador)
si (error) regresa <división>Falló al cargar</div>
si (!datos) regresa <división>Cargando...</div>
devolver (
<división>
// Usardatos
</div>
)
}
En Next.js 13, debe usar un componente de cliente agregando la directiva "usar cliente" en la parte superior del archivo.
"usarcliente";
exportarpor defecto () => {
devolver (
<división>
// componente del cliente
</div>
);
};
La diferencia entre SSR y CSR es que los datos se obtienen en cada solicitud de página en el servidor en SSR, mientras que los datos se obtienen en el lado del cliente en CSR.
Generación de sitios estáticos
Con generación de sitio estático (SSG), la página obtiene datos una vez durante el tiempo de compilación. Las páginas generadas estáticamente son muy rápidas y funcionan bien porque todas las páginas se construyen de antemano. Por lo tanto, SSG es perfecto para páginas que usan contenido estático como páginas de ventas o blogs.
En Next.js, debe exportar la función getStaticProps en la página que desea representar estáticamente.
exportarpor defectofunciónHogar({ datos }) {
devolver (
<principal>
// Usardatos
</main>
);
}exportarasíncronofuncióngetStaticProps() {
// Obtener datos de una API externa en el momento de la compilación
constante resolución = esperar buscar ('https://.../data')
constante datos = esperar res.json()
// Se pasará al componente de la página como accesorios
devolver { accesorios: { datos } }
}
También puede consultar la base de datos dentro de getStaticProps.
exportarasíncronofuncióngetStaticProps() {
// Llamarfunciónabuscardatosdebase de datos
constante datos = esperar getDataFromDB()
devolver { accesorios: { datos } }
}
En Next.js 13, la representación estática es la predeterminada y el contenido se recupera y se almacena en caché a menos que desactive la opción de almacenamiento en caché.
asíncronofunciónobtener datos() {
constante resolución = esperar buscar ('https://.../data');
devolver res.json();
}
exportarpor defectoasíncronofunciónHogar() {
constante datos = esperar obtener datos();
devolver (
<principal>
// Usardatos
</main>
);
}
Aprender más acerca de representación estática en Next.js 13 de los documentos.
Generación estática incremental
Hay momentos en los que desea usar SSG pero también desea actualizar el contenido con regularidad. Aquí es donde ayuda la generación estática incremental (ISG).
ISG le permite crear o actualizar páginas estáticas después de haberlas creado después del intervalo de tiempo que especifique. De esta manera, no necesita reconstruir todo el sitio, solo las páginas que lo necesitan.
ISG conserva los beneficios de SSG con el beneficio adicional de ofrecer contenido actualizado a los usuarios. ISG es perfecto para aquellas páginas de su sitio que consumen datos cambiantes. Por ejemplo, puedes use ISR para representar publicaciones de blog de modo que el blog se mantenga actualizado cuando edites publicaciones o agregues nuevas.
Para usar ISR, agregue la propiedad de revalidación a la función getStaticProps en una página.
exportarasíncronofuncióngetStaticProps() {
constante resolución = esperar buscar ('https://.../data')
constante datos = esperar res.json()
devolver {
accesorios: {
datos,
},
revalidar: 60
}
}
Aquí, Next.js intentará reconstruir la página cuando llegue una solicitud después de 60 segundos. La siguiente solicitud dará como resultado una respuesta con la página actualizada.
En Next.js 13, use revalidate en fetch de esta manera:
buscar('https://.../data', { siguiente: { revalidar: 60 } });
Puede establecer el intervalo de tiempo en lo que mejor funcione con sus datos.
Cómo elegir un método de renderizado
Hasta ahora, ha aprendido acerca de los cuatro métodos de representación en Next.js: CSR, SSR, SSG e ISG. Cada uno de estos métodos es apropiado para diferentes situaciones. La CSR es útil para las páginas que necesitan datos actualizados, donde un buen SEO no es una preocupación. SSR también es ideal para páginas que consumen datos dinámicos, pero es más compatible con SEO.
SSG es adecuado para páginas cuyos datos son en su mayoría estáticos, mientras que ISG es mejor para páginas que contienen datos que desea actualizar en intervalos. SSG e ISG son excelentes en términos de rendimiento y SEO, ya que los datos se obtienen previamente y se pueden almacenar en caché.