Serverseitiges Rendering (SSR) mit Next.js und JavaScript

In der Welt der Webentwicklung ist die Bereitstellung einer schnellen und nahtlosen Benutzererfahrung von entscheidender Bedeutung. Eine Möglichkeit, dies zu erreichen, ist das Server-Side-Rendering (SSR), eine Technologie, die es ermöglicht, Webseiten auf dem Server zu rendern, bevor sie an den Client gesendet werden. SSR bietet viele Vorteile, darunter verbesserte Leistung, SEO-Optimierung und bessere Benutzerinteraktion. In diesem Artikel erkunden wir die Grundlagen von SSR mithilfe von Next.js, einem beliebten JavaScript-Framework zum Erstellen servergerenderter React-Anwendungen.

Was ist Server Side Rendering (SSR)?

Traditionell basieren Webanwendungen auf clientseitigem Rendering, wobei der gesamte Rendering-Prozess mithilfe von JavaScript im Browser erfolgt. Dieser Ansatz eignet sich gut für kleine Anwendungen, kann jedoch zu langsameren Seitenladevorgängen, schlechter SEO-Leistung und eingeschränkter Zugänglichkeit führen.

Beim serverseitigen Rendering hingegen wird der komplette HTML-Inhalt auf dem Server generiert und an den Client gesendet. Der Client erhält dann eine vollständig gerenderte Seite, die dem Benutzer angezeigt werden kann. Dieser Ansatz ermöglicht es Suchmaschinen, die Seite effizienter zu crawlen und verbessert die vom Benutzer wahrgenommene Leistung.

Wir stellen vor: Next.js

Next.js ist ein React-Framework, das integrierte serverseitige Rendering-Funktionen bietet. Es vereinfacht den Prozess der Erstellung von SSR-Anwendungen, indem es die Komplexität der serverseitigen Einrichtung und Konfiguration abstrahiert. Next.js bietet außerdem Funktionen wie automatische Codeaufteilung, clientseitiges Rendering und statische Site-Generierung, was es zu einer vielseitigen Wahl für die moderne Webentwicklung macht.

Richten Sie das Next.js-Projekt ein

Um Next.js zu verwenden, stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist. Erstellen Sie ein neues Verzeichnis für Ihr Projekt und initialisieren Sie es mit dem folgenden Befehl -

npx create-next-app my-next-app

Dieser Befehl richtet ein neues Next.js-Projekt mit den erforderlichen Dateien und Abhängigkeiten ein. Navigieren Sie zum Projektverzeichnis, indem Sie -

ausführen

cd my-next-app

Nachdem Sie das Projektverzeichnis eingegeben haben, verwenden Sie den folgenden Befehl, um den Entwicklungsserver zu starten -

npm run dev

Next.js startet den lokalen Entwicklungsserver unter http://localhost:3000 und Sie können sehen, wie Ihre Anwendung in Ihrem Browser ausgeführt wird.

Erstellen Sie serverseitig gerenderte Seiten

Next.js macht das Erstellen serverseitig gerenderter Seiten unglaublich einfach. Navigieren Sie in der Projektstruktur zum Verzeichnis Pages und erstellen Sie eine neue Datei mit dem Namen about.js. Diese Datei stellt die /about-Route in unserer Anwendung dar.

Fügen Sie in about.js den folgenden Code hinzu -

function About() {
   return (
      <div>
         <h1>About Page</h1>
         <p>This is the server-side rendered About page.</p>
      </div>
   );
}

export default About;

Speichern Sie die Datei. Wenn der Next.js-Entwicklungsserver ausgeführt wird, können Sie zu http://localhost:3000/about navigieren, um die gerenderte Seite anzuzeigen.

Schauen wir uns den Code genauer an. Die About-Komponente ist eine React-Funktionskomponente, die JSX zurückgibt, das den Inhalt der About-Seite darstellt. In diesem Fall wird ein Element gerendert, das eine

-Überschrift und einen

-Absatz enthält.

Die Export-Standard-About-Anweisung am Ende exportiert die About-Komponente als Standardexport, wodurch Next.js sie als serverseitig gerenderte Seite erkennen kann.

Nach dem Zugriff auf die /about-Route rendert der Server die About-Komponente und der Client erhält die vollständige HTML-Darstellung der Seite. Dieser Ansatz stellt sicher, dass die Seite vollständig gerendert wird, bevor sie an den Benutzer gesendet wird, wodurch Leistung und SEO verbessert werden.

Dynamisches serverseitiges Rendering

Next.js unterstützt auch dynamisches serverseitiges Rendering, sodass wir vor dem Rendern der Seite Daten von externen APIs abrufen oder serverseitige Berechnungen durchführen können. Dadurch können wir Benutzern dynamische Inhalte bereitstellen, ohne auf clientseitiges JavaScript angewiesen zu sein.

Um dynamisches serverseitiges Rendering zu demonstrieren, erstellen wir eine Seite, die Daten von einer Schein-API erhält. Erstellen Sie im Seitenverzeichnis eine neue Datei mit dem Namen „users.js -

“.

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

Anleitung

Im obigen Code definieren wir eine Funktionskomponente „Benutzer“, die Benutzerdaten als Requisite empfängt. Es verwendet die empfangenen Daten, um eine Liste von Benutzern zu erstellen. Die getServerSideProps-Funktion ist eine asynchrone Funktion, die Daten von einer externen API (in diesem Fall https://api.example.com/users) abruft.

In getServerSideProps verwenden wir die Fetch-Funktion, um eine HTTP-Anfrage an die API zu stellen und Benutzerdaten abzurufen. Anschließend analysieren wir die Antwort in JSON und weisen sie der Variablen des Benutzers zu. Schließlich geben wir ein Objekt mit Requisiten zurück, das die abgerufenen Benutzerdaten enthält.

Wenn ein Benutzer auf die Route /users zugreift, ruft Next.js die Funktion getServerSideProps auf dem Server auf, um die Daten abzurufen. Die erhaltenen Benutzerdaten werden als Requisiten zum Rendern an die Benutzerkomponente übergeben. Dadurch wird sichergestellt, dass die Seite bei jeder Anfrage immer mit den neuesten Daten gerendert wird.

Dynamisches serverseitiges Rendering ist eine leistungsstarke Funktion, die es uns ermöglicht, datengesteuerte Seiten zu erstellen und Benutzern personalisierte Inhalte bereitzustellen. Indem wir die Daten auf dem Server abrufen, können wir die Leistung optimieren und ein konsistentes Benutzererlebnis über verschiedene Geräte und Netzwerkbedingungen hinweg sicherstellen.

Fazit

Serverseitiges Rendering (SSR) mit Next.js und JavaScript bietet eine effiziente Möglichkeit, leistungsstarke Webanwendungen zu erstellen. Durch die Nutzung der serverseitigen Rendering-Funktionen von Next.js können wir unseren Benutzern vollständig gerenderte Seiten bereitstellen und so die Leistung, die Sichtbarkeit in Suchmaschinen und das allgemeine Benutzererlebnis verbessern.

Dieser Artikel stellt SSR vor, führt Sie durch die Einrichtung eines Next.js-Projekts und zeigt, wie Sie eine serverseitig gerenderte Seite erstellen. Wir haben die Vorteile des serverseitigen Renderings untersucht und wie Next.js den Prozess der Implementierung von SSR in React-Anwendungen vereinfacht.

Das obige ist der detaillierte Inhalt vonServerseitiges Rendering (SSR) mit Next.js und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!