Client-seitiges Rendering (CSR)

Beim Client-seitigen Rendering (CSR) mit React lädt der Browser eine minimale HTML-Seite und das benötigte JavaScript herunter. Das JavaScript wird dann verwendet, um das DOM zu aktualisieren und die Seite zu rendern. Wenn die Anwendung zum ersten Mal geladen wird, kann der Benutzer eine leichte Verzögerung bemerken, bevor die vollständige Seite sichtbar ist. Dies liegt daran, dass die Seite erst vollständig gerendert wird, nachdem das gesamte JavaScript heruntergeladen, geparst und ausgeführt wurde.

Nachdem die Seite zum ersten Mal geladen wurde, ist die Navigation zu anderen Seiten derselben Website in der Regel schneller, da nur die notwendigen Daten abgerufen werden müssen und JavaScript Teile der Seite neu rendern kann, ohne dass ein vollständiger Seitenneuladung erforderlich ist.

In Next.js gibt es zwei Möglichkeiten, Client-seitiges Rendering zu implementieren:

1. Verwendung des React useEffect()-Hooks in Ihren Seiten anstelle der serverseitigen Rendering-Methoden (getStaticProps und getServerSideProps).
2. Verwendung einer Datenabruf-Bibliothek wie SWR oder TanStack Query zum Abrufen von Daten auf dem Client (empfohlen).

Hier ist ein Beispiel für die Verwendung von useEffect() in einer Next.js-Seite:

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP-Fehler! Status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }

    fetchData().catch((e) => {
      // Fehler nach Bedarf behandeln
      console.error('Ein Fehler ist beim Abrufen der Daten aufgetreten: ', e)
    })
  }, [])

  return <p>{data ? `Ihre Daten: ${data}` : 'Laden...'}</p>
}

Im obigen Beispiel rendert die Komponente zunächst Laden.... Sobald die Daten abgerufen sind, wird sie neu gerendert und zeigt die Daten an.

Obwohl das Abrufen von Daten in einem useEffect ein Muster ist, das Sie in älteren React-Anwendungen sehen können, empfehlen wir die Verwendung einer Datenabruf-Bibliothek für bessere Leistung, Caching, optimistische Updates und mehr. Hier ist ein Minimalbeispiel mit SWR zum Abrufen von Daten auf dem Client:

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR(
    'https://api.example.com/data',
    fetcher
  )

  if (error) return <p>Laden fehlgeschlagen.</p>
  if (isLoading) return <p>Laden...</p>

  return <p>Ihre Daten: {data}</p>
}

Gut zu wissen:

Beachten Sie, dass CSR die SEO beeinträchtigen kann. Einige Suchmaschinen-Crawler führen möglicherweise kein JavaScript aus und sehen daher nur den anfänglichen leeren oder Ladezustand Ihrer Anwendung. Es kann auch zu Leistungsproblemen bei Benutzern mit langsamen Internetverbindungen oder Geräten führen, da sie warten müssen, bis das gesamte JavaScript geladen und ausgeführt ist, bevor sie die vollständige Seite sehen können. Next.js fördert einen hybriden Ansatz, der es Ihnen ermöglicht, eine Kombination aus serverseitigem Rendering, statischer Seiten-Generierung und Client-seitigem Rendering zu verwenden, abhängig von den Anforderungen jeder Seite in Ihrer Anwendung. Im App Router können Sie auch Lade-UI mit Suspense verwenden, um einen Ladeindikator anzuzeigen, während die Seite gerendert wird.