Next.js - Pre-rendering

In Next.js, sappiamo che genera HTML per una pagina chiamata pre-rendering. Next.JS supporta due tipi di pre-rendering.

Static Generation- Questo metodo genera la pagina HTML in fase di compilazione. Questo HTML pre-renderizzato viene inviato a ogni richiesta. Questo metodo è utile per siti Web di marketing, blog, prodotti di e-commerce che elencano siti Web, guide, siti Web di documentazione.
Server Side Generation- Questo metodo genera la pagina HTML su ogni richiesta. Questo metodo è adatto quando il contenuto di una pagina html può variare a ogni richiesta.

Pre-rendering per pagina

Next.JS consente di impostare il metodo di pre-rendering per ogni pagina in cui la maggior parte delle pagine segue la generazione statica e altre pagine utilizzeranno il rendering lato server.

Generazione statica senza dati

La generazione statica può essere eseguita senza dati, nel qual caso le pagine HTML saranno pronte senza bisogno di precaricare i dati e quindi avviare il rendering. I dati possono essere recuperati in seguito o su richiesta. Questa tecnica aiuta a mostrare all'utente un'interfaccia utente senza dati nel caso in cui i dati richiedano tempo.

Generazione statica con dati

La generazione statica può essere eseguita con i dati, nel qual caso le pagine HTML non saranno pronte fino a quando i dati non saranno recuperati, poiché l'HTML potrebbe dipendere dai dati. Ogni componente ha un metodo specialegetStaticProps che può essere utilizzato per recuperare i dati e passare i dati come oggetti di scena della pagina in modo che la pagina possa eseguire il rendering degli accordi con gli oggetti di scena passati.

La funzione getStaticProps () viene eseguita in fase di compilazione in produzione e per ogni richiesta in modalità sviluppatore.

Creiamo un esempio per dimostrare lo stesso.

In questo esempio, creeremo una pagina di aggiornamento index.js e first.js per fare un accesso al server per ottenere dati.

Aggiorniamo il progetto nextjs utilizzato nel capitolo Global CSS Support .

Aggiorna il file index.js nella directory delle pagine per utilizzare il metodo getServerSideProps (). Questo metodo verrà chiamato per richiesta.

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

Aggiorna il file first.js nella directory pages per utilizzare il metodo getStaticProps (). Questo metodo verrà chiamato una volta.

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 }
   }
}

Avvia Next.js Server

Eseguire il comando seguente per avviare il server -.

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

Verifica output

Apri localhost: 3000 in un browser e vedrai il seguente output.

Fare clic sul collegamento Primo post.