# Data Fetching Next.js (React / Next.js)

> Server-side rendering (SSR), generasi statis (SSG), regenerasi statis inkremental (ISR), streaming

- 24 pertanyaan wawancara
- Mid-Level
- [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md)

## 1. 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.

## 2. 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).

## 3. 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.

## 21 pertanyaan lagi tersedia

- Bagaimana cara mengimplementasikan ISR (Incremental Static Regeneration) dengan revalidasi setiap jam?
- Apa yang dilakukan export 'export const revalidate = 60' di level halaman?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara React / Next.js lainnya

- [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior
- [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior
- [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior
- [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior
- [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior
- [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior
- [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level
- [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack.md): 20 pertanyaan, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level
- [Dasar-dasar Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals.md): 25 pertanyaan, Mid-Level
- [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level
- [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level
- [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level
- [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level
- [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level
- [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level
- [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level
- [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level
- [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior
- [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior
- [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior
- [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior
- [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior
- [Internasionalisasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization.md): 20 pertanyaan, Senior
- [Keamanan React & Praktik Terbaik](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices.md): 22 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching