Data Fetching Next.js
Server-side rendering (SSR), generasi statis (SSG), regenerasi statis inkremental (ISR), streaming
1Apa perilaku default Server Components di Next.js App Router untuk data fetching?
Apa perilaku default Server Components di Next.js App Router untuk data fetching?
Jawaban
Server Components melakukan data fetching di sisi server pada setiap request secara default, memastikan data selalu segar. Berbeda dengan Pages Router yang memerlukan getServerSideProps, Server Components membuat SSR menjadi implisit. Untuk cache statis, opsi cache: 'force-cache' harus ditambahkan ke fetch.
2Opsi cache fetch mana yang setara dengan getStaticProps di Pages Router?
Opsi cache fetch mana yang setara dengan getStaticProps di Pages Router?
Jawaban
Opsi cache: 'force-cache' memberi tahu Next.js untuk meng-cache respons hingga diinvalidasi secara manual, setara dengan getStaticProps. Strategi ini menghasilkan konten statis yang tetap di-cache tanpa batas waktu. Opsi 'no-store' sama dengan getServerSideProps (re-fetch setiap request), sementara next.revalidate sama dengan getStaticProps dengan revalidate (ISR).
3Bagaimana cara memaksa data fetching dinamis pada setiap request (setara dengan getServerSideProps)?
Bagaimana cara memaksa data fetching dinamis pada setiap request (setara dengan getServerSideProps)?
Jawaban
Opsi cache: 'no-store' menonaktifkan cache sepenuhnya dan memaksa re-fetch pada setiap request, setara dengan getServerSideProps. Strategi ini memastikan data selalu segar tetapi meningkatkan latensi. Gunakan untuk data real-time (dashboard, notifikasi, harga live) di mana kesegaran data sangat penting.
Bagaimana cara mengimplementasikan ISR (Incremental Static Regeneration) dengan revalidasi setiap jam?
Apa yang dilakukan export 'export const revalidate = 60' di level halaman?
+21 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis