Client-seitiges Abrufen von Daten

Das client-seitige Abrufen von Daten ist nützlich, wenn Ihre Seite keine SEO-Indizierung benötigt, wenn Sie Ihre Daten nicht vorab rendern müssen oder wenn der Inhalt Ihrer Seiten häufig aktualisiert werden muss. Im Gegensatz zu den serverseitigen Rendering-APIs können Sie das client-seitige Datenabrufen auf Komponentenebene verwenden.

Wenn es auf Seitenebene durchgeführt wird, werden die Daten zur Laufzeit abgerufen und der Seiteninhalt wird aktualisiert, sobald sich die Daten ändern. Bei Verwendung auf Komponentenebene werden die Daten zum Zeitpunkt des Mountens der Komponente abgerufen und der Komponenteninhalt wird aktualisiert, wenn sich die Daten ändern.

Es ist wichtig zu beachten, dass das client-seitige Abrufen von Daten die Leistung Ihrer Anwendung und die Ladegeschwindigkeit Ihrer Seiten beeinträchtigen kann. Dies liegt daran, dass das Datenabrufen zum Zeitpunkt des Mountens 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 das Datenabrufen namens SWR entwickelt. Sie wird dringend empfohlen, wenn Sie Daten client-seitig abrufen. Sie handhabt Caching, Revalidierung, Fokus-Tracking, Intervall-Neuabfragen 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 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>Failed to load</div>
  if (!data) return <div>Loading...</div>

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