SSR (Server-Side Rendering) ist eine weitere Methode zum Generieren von Seiten in Next.js. In diesem Artikel möchte ich erklären, was SSR ist, wie es funktioniert und wie man es sowohl im Page Router als auch im App Router eines Next.js-Projekts implementiert.

Was ist SSR?

SSR ist eine Methode zum Generieren einer statischen Seite (oder vorgerenderten Seite), nachdem ein Benutzer eine Anfrage gestellt hat. Das bedeutet, dass bei jeder Anfrage eine statische Seite generiert wird. Diese Methode ist nützlich für Seiten, die häufig aktualisiert werden müssen, da sie sicherstellt, dass die Daten immer aktuell sind

Wie funktioniert SSR?

Wenn Sie SSR in Next.js verwenden, wird die Seite jedes Mal, wenn ein Benutzer eine Seite anfordert, auf der SSR implementiert ist, nach der Anforderung generiert. Das bedeutet, dass der Benutzer warten muss, während Next.js für jede Anfrage den statischen Inhalt erneut generiert und bündelt. Sobald die statische Seite fertig ist, kann der Benutzer die angeforderte Seite sehen.

Es ist wichtig zu beachten, dass SSR nur auf dem Server ausgeführt wird und für jede Anfrage eine statische Seite generiert, sodass es nicht während des Erstellungsprozesses des Projekts ausgeführt wird.

So implementieren Sie SSR im App Router

Um SSR im App Router zu implementieren, müssen Sie keine spezielle Funktion schreiben oder eine bestimmte Konfiguration festlegen, da diese in Ihren Serverkomponenten standardmäßig aktiviert ist.

Wenn Sie beispielsweise eine statische Seite haben und Daten von einer API abrufen, verwendet diese Seite standardmäßig SSR. Es ist wichtig zu beachten, dass bei Verwendung von SSR die Seite zum Zeitpunkt der Erstellung nicht gebündelt oder vorgerendert wird. Wenn Sie in Ihrem Projekt eine dynamische Seite verwenden, wird standardmäßig SSG verwendet, wenn Sie keine Daten abrufen. Wenn Sie jedoch von einer API abrufen, wird auf SSR umgestellt, und auch hier werden während der Erstellungszeit keine statischen Seiten gebündelt.

Dies ist ein Beispiel für die Implementierung von SSR in einer statischen Route:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

So implementieren Sie SSR im Page Router

Um SSR im Seitenrouter zu implementieren, müssen Sie eine getServerSideProps-Funktion in Ihrer Datei erstellen. Diese Funktion wird nach jeder Benutzeranfrage aufgerufen. Wenn Sie eine dynamische Route verwenden, beispielsweise eine [id]-Datei, müssen Sie in Ihrer Datei auch getServerSideProps verwenden. Diese Funktion benötigt ein Argument, oft als Kontext bezeichnet, aus dem Sie die ID, den Wert der dynamischen Seite, abrufen können. Diese Funktion wird vom Server bei jeder Benutzeranfrage aufgerufen.

Dies ist ein Beispiel für die Implementierung in einer TSX-Datei:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

Dies ist ein Beispiel für die Implementierung in einer JSX-Datei:

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Abschluss

SSR ist eine nützliche Methode zum Bündeln oder Erstellen statischer Seiten, geschieht jedoch nicht während der Erstellungszeit. Wenn Sie möchten, dass Ihre Seite bei jeder Benutzeranfrage aktualisiert wird, damit Benutzer die neuesten Daten sehen können, können Sie SSR verwenden. Es ist jedoch wichtig zu beachten, dass es möglicherweise länger dauert und nicht so schnell ist wie andere Methoden wie SSG (Static Site Generation) oder ISR (Inkrementelle statische Regeneration), da für jede Benutzeranfrage eine statische Seite generiert wird.

Ich hoffe, Ihnen hat dieser Artikel gefallen! Wenn Sie Fragen haben, können Sie diese gerne an mich wenden. Wenn Sie mehr über ISR und SSG erfahren möchten, können Sie meine Artikel dazu hier für ISR und hier für SSG lesen. Wenn Sie mehr über alles erfahren möchten, können Sie meiner Website folgen.

Danke fürs Lesen! Bis bald!