Serverzustand verwalten
Erkunden Sie Strategien zur Verwaltung serverseitig abgerufener Daten und deren Synchronisierung mit Ihrer UI, einschließlich SWR und React Query.
Serverzustand verwalten ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
What is Server State?
When building applications, you deal with different kinds of data. Server state refers to data that lives on a remote server, like a list of products, user profiles, or blog posts.
It's distinct from client state, which is data managed purely within your application, such as whether a modal is open or a theme is dark/light.
Challenges of Server State
Managing server state can be tricky because:
- It's Asynchronous: Data isn't instantly available; it takes time to fetch.
- It Can Be Stale: The data on the server might change after you've fetched it.
- Caching is Hard: How do you store fetched data efficiently and know when to refetch?
- Error Handling: Network requests can fail, requiring robust error management.
- Loading States: Users need feedback while data is being fetched.
Introducing SWR & React Query
Libraries like SWR (Stale-While-Revalidate) and React Query (now TanStack Query) are designed specifically to tackle these server state challenges in React applications.
They provide powerful hooks that simplify data fetching, caching, revalidation, and error handling, making your UI more robust and responsive.
Simple Asynchronous Fetch
Before using a library like SWR, fetching data asynchronously often involves manual handling of loading, success, and error states. Here's a basic JavaScript example:
async function fetchData() {
console.log("Fetching data...");
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("Data fetched: ", data.title);
} catch (error) {
console.error("Fetch error: ", error.message);
}
}
fetchData();The useSWR Hook
SWR wraps this fetching logic into a convenient React Hook called useSWR. It automatically provides the data, error, and a loading state (implicitly via data being undefined initially).
You provide a unique key (often the API endpoint) and a fetcher function that makes the actual data request.
import useSWR from 'swr';
const fetcher = url => fetch(url).then(res => res.json());
function UserProfile() {
// The key is '/api/user', the fetcher is our function
const { data, error } = useSWR('/api/user', fetcher);
if (error) return <div>Failed to load user.</div>;
if (!data) return <div>Loading user...</div>;
return <div>Hello, {data.name}!</div>;
}
// In a Next.js app, UserProfile would be rendered
// inside a page component.Smart Caching & Deduping
One of SWR's core features is its intelligent caching. When multiple components request data with the same key, SWR automatically deduplicates these requests, fetching the data only once.
It then shares this cached data across all subscribers, preventing unnecessary network calls and improving performance. This is crucial for large applications.
Stale-While-Revalidate Strategy
SWR's name comes from its Stale-While-Revalidate caching strategy. This means:
- It immediately returns the cached (stale) data to the UI.
- It then sends a request to revalidate (fetch new) data in the background.
- Once new data arrives, it updates the UI.
This provides an instant user experience while ensuring data freshness.
Automatic Revalidation
SWR and React Query automatically revalidate data in several common scenarios, ensuring your UI always reflects the latest server state:
- On Focus: When the browser tab or window regains focus.
- On Reconnect: When the network connection is restored.
- On Interval: You can configure periodic revalidation for frequently changing data.
This significantly reduces the need for manual data refreshing.
Mutating Data & UI Updates
When you perform actions that change server data (e.g., submitting a form to create a new post), you need to update your UI. SWR provides a mutate function to help with this.
You can use mutate to manually revalidate the data associated with a key, or even update the local cache directly for immediate optimistic UI updates.
Server State Check
Which of the following are key benefits of using a library like SWR or React Query for managing server state?
Recap & Next Steps
You've explored the world of server state and learned why it requires special handling compared to client state. Libraries like SWR and React Query are indispensable tools for Next.js developers, simplifying data fetching, caching, revalidation, and error management.
By leveraging these libraries, you can build more performant, reliable, and user-friendly applications with less effort. Keep practicing these concepts to master your data fetching!
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „Serverzustand verwalten“ kostenlos?
Ja — der vollständige Text von „Serverzustand verwalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Serverzustand verwalten“?
Erkunden Sie Strategien zur Verwaltung serverseitig abgerufener Daten und deren Synchronisierung mit Ihrer UI, einschließlich SWR und React Query. Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Serverzustand verwalten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React Context API
- Globaler Zustand mit Zustand
- Serverzustand verwalten
- Zustand in localStorage speichern