ใน App Router คุณดึงข้อมูล โดยตรงภายใน async Server Components โดยใช้ fetch API มาตรฐาน — ไม่มี getServerSideProps ไม่มี useEffect ไม่มีเลเยอร์ข้อมูลแยกต่างหาก Next.js ขยาย fetch ด้วยการควบคุมแคช
// app/posts/page.tsx — a Server Component
export default async function Posts() {
const res = await fetch("https://api.example.com/posts"); // runs on the server
const posts = await res.json();
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
เนื่องจากคอมโพเนนต์ทำงานบนเซิร์ฟเวอร์ คุณเพียงแค่ await ข้อมูลของคุณและใช้มัน — ง่ายกว่ามาก useEffect + useState + การระบำสถานะการโหลดฝั่งไคลเอนต์
Next.js ขยาย fetch เพื่อให้แต่ละการเรียกเลือกพฤติกรรมการเรนเดอร์ของมันเอง:
fetch(url, { cache: "force-cache" }); // SSG — cached (default for static)
fetch(url, { cache: "no-store" }); // SSR — fresh every request
fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s
fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation
นี่คือรูปแบบแบบรวมของ App Router: แทนที่จะเลือกกลยุทธ์ระดับหน้า คุณควบคุมแคชที่ระดับการดึงข้อมูล
// ❌ sequential — each awaits the previous (slow waterfall)
const user = await getUser();
const posts = await getPosts();
// ✅ parallel — both start at once
const [user, posts] = await Promise.all([getUser(), getPosts()]);
เริ่มการร้องขอที่เป็นอิสระร่วมกันด้วย Promise.all เพื่อไม่ให้พวกเขาจำกัดซึ่งกันและกัน
"use client";
// for client-side data (e.g. after interaction), use a library like SWR or React Query
const { data } = useSWR("/api/user", fetcher);
Server Components ครอบคลุมความต้องการส่วนใหญ่ ใช้ SWR/React Query สำหรับข้อมูลฝั่งไคลเอนต์ แบบโต้ตอบ หรือที่ตรวจสอบความถูกต้องบ่อยครั้ง
Next.js จะ ลบการจำลอง โดยอัตโนมัติการเรียก fetch ที่เหมือนกันในการเรนเดอร์ครั้งเดียว — ดังนั้นคุณสามารถดึงข้อมูลเดียวกันในเลเยาต์และหน้าโดยไม่มีการร้องขอแบบคู่ขนาน
การดึงข้อมูล async โดยตรงใน Server Components เป็นหนึ่งในความเรียบง่ายที่ใหญ่ที่สุดของ App Router — ไม่มีบอยเลอร์เพลต การเข้าถึงฝั่งเซิร์ฟเวอร์ที่ปลอดภัย การลบการจำลองโดยอัตโนมัติ และการแคชต่อการดึงข้อมูลที่ใช้เป็นตัวเลือก SSG/SSR/ISR ของคุณ
การรู้ว่าจะขนานการดึงข้อมูลที่เป็นอิสระ (หลีกเลี่ยงน้ำตก) เป็นแนวปฏิบัติประสิทธิภาพที่สำคัญ