React Academy · บทเรียน

fetch() พร้อมตัวเลือกแคชใน Next.js

ใช้ตัวเลือก force-cache, no-store และ revalidate กับ fetch เพื่อควบคุมพฤติกรรมการแคช

บทเรียน 1 จาก 413 ขั้นตอน

fetch() พร้อมตัวเลือกแคชใน Next.js เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

การดึงข้อมูลแบบขยายใน Next.js

Next.js ขยาย API fetch() ดั้งเดิมด้วยตัวเลือก next สำหรับควบคุมการแคชและการตรวจสอบใหม่ ฟีเจอร์นี้ใช้ได้เฉพาะในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และตัวจัดการเส้นทาง

force-cache (ค่าเริ่มต้น)

ตามค่าเริ่มต้น fetch() ใน Next.js จะใช้ force-cache — แคชการตอบกลับไว้ไม่จำกัดระยะเวลาและนำกลับมาใช้กับคำขอทั้งหมดจนกว่าจะตรวจสอบใหม่อย่างชัดเจน

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — ใหม่เสมอ

no-store จะปิดการแคชโดยสิ้นเชิง ทุกคำขอจะไปถึงต้นทาง ใช้สำหรับข้อมูลเฉพาะบุคคลหรือข้อมูลละเอียดอ่อน

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR ตามเวลา

ตัวเลือก next.revalidate จะแคชการตอบกลับไว้ แต่ตรวจสอบใหม่ทุก N วินาทีในเบื้องหลัง ตามรูปแบบใช้ข้อมูลเก่าระหว่างตรวจสอบใหม่

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate ระดับเซกเมนต์

ส่งออกค่าคงที่ revalidate จากหน้าหรือโครงสร้าง เพื่อใช้ช่วงเวลาการตรวจสอบใหม่กับการดึงข้อมูลทั้งหมดในเซกเมนต์นั้น

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — การตรวจสอบใหม่ตามแท็ก

กำหนดแท็กให้การเรียกดึงข้อมูลด้วย next.tags ใช้ revalidateTag(tag) ใน Server Action หรือตัวจัดการเส้นทางเพื่อทำให้แคชที่มีแท็กตรงกันทั้งหมดใช้ไม่ได้ตามต้องการ

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) ทำให้แคชของเส้นทาง URL ที่ระบุใช้ไม่ได้ ส่งผลให้สร้างเส้นทางนั้นใหม่เมื่อมีคำขอถัดไป

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

การไม่ใช้แคชจากฟังก์ชันแบบไดนามิก

การเรียกใช้ cookies(), headers() หรือการอ่าน searchParams ในหน้าจะทำให้หน้าเป็นแบบไดนามิก — หน้าเพจนั้นจะไม่ใช้แคชโดยสิ้นเชิง

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

การกำจัดการทำซ้ำ

Next.js จะกำจัดการเรียก fetch ที่เหมือนกันภายในการแสดงผลหนึ่งรอบ — หากคอมโพเนนต์ฝั่งเซิร์ฟเวอร์สองตัวดึงข้อมูลจาก URL เดียวกัน จะมีการส่งคำขอ HTTP เพียงครั้งเดียว

การจดจำคำขอเทียบกับแคช

มีชั้นแคชอยู่สองชั้น ได้แก่ การจดจำคำขอ (กำจัดคำขอซ้ำต่อคำขอโดยอัตโนมัติ) และ แคชข้อมูล (คงอยู่ถาวรและควบคุมด้วยตัวเลือก cache/revalidate)

การแก้ไขข้อบกพร่องของพฤติกรรมแคช

เรียกใช้ next build และตรวจสอบผลลัพธ์การสร้าง — แต่ละเส้นทางจะแสดงกลยุทธ์การแสดงผลของตนเอง ได้แก่ แบบสแตติก (มีแคช), แบบไดนามิก (ไม่ใช้แคช) หรือ ISR (มีช่วงเวลาการตรวจสอบใหม่)

ตรวจสอบอย่างรวดเร็ว

ควรใช้ตัวเลือกแคชของ fetch ใดสำหรับข้อมูลที่เปลี่ยนแปลงไม่บ่อยแต่ควรอัปเดตได้โดยไม่ต้องนำระบบขึ้นใหม่ทั้งหมด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

ใช้ cache: 'force-cache' สำหรับข้อมูลแบบสแตติก ใช้ cache: 'no-store' สำหรับข้อมูลที่ต้องใหม่เสมอ และใช้ next: { revalidate: N } สำหรับ ISR ติดแท็กให้การดึงข้อมูลด้วย next.tags และเรียกใช้ revalidateTag() เพื่อทำให้แคชใช้ไม่ได้ตามต้องการ ฟังก์ชันแบบไดนามิกจะทำให้หน้าไม่ใช้แคชโดยอัตโนมัติ

เริ่มต้นได้ฟรี

เรียนรู้ React ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 88
บทเรียน: 324

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “fetch() พร้อมตัวเลือกแคชใน Next.js” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “fetch() พร้อมตัวเลือกแคชใน Next.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “fetch() พร้อมตัวเลือกแคชใน Next.js”

ใช้ตัวเลือก force-cache, no-store และ revalidate กับ fetch เพื่อควบคุมพฤติกรรมการแคช คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “fetch() พร้อมตัวเลือกแคชใน Next.js” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

fetch() พร้อมตัวเลือกแคชใน Next.js
unstable_cache และ React cache()
การสร้างสถิตแบบเพิ่มทีละส่วน (ISR)
Server Actions สำหรับการเปลี่ยนแปลงข้อมูล

← กลับไปที่ React Academy