Client-seitiges Datenabrufen (Client-side Fetching)

Client-seitiges Datenabrufen ist nützlich, wenn Ihre Seite keine SEO-Indizierung benötigt, wenn Sie keine Vorab-Renderung (Pre-rendering) der Daten benötigen oder wenn der Seiteninhalt häufig aktualisiert werden muss. Im Gegensatz zu den Server-seitigen Rendering-APIs können Sie client-seitiges Datenabrufen auf Komponentenebene nutzen.

Wenn es auf Seitenebene durchgeführt wird, werden die Daten zur Laufzeit abgerufen und der Seiteninhalt wird bei Datenänderungen aktualisiert. Bei Verwendung auf Komponentenebene werden die Daten beim Mounten der Komponente abgerufen und der Komponenteninhalt wird bei Datenänderungen aktualisiert.

Es ist wichtig zu beachten, dass client-seitiges Datenabrufen die Leistung Ihrer Anwendung und die Ladegeschwindigkeit Ihrer Seiten beeinflussen kann. Dies liegt daran, dass der Datenabruf beim Mounten der Komponente oder Seite erfolgt und die Daten nicht zwischengespeichert werden.

Client-seitiges Datenabrufen mit useEffect

Das folgende Beispiel zeigt, wie Sie Daten client-seitig 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>Loading...</p>
  if (!data) return <p>No profile data</p>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

Client-seitiges Datenabrufen 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 client-seitig abrufen. SWR übernimmt Caching, Revalidierung, Fokus-Tracking, Intervall-Abruf und mehr.

Mit dem gleichen Beispiel wie oben können wir nun SWR verwenden, um die Profildaten abzurufen. SWR wird die Daten automatisch für uns cachen und bei Bedarf revalidieren.

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>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}