Next.js - Pre-Rendering

In Next.js wird HTML für eine Seite generiert, die als Pre-Rendering bezeichnet wird. Next.JS unterstützt zwei Arten des Pre-Renderings.

Static Generation- Diese Methode generiert die HTML-Seite beim Erstellen. Dieser vorgerenderte HTML-Code wird bei jeder Anforderung gesendet. Diese Methode ist nützlich für das Marketing von Websites, Blogs, E-Commerce-Produkten, die Wesites, Hilfen und Dokumentationswebsites auflisten.
Server Side Generation- Diese Methode generiert die HTML-Seite bei jeder Anforderung. Diese Methode eignet sich, wenn der Inhalt einer HTML-Seite bei jeder Anforderung variieren kann.

Pro Seite Pre-Rendering

Mit Next.JS können Sie die Vor-Rendering-Methode für jede Seite festlegen, bei der die meisten Seiten der statischen Generierung folgen und andere Seiten serverseitiges Rendering verwenden.

Statische Erzeugung ohne Daten

Die statische Generierung kann ohne Daten erfolgen. In diesem Fall sind HTML-Seiten bereit, ohne dass die Daten vorab abgerufen und anschließend gerendert werden müssen. Daten können später oder auf Anfrage abgerufen werden. Diese Technik hilft dabei, dem Benutzer eine Benutzeroberfläche ohne Daten anzuzeigen, falls die Daten einige Zeit in Anspruch nehmen.

Statische Erzeugung mit Daten

Die statische Generierung kann mit Daten erfolgen. In diesem Fall sind HTML-Seiten erst bereit, wenn Daten abgerufen wurden, da HTML möglicherweise von Daten abhängig ist. Jede Komponente hat eine spezielle MethodegetStaticProps Dies kann verwendet werden, um Daten abzurufen und Daten als Requisiten der Seite zu übergeben, so dass die Seite Übereinstimmungen mit übergebenen Requisiten rendern kann.

Die Funktion getStaticProps () wird zur Erstellungszeit in der Produktion ausgeführt und für jede Anforderung im Entwicklungsmodus ausgeführt.

Lassen Sie uns ein Beispiel erstellen, um dasselbe zu demonstrieren.

In diesem Beispiel erstellen wir eine Aktualisierungsseite für index.js und first.js, damit ein Server den Datenabruf abruft.

Lassen Sie uns das nextjs-Projekt aktualisieren, das im Kapitel Global CSS Support verwendet wird .

Aktualisieren Sie die Datei index.js im Seitenverzeichnis, um die Methode getServerSideProps () zu verwenden. Diese Methode wird pro Anfrage aufgerufen.

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

Aktualisieren Sie die Datei first.js im Seitenverzeichnis, um die Methode getStaticProps () zu verwenden. Diese Methode wird einmal aufgerufen.

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

Starten Sie Next.js Server

Führen Sie den folgenden Befehl aus, um den Server zu starten.

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

Überprüfen Sie die Ausgabe

Öffnen Sie localhost: 3000 in einem Browser und Sie sehen die folgende Ausgabe.

Klicken Sie auf den Link Erster Beitrag.