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

> Server-side rendering (SSR), tạo trang tĩnh (SSG), tái tạo tĩnh tăng dần (ISR), streaming

- 24 câu hỏi phỏng vấn
- Mid-Level
- [Câu hỏi phỏng vấn: React / Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van.md)

## 1. Hành vi mặc định của Server Components trong Next.js App Router về data fetching là gì?

**Câu trả lời**

Server Components thực hiện data fetching phía server với mỗi request theo mặc định, đảm bảo dữ liệu luôn mới. Khác với Pages Router cần getServerSideProps, Server Components làm cho SSR trở nên ngầm định. Để cache tĩnh, cần thêm tùy chọn cache: 'force-cache' vào fetch.

## 2. Tùy chọn cache của fetch nào tương đương với getStaticProps trong Pages Router?

**Câu trả lời**

Tùy chọn cache: 'force-cache' yêu cầu Next.js cache phản hồi cho đến khi được vô hiệu hóa thủ công, tương đương với getStaticProps. Chiến lược này tạo ra nội dung tĩnh được cache vô thời hạn. Tùy chọn 'no-store' tương đương với getServerSideProps (re-fetch mỗi request), trong khi next.revalidate tương đương với getStaticProps có revalidate (ISR).

## 3. Làm thế nào để buộc data fetching động trên mỗi request (tương đương getServerSideProps)?

**Câu trả lời**

Tùy chọn cache: 'no-store' vô hiệu hóa hoàn toàn bộ nhớ cache và buộc re-fetch trong mỗi request, tương đương với getServerSideProps. Chiến lược này đảm bảo dữ liệu luôn mới nhưng tăng độ trễ. Sử dụng cho dữ liệu thời gian thực (dashboard, thông báo, giá trực tiếp) nơi tính mới quan trọng.

## Còn 21 câu hỏi nữa

- Làm thế nào để triển khai ISR (Incremental Static Regeneration) với revalidation mỗi giờ?
- Export 'export const revalidate = 60' ở cấp độ trang làm gì?

Đăng ký miễn phí: https://sharpskill.dev/vi/login

## Các chủ đề phỏng vấn React / Next.js khác

- [Nền tảng JavaScript](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/javascript-essentials.md): 25 câu hỏi, Junior
- [Nền tảng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-fundamentals.md): 20 câu hỏi, Junior
- [React Hooks](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-hooks.md): 22 câu hỏi, Junior
- [Vòng đời component](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/component-lifecycle.md): 18 câu hỏi, Junior
- [React Router](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-router.md): 20 câu hỏi, Junior
- [Quản lý state với Context](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/state-management-context.md): 18 câu hỏi, Junior
- [Biểu mẫu và Controlled Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/forms-controlled-components.md): 20 câu hỏi, Mid-Level
- [Lấy dữ liệu & API](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/fetching-data-api.md): 20 câu hỏi, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-query-tanstack.md): 20 câu hỏi, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/styling-css-in-js.md): 18 câu hỏi, Mid-Level
- [Nền tảng Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-fundamentals.md): 25 câu hỏi, Mid-Level
- [TypeScript với React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/typescript-react.md): 20 câu hỏi, Mid-Level
- [Server Actions trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-server-actions.md): 20 câu hỏi, Mid-Level
- [Định tuyến & Điều hướng trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-routing-navigation.md): 22 câu hỏi, Mid-Level
- [API Routes trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-api-routes.md): 20 câu hỏi, Mid-Level
- [Metadata & SEO trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-metadata-seo.md): 18 câu hỏi, Mid-Level
- [Middleware & Auth trong Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-middleware-auth.md): 22 câu hỏi, Mid-Level
- [Kiểm thử React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-testing.md): 20 câu hỏi, Mid-Level
- [Zustand State Management](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/zustand-state-management.md): 18 câu hỏi, Mid-Level
- [Tối ưu hiệu năng React](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-performance-optimization.md): 22 câu hỏi, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-error-boundaries.md): 18 câu hỏi, Senior
- [Advanced React Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/advanced-react-patterns.md): 20 câu hỏi, Senior
- [Tính năng nâng cao của Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-advanced-features.md): 24 câu hỏi, Senior
- [Triển khai & Môi trường Production với Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-deployment-production.md): 20 câu hỏi, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-architecture-patterns.md): 22 câu hỏi, Senior
- [React Server Components](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-server-components.md): 26 câu hỏi, Senior
- [Quốc tế hóa Next.js](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-internationalization.md): 20 câu hỏi, Senior
- [React Bảo mật & Thực hành tốt nhất](https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/react-security-best-practices.md): 22 câu hỏi, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/vi/technologies/react-next/cau-hoi-phong-van/nextjs-data-fetching