Next.js Data Fetching
Server-side rendering (SSR), statische Generierung (SSG), inkrementelle statische Regenerierung (ISR), Streaming
1Was ist das Standardverhalten von Server Components im Next.js App Router beim Data Fetching?
Was ist das Standardverhalten von Server Components im Next.js App Router beim Data Fetching?
Antwort
Server Components führen das Data Fetching standardmäßig bei jeder Anfrage serverseitig durch und gewährleisten so frische Daten. Anders als beim Pages Router, wo getServerSideProps benötigt wurde, machen Server Components SSR implizit. Für statisches Caching muss die Option cache: 'force-cache' zum fetch hinzugefügt werden.
2Welche fetch-Cache-Option ist äquivalent zu getStaticProps im Pages Router?
Welche fetch-Cache-Option ist äquivalent zu getStaticProps im Pages Router?
Antwort
Die Option cache: 'force-cache' weist Next.js an, die Antwort bis zur manuellen Invalidierung zu cachen, was getStaticProps entspricht. Diese Strategie generiert statischen Inhalt, der unbegrenzt gecacht bleibt. Die Option 'no-store' entspricht getServerSideProps (Re-Fetch bei jeder Anfrage), während next.revalidate getStaticProps mit revalidate (ISR) entspricht.
3Wie erzwingt man dynamisches Data Fetching bei jeder Anfrage (getServerSideProps-Äquivalent)?
Wie erzwingt man dynamisches Data Fetching bei jeder Anfrage (getServerSideProps-Äquivalent)?
Antwort
Die Option cache: 'no-store' deaktiviert das Caching vollständig und erzwingt das Re-Fetching bei jeder Anfrage, entsprechend getServerSideProps. Diese Strategie gewährleistet immer frische Daten, erhöht aber die Latenz. Verwenden für Echtzeit-Daten (Dashboards, Benachrichtigungen, Live-Preise), wo Aktualität kritisch ist.
Wie implementiert man ISR (Incremental Static Regeneration) mit stündlicher Revalidierung?
Was macht der Export 'export const revalidate = 60' auf Seitenebene?
+21 Interview-Fragen
Weitere React / Next.js-Interviewthemen
JavaScript-Grundlagen
React-Grundlagen
React Hooks
Komponentenlebenszyklus
React Router
Zustandsverwaltung mit Context
Formulare & Controlled Components
Datenabruf & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Grundlagen
TypeScript mit React
Next.js Server Actions
Routing & Navigation in Next.js
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance-Optimierung
Error Boundaries & Error Handling
Advanced React Patterns
Erweiterte Next.js-Funktionen
Next.js Deployment & Produktion
Architecture & Design Patterns
React Server Components
Next.js Internationalisierung
React Sicherheit & Best Practices
Meistere React / Next.js für dein nächstes Interview
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten