Next.js: procesamiento previo

En Next.js, sabemos que genera HTML para una página denominada renderización previa. Next.JS admite dos tipos de renderizado previo.

Static Generation- Este método genera la página HTML en el momento de la compilación. Este HTML pre-renderizado se envía en cada solicitud. Este método es útil para sitios web de marketing, blogs, productos de comercio electrónico que enumeran sitios web, ayudas y sitios web de documentación.
Server Side Generation- Este método genera la página HTML en cada solicitud. Este método es adecuado cuando el contenido de una página html puede variar con cada solicitud.

Procesamiento previo por página

Next.JS permite establecer un método de representación previa para cada página donde la mayoría de las páginas siguen la generación estática y otras páginas utilizarán la representación del lado del servidor.

Generación estática sin datos

La generación estática se puede realizar sin datos, en cuyo caso, las páginas HTML estarán listas sin necesidad de obtener previamente los datos y luego comenzar a renderizar. Los datos se pueden recuperar más tarde o bajo pedido. Esta técnica ayuda a mostrar al usuario una interfaz de usuario sin ningún dato en caso de que los datos tarden en llegar.

Generación estática con datos

La generación estática se puede realizar con datos, en cuyo caso, las páginas HTML no estarán listas hasta que se obtengan los datos, ya que HTML puede depender de los datos. Cada componente tiene un método especialgetStaticProps que se puede usar para obtener datos y pasar datos como accesorios de la página para que la página pueda representar acordes a los accesorios pasados.

La función getStaticProps () se ejecuta en el momento de la compilación en producción y se ejecuta para cada solicitud en el modo de desarrollo.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, crearemos una página de actualización index.js y first.js para que un servidor acceda a obtener datos.

Actualicemos el proyecto nextjs utilizado en el capítulo Soporte global de CSS .

Actualice el archivo index.js en el directorio de páginas para usar el método getServerSideProps (). Este método se llamará por solicitud.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

Actualice el archivo first.js en el directorio de páginas para usar el método getStaticProps (). Este método se llamará una vez.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en el enlace Primera publicación.

↰ Previous page Next page ↱