Next.js - wstępne renderowanie

Wiemy, że w Next.js generuje HTML dla strony nazywanej renderowaniem wstępnym. Next.JS obsługuje dwa typy renderowania wstępnego.

Static Generation- Ta metoda generuje stronę HTML w czasie kompilacji. Ten wstępnie renderowany kod HTML jest wysyłany przy każdym żądaniu. Ta metoda jest przydatna w przypadku witryn marketingowych, blogów, produktów e-commerce z listą witryn, pomocy, witryn z dokumentacją.
Server Side Generation- Ta metoda generuje stronę HTML przy każdym żądaniu. Ta metoda jest odpowiednia, gdy zawartość strony HTML może się różnić w zależności od żądania.

Wstępne renderowanie na stronę

Next.JS pozwala ustawić metodę wstępnego renderowania dla każdej strony, na której większość stron jest generowana statycznie, a inne strony będą korzystać z renderowania po stronie serwera.

Generowanie statyczne bez danych

Generowanie statyczne można przeprowadzić bez danych. W takim przypadku strony HTML będą gotowe bez konieczności wstępnego pobierania danych i rozpoczynania renderowania. Dane można pobrać później lub na żądanie. Technika ta pomaga w wyświetlaniu użytkownikowi interfejsu użytkownika bez żadnych danych, na wypadek gdyby dane wymagały czasu.

Generowanie statyczne z danymi

Generowanie statyczne można przeprowadzić z danymi, w takim przypadku strony HTML nie będą gotowe do momentu pobrania danych, ponieważ HTML może być zależny od danych. Każdy składnik ma specjalną metodęgetStaticProps które mogą być używane do pobierania danych i przekazywania danych jako rekwizytów strony, aby strona mogła renderować zgodnie z przekazanymi właściwościami.

Funkcja getStaticProps () działa w czasie kompilacji w środowisku produkcyjnym i dla każdego żądania w trybie deweloperskim.

Stwórzmy przykład, aby zademonstrować to samo.

W tym przykładzie utworzymy aktualizację strony index.js i first.js, aby serwer mógł pobierać dane.

Zaktualizujmy projekt nextjs używany w rozdziale Globalne wsparcie CSS .

Zaktualizuj plik index.js w katalogu pages, aby użyć metody getServerSideProps (). Ta metoda będzie wywoływana na żądanie.

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

Zaktualizuj plik first.js w katalogu pages, aby używał metody getStaticProps (). Ta metoda zostanie wywołana raz.

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

Uruchom serwer Next.js

Uruchom następujące polecenie, aby uruchomić serwer -.

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

Sprawdź wyjście

Otwórz localhost: 3000 w przeglądarce, a zobaczysz następujące dane wyjściowe.

Kliknij link First post.