Wann SSR und SSG in Next.js verwendet werden sollten

SSR (Serverseitiges Rendering):

Wird bei jeder Anfrage an den Server ausgeführt.
Jedes Mal, wenn ein Benutzer die Seite besucht, ruft der Server die Daten ab, rendert den HTML-Code und sendet ihn an den Client.
Dadurch wird sichergestellt, dass der Inhalt immer aktuell ist, er kann jedoch aufgrund des Overheads der serverseitigen Verarbeitung langsamer sein.

Beispielzeitleiste für SSR:

Anfrage 1: Benutzer A besucht → Server ruft Daten ab, generiert dynamisch eine Seite und antwortet.

Anfrage 2: Benutzer B besucht → Server ruft erneut Daten ab, generiert die Seite dynamisch und antwortet.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG (Static Site Generation):

Wird zur Build-Zeit ausgeführt (wenn Sie den nächsten Build ausführen).
Der HTML-Code und die Daten werden vorgerendert und als statische Dateien gespeichert. Diese Dateien werden den Benutzern direkt bereitgestellt, was eine superschnelle Abwicklung ermöglicht.

Optional: Wenn Sie revalidate verwenden, erstellt Next.js die Seite nach dem angegebenen Zeitintervall im Hintergrund neu und stellt so sicher, dass aktualisierte Inhalte verfügbar sind.
Beispielzeitleiste für SSG mit Revalidierung: 60:

Erstellungszeit: Die Seite wird mit den zur Erstellungszeit verfügbaren Daten vorgerendert.

Anfrage 1: (nach dem Build): Benutzer A besucht → Statisches HTML wird bereitgestellt.

Hintergrundregeneration (nach 60 Sekunden): Next.js ruft neue Daten ab und generiert die Seite neu.

Anfrage 2: (nach der Neugenerierung): Benutzer B besucht → Der aktualisierte statische HTML-Code wird bereitgestellt.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR: Ruft neue Daten ab und generiert die Seite bei jeder Anfrage.

SSG: Rendert die Seite einmal zur Erstellungszeit (oder während geplanter Neuvalidierungsintervalle) vorab und stellt allen Benutzern dieselbe vorgefertigte Seite bereit, bis sie neu generiert wird.

Verwenden Sie SSR, wenn:

Sie benötigen aktuelle Inhalte in Echtzeit (z. B. Dashboards, benutzerspezifische Daten).
Der Inhalt ändert sich häufig und kann nicht effektiv zwischengespeichert werden.

Verwenden Sie SSG, wenn:

Der Inhalt ändert sich nicht oft (z. B. Blogbeiträge, Marketingseiten).
Geschwindigkeit und Leistung sind entscheidend.

Das obige ist der detaillierte Inhalt vonWann SSR und SSG in Next.js verwendet werden sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!