Question 1

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

Accepted Answer

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.

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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.

Data Fetching trong Next.js

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

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

Câu trả lời

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

Câu trả lời

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ì?

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

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Biểu mẫu và Controlled Components

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Kiểm thử React

Zustand State Management

Tối ưu hiệu năng React

Error Boundaries & Error Handling

Advanced React Patterns

Tính năng nâng cao của Next.js

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo