การดึงข้อมูล Next.js
Server-side rendering (SSR), การสร้างหน้าแบบสถิต (SSG), การสร้างใหม่แบบสถิตเพิ่มขึ้น (ISR), streaming
1พฤติกรรมเริ่มต้นของ Server Components ใน Next.js App Router สำหรับการดึงข้อมูลคืออะไร?
พฤติกรรมเริ่มต้นของ Server Components ใน Next.js App Router สำหรับการดึงข้อมูลคืออะไร?
คำตอบ
Server Components ดำเนินการดึงข้อมูลบนเซิร์ฟเวอร์ในทุกคำขอตามค่าเริ่มต้น ทำให้มั่นใจได้ว่าข้อมูลจะสดใหม่เสมอ ต่างจาก Pages Router ที่ต้องใช้ getServerSideProps Server Components ทำให้ SSR เป็นแบบนัย สำหรับการแคชแบบสถิต ต้องเพิ่มตัวเลือก cache: 'force-cache' ใน fetch
2ตัวเลือก cache ของ fetch ใดที่เทียบเท่ากับ getStaticProps ใน Pages Router?
ตัวเลือก cache ของ fetch ใดที่เทียบเท่ากับ getStaticProps ใน Pages Router?
คำตอบ
ตัวเลือก cache: 'force-cache' บอก Next.js ให้แคชการตอบสนองจนกว่าจะถูกยกเลิกการใช้งานด้วยตนเอง ซึ่งเทียบเท่ากับ getStaticProps กลยุทธ์นี้สร้างเนื้อหาแบบสถิตที่ยังคงถูกแคชไว้อย่างไม่มีกำหนด ตัวเลือก 'no-store' เท่ากับ getServerSideProps (re-fetch ทุกคำขอ) ในขณะที่ next.revalidate เท่ากับ getStaticProps ที่มี revalidate (ISR)
3จะบังคับการดึงข้อมูลแบบไดนามิกในทุกคำขออย่างไร (เทียบเท่ากับ getServerSideProps)?
จะบังคับการดึงข้อมูลแบบไดนามิกในทุกคำขออย่างไร (เทียบเท่ากับ getServerSideProps)?
คำตอบ
ตัวเลือก cache: 'no-store' ปิดการแคชทั้งหมดและบังคับให้ดึงข้อมูลใหม่ในทุกคำขอ เทียบเท่ากับ getServerSideProps กลยุทธ์นี้รับประกันข้อมูลที่สดใหม่เสมอแต่เพิ่มเวลาหน่วง ใช้สำหรับข้อมูลแบบเรียลไทม์ (dashboard, การแจ้งเตือน, ราคาสด) ที่ความสดใหม่สำคัญ
จะนำ ISR (Incremental Static Regeneration) มาใช้งานด้วยการ revalidation ทุกชั่วโมงได้อย่างไร?
'export const revalidate = 60' ที่ระดับหน้าทำอะไร?
+21 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React / Next.js อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
React Hooks
วงจรชีวิตของ component
React Router
การจัดการ state ด้วย Context
ฟอร์มและ Controlled Components
การดึงข้อมูลและ API
React Query (TanStack Query)
Styling & CSS-in-JS
พื้นฐาน Next.js
TypeScript กับ React
Server Actions ของ Next.js
การกำหนดเส้นทางและการนำทางใน Next.js
API Routes ใน Next.js
Metadata & SEO ใน Next.js
Middleware และ Auth ใน Next.js
การทดสอบ React
Zustand State Management
การเพิ่มประสิทธิภาพ React
Error Boundaries & การจัดการข้อผิดพลาด
Advanced React Patterns
ฟีเจอร์ขั้นสูงของ Next.js
การ Deploy & Production ของ Next.js
Architecture & Design Patterns
React Server Components
การแปลภาษา Next.js
React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด
เชี่ยวชาญ React / Next.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี