Client-seitiges Rendering (CSR)

Beim Client-seitigen Rendering (CSR) mit React lädt der Browser eine minimale HTML-Seite und das für die Seite 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 feststellen, bevor die vollständige Seite angezeigt wird. 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 Seitenneuladen erforderlich ist.

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

1. Verwendung des useEffect()-Hooks von React 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 error! 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 wurden, wird die Komponente neu gerendert und die Daten werden angezeigt.

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 eine bessere Leistung, Caching, optimistische Updates und mehr. Hier ist ein minimales Beispiel 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 wurde, 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 Seitengenerierung und client-seitigem Rendering zu verwenden, abhängig von den Anforderungen jeder Seite in Ihrer Anwendung. Im App Router können Sie auch Loading UI mit Suspense verwenden, um einen Ladeindikator anzuzeigen, während die Seite gerendert wird.