ทำไม App Router คืออนาคต?

Next.js เวอร์ชันใหม่นำเสนอการเปลี่ยนแปลงครั้งใหญ่ที่สุดในประวัติศาสตร์ ด้วยสถาปัตยกรรม React Server Components (RSC) ที่เปลี่ยนวิธีคิดในการสร้างเว็บไปตลอดกาล

Paradigm Shift: การเปลี่ยนแปลงครั้งสำคัญ

จากเดิมที่พึ่งพา Client-side Hydration หนักๆ App Router ย้ายการทำงานส่วนใหญ่กลับไปที่ Server ผลลัพธ์คือประสิทธิภาพที่ก้าวกระโดด

✓
Server First Component ทั้งหมดเป็น Server Component โดย Default
✓
Zero Bundle Size ลดขนาด JavaScript ที่ Browser ต้องโหลดลงอย่างมหาศาล
✓
Standard Web API ใช้ fetch, Request, Response มาตรฐาน แทนฟังก์ชันเฉพาะทาง

เปรียบเทียบขนาด JavaScript Bundle (จำลอง)

App Router ลดภาระของ Client ลงอย่างเห็นได้ชัด

หัวใจสำคัญ 5 ประการ

1. React Server Components (RSC)

หัวใจของการปฏิวัติครั้งนี้ ไม่ใช่แค่เรื่อง Routing แต่คือ Rendering Architecture ใหม่ RSC ช่วยแยกโค้ดที่ไม่จำเป็นต้องรันบน Client ออกไป ทำให้เว็บเบาขึ้น

จำลองการทำงาน: Server vs Client

เลือกโหมดด้านบนเพื่อดูความแตกต่างของการส่งข้อมูล

รู้หรือไม่?

ใน App Router, Component ใน `app/` ทั้งหมดเป็น Server Component โดยอัตโนมัติ

// page.js

export default async function Page() {

// รันบน Server เท่านั้น!

const data = await db.query()

}

ถ้าต้องการใช้ `useState` หรือ `useEffect` ต้องประกาศ 'use client' ที่หัวไฟล์

2. Routing & Layouts แบบใหม่

แก้ปัญหา Nested Layouts ที่ซับซ้อนด้วย File-system Based Routing ที่ฉลาดขึ้น โฟลเดอร์คือ Route และไฟล์พิเศษช่วยจัดการ State ต่างๆ

สำรวจโครงสร้างไฟล์ (คลิกที่โฟลเดอร์)

*คลิกที่ไฟล์เพื่อดูหน้าที่ของมัน

📁

เลือกไฟล์จากโครงสร้าง

คลิกที่โครงสร้างไฟล์ด้านซ้ายเพื่อดูว่า App Router จัดการ Routing อย่างไร

✨ ฟีเจอร์เด็ด: State Preservation

เมื่อเปลี่ยนหน้าภายใต้ Layout เดียวกัน (เช่นเปลี่ยน Tab ในหน้า Blog) State ของ Layout จะไม่หายไปและไม่ต้อง Re-render ใหม่!

3. Data Fetching & Actions

ลืม getServerSideProps ไปได้เลย ใน App Router เราใช้ Standard Web API และ async/await ใน Component ได้โดยตรง

index.js

Caching Control ง่ายแค่ปลายนิ้ว

App Router ควบคุมการ Cache ผ่าน options ของ fetch โดยตรง ไม่ต้องจำชื่อ function API ให้ยุ่งยาก

cache: 'force-cache' → Static Site (Default)

cache: 'no-store' → Dynamic Rendering (SSR)

next: { revalidate: 60 } → ISR (Update every 60s)

คลิกตัวเลือกด้านบนเพื่อดูคำอธิบาย

🎁 Bonus: Server Actions

ทำ Form Submission ได้โดยไม่ต้องสร้าง API Route! เขียน function แปะลงใน form action ได้เลย เหมือนเขียน PHP แต่ทันสมัยกว่า

async function create(formData) { 'use server' await db.todo.create(...) }

4. Streaming & Suspense

หมดยุค "รอโหลดเสร็จทุกอย่างค่อยแสดงผล" (All or Nothing) ด้วย Streaming เราสามารถส่งชิ้นส่วนของหน้าเว็บมาทีละส่วน ทำให้ผู้ใช้เห็น Content เร็วขึ้นมาก (TTFB ต่ำลง)

จำลองการโหลดหน้า Dashboard

Loading heavy data...

Ready to simulate.

เจาะลึก Next.js App Router: ทำไมถึงเป็นอนาคต?