En este artículo, aprenderemos sobre la optimización estática automática en NextJS.
NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional. La optimización estática automática es una característica de NextJS con la ayuda de la cual podemos crear páginas híbridas que se pueden representar tanto en el lado del servidor como en el lado del cliente, según el contenido.
En NextJS, si la página no tiene requisitos de datos de bloqueo, nextjs procesará la página del lado del cliente y si la página contiene getServerSideProps o getInitialProps , la página se procesará del lado del servidor. Este método nos ayuda a crear aplicaciones híbridas en nextjs que contienen páginas renderizadas tanto del lado del servidor como del lado del cliente.
Crear aplicación NextJS: puede crear un nuevo proyecto NextJS usando el siguiente comando:
npx create-next-app gfg
Estructura del proyecto: Se verá así.
Creación de una página estáticamente optimizada: ahora vamos a crear un nuevo archivo javascript que no contendrá ningún getServerSideProps o getInitialProps. Next.js optimizará estáticamente esta página automáticamente preprocesando la página en HTML estático
Agregue el siguiente contenido en el archivo creado anteriormente.
static.js
import React from 'react'
export default function Static() {
return (
<div>
This file is statically generated
</div>
)
}
Ahora, si ejecuta el siguiente código en la terminal, nextjs creará una compilación de producción optimizada para su aplicación en la que puede ver que el archivo static.js se convierte en static.html y este archivo se genera estáticamente y se representará en el lado del cliente. .
npm run build
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA