Client-Side-Datenabruf

Client-Side-Datenabruf ist nützlich, wenn Ihre Seite keine SEO-Indizierung benötigt, wenn Sie Ihre Daten nicht vorher rendern müssen oder wenn der Inhalt Ihrer Seiten häufig aktualisiert werden muss. Im Gegensatz zu Server-Side-Rendering-APIs können Sie Client-Side-Datenabruf auf Komponentenebene verwenden.

Wenn dies auf Seitenebene geschieht, werden die Daten zur Laufzeit abgerufen und der Inhalt der Seite wird aktualisiert, wenn sich die Daten ändern. Bei Verwendung auf Komponentenebene werden die Daten zum Zeitpunkt des Komponentenmounts abgerufen und der Inhalt der Komponente wird aktualisiert, wenn sich die Daten ändern.

Es ist wichtig zu beachten, dass die Verwendung von Client-Side-Datenabruf die Leistung Ihrer Anwendung und die Ladegeschwindigkeit Ihrer Seiten beeinflussen kann. Dies liegt daran, dass der Datenabruf zum Zeitpunkt des Komponenten- oder Seitenmonts erfolgt und die Daten nicht zwischengespeichert werden.

Client-Side-Datenabruf mit useEffect

Das folgende Beispiel zeigt, wie Sie Daten auf Client-Seite mit dem useEffect-Hook abrufen können.

import { useState, useEffect } from 'react'
 
function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])
 
  if (isLoading) return <p>Laden...</p>
  if (!data) return <p>Keine Profildaten</p>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

Client-Side-Datenabruf mit SWR

Das Team hinter Next.js hat eine React-Hook-Bibliothek für Datenabruf namens SWR entwickelt. Sie wird dringend empfohlen, wenn Sie Daten auf Client-Seite abrufen. Sie behandelt Caching, Revalidierung, Fokus-Tracking, Intervall-Neuabruf und mehr.

Mit dem gleichen Beispiel wie oben können wir jetzt SWR verwenden, um die Profildaten abzurufen. SWR wird die Daten automatisch für uns zwischenspeichern und die Daten revalidieren, wenn sie veraltet sind.

Weitere Informationen zur Verwendung von SWR finden Sie in der SWR-Dokumentation.

import useSWR from 'swr'
 
const fetcher = (...args) => fetch(...args).then((res) => res.json())
 
function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)
 
  if (error) return <div>Laden fehlgeschlagen</div>
  if (!data) return <div>Laden...</div>
 
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}