Client-Side-Rendering (CSR)

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

Nachdem die Seite zum ersten Mal geladen wurde, ist die Navigation zu anderen Seiten auf derselben Website in der Regel schneller, da nur die erforderlichen Daten abgerufen werden müssen und JavaScript Teile der Seite neu rendern kann, ohne einen vollständigen Seitenneuladevorgang zu erfordern.

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

1. Verwendung des useEffect()-Hooks von React in Ihren Seiten anstelle der serverseitigen Rendering-Methoden (getStaticProps und getServerSideProps).
2. Verwendung einer Datenabfrage-Bibliothek wie SWR oder TanStack Query zum Abrufen von Daten auf der Client-Seite (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('Beim Abrufen der Daten ist ein Fehler aufgetreten: ', e)
    })
  }, [])
 
  return <p>{data ? `Ihre Daten: ${data}` : 'Wird geladen...'}</p>
}

In diesem Beispiel beginnt die Komponente mit dem Rendern von Wird geladen.... Sobald die Daten abgerufen wurden, rendert sie neu 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 Datenabfrage-Bibliothek für bessere Leistung, Zwischenspeicherung, optimistische Updates und mehr. Hier ist ein Minimalbeispiel mit SWR zum Abrufen von Daten auf der Client-Seite:

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>Wird geladen...</p>
 
  return <p>Ihre Daten: {data}</p>
}

Hinweis:

Beachten Sie, dass CSR die Suchmaschinenoptimierung (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 für Benutzer mit langsameren 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 Hybridansatz, der es Ihnen ermöglicht, eine Kombination aus serverseitigem Rendering, statischer Seitengenerierung und Client-Side Rendering zu verwenden, je nach Bedarf der einzelnen Seiten 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.