Next.js 15 สิ่งใหม่ที่ต้องรู้ สำหรับ Frontend Developer

ตัวอย่างการใช้งาน React Actions กับ Form:

import { revalidatePath } from 'next/cache';

// This is a Server Action
async function createTodo(formData: FormData) {
  'use server'; // Mark this function as a Server Action

  const title = formData.get('title');
  // Logic to save the todo to a database
  console.log(`Adding todo: ${title}`);
  // Simulate database interaction
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // Revalidate the path to show the new todo
  revalidatePath('/todos');
  return { message: 'Todo added successfully!' };
}

export default function TodoForm() {
  return (
    <form action={createTodo} className="flex gap-2">
      <input 
        type="text" 
        name="title" 
        placeholder="Enter new todo" 
        className="border p-2 rounded" 
      />
      <button 
        type="submit" 
        className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
      >
        Add Todo
      </button>
    </form>
  );
}

จากตัวอย่างข้างต้น คุณจะเห็นว่าเราสามารถส่งฟังก์ชัน `createTodo` ซึ่งเป็น Server Action ไปยัง `action` prop ของ `

The `use` Hook: จัดการ Promise และ Context ได้ง่ายขึ้น

`use` Hook เป็นฟีเจอร์ใหม่ที่ปฏิวัติวิธีการจัดการ Promise และ Context ใน React Component ครับ โดยปกติแล้ว เราจะต้องใช้ `useEffect` กับ `useState` เพื่อจัดการกับ Promise หรือใช้ `useContext` เพื่อเข้าถึง Context แต่ `use` Hook ทำให้โค้ดเหล่านี้ดูสะอาดตาและอ่านง่ายขึ้นมาก

ความสามารถของ `use` Hook:

• จัดการ Promise: คุณสามารถใช้ `use(promise)` เพื่อรอผลลัพธ์ของ Promise ได้โดยตรงใน Component โดยไม่ต้องใช้ `async/await` ใน Component Function และ React จะจัดการ Suspense และ Error Boundaries ให้โดยอัตโนมัติ
• เข้าถึง Context: คุณสามารถใช้ `use(MyContext)` เพื่อเข้าถึงค่าจาก React Context ได้โดยตรง โดยไม่ต้องใช้ `useContext`

ตัวอย่างการใช้ `use` Hook กับ Promise:

import React, { Suspense } from 'react';

async function fetchData() {
  await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate network delay
  return { data: 'Hello from fetched data!' };
}

function MyDataComponent() {
  const { data } = React.use(fetchData()); // Use the 'use' hook to await the promise
  return <p>{data}</p>;
}

export default function Page() {
  return (
    <div>
      <h2>Using React.use with Promise</h2>
      <Suspense fallback={<p>Loading data...</p>}>
        <MyDataComponent />
      </Suspense>
    </div>
  );
}

นี่เป็นตัวอย่างที่ทรงพลังมาก เพราะมันทำให้การดึงข้อมูลแบบ Asynchronous ใน React Component กลายเป็นเรื่องที่ง่ายและเป็นธรรมชาติมากขึ้น โดยไม่ต้องยุ่งยากกับการจัดการ Loading State ด้วยตัวเองครับ

`useOptimistic`: ประสบการณ์ผู้ใช้ที่ราบรื่นกว่าเดิม

`useOptimistic` เป็น Hook ที่ช่วยให้คุณสามารถแสดงผล UI ในลักษณะ “Optimistic Update” ได้ครับ หมายความว่าเมื่อผู้ใช้มีการกระทำบางอย่าง (เช่น กด Like, เพิ่ม Todo) คุณสามารถอัปเดต UI ทันทีโดยไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์จริง ๆ ซึ่งจะทำให้ผู้ใช้รู้สึกว่าแอปตอบสนองได้รวดเร็วทันใจ แม้ว่าเบื้องหลังจะยังมีการส่งข้อมูลไปประมวลผลบนเซิร์ฟเวอร์อยู่ก็ตาม หากการดำเนินการบนเซิร์ฟเวอร์ล้มเหลว UI ก็จะกลับไปสู่สถานะเดิมได้

ตัวอย่าง `useOptimistic`:

import { useState, useOptimistic } from 'react';

// Simulate a server action
async function submitMessage(message: string): Promise<string> {
  await new Promise(resolve => setTimeout(resolve, 1000));
  // Simulate a potential error
  if (Math.random() < 0.2) {
    throw new Error('Failed to send message!');
  }
  return `Message "${message}" sent!`;
}

export default function ChatComponent() {
  const [messages, setMessages] = useState<string[]>([]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentMessages, newMessage: string) => [...currentMessages, `(Sending...) ${newMessage}`]
  );
  const [input, setInput] = useState('');
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    const newMessage = input;
    setInput('');
    setError(null);

    // Optimistically add the message
    addOptimisticMessage(newMessage);

    try {
      await submitMessage(newMessage);
      setMessages(prev => [...prev, newMessage]); // Add the actual message if successful
    } catch (err: any) {
      setError(err.message);
      // If failed, the optimistic message will automatically revert or needs explicit handling
      // For simplicity, we just show the error and don't add to actual messages
      // A more robust solution might remove the optimistic message on error
    }
  };

  return (
    <div className="p-4 border rounded shadow-md">
      <h3 className="text-xl font-semibold mb-3">Chat Room</h3>
      <ul className="mb-4 h-40 overflow-y-auto bg-gray-100 p-2 rounded">
        {optimisticMessages.map((msg, index) => (
          <li key={index} className={msg.startsWith('(Sending...)') ? 'text-gray-500 italic' : ''}>
            {msg}
          </li>
        ))}
      </ul>
      {error && <p className="text-red-500 mb-2">Error: {error}</p>}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type your message..."
          className="flex-grow p-2 border rounded"
        />
        <button type="submit" className="bg-green-500 text-white p-2 rounded hover:bg-green-600">
          Send
        </button>
      </form>
    </div>
  );
}

ในตัวอย่างนี้ เมื่อคุณพิมพ์ข้อความและกดส่ง ข้อความจะปรากฏในรายการทันทีพร้อมข้อความ “(Sending…)” ก่อนที่จะได้รับการยืนยันจากเซิร์ฟเวอร์จริง ๆ ซึ่งช่วยให้ผู้ใช้ได้รับประสบการณ์ที่รวดเร็วและต่อเนื่องครับ

`useFormStatus`: ติดตามสถานะ Form ได้อย่างแม่นยำ

`useFormStatus` เป็น Hook ที่ออกแบบมาเพื่อใช้กับ React Actions โดยเฉพาะครับ มันช่วยให้ Component ที่อยู่ภายใน `

ตัวอย่าง `useFormStatus`:

import { useFormStatus } from 'react-dom';
import { revalidatePath } from 'next/cache';

async function createItem(formData: FormData) {
  'use server';
  const name = formData.get('name');
  console.log(`Creating item: ${name}`);
  await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate network delay
  revalidatePath('/items');
}

function SubmitButton() {
  const { pending } = useFormStatus(); // Get the pending status

  return (
    <button 
      type="submit" 
      disabled={pending} 
      className={`bg-indigo-600 text-white p-2 rounded ${pending ? 'opacity-50 cursor-not-allowed' : 'hover:bg-indigo-700'}`}
    >
      {pending ? 'Adding item...' : 'Add Item'}
    </button>
  );
}

export default function ItemForm() {
  return (
    <form action={createItem} className="flex flex-col gap-4 p-4 border rounded-lg shadow-sm max-w-sm mx-auto mt-8">
      <label htmlFor="itemName" className="block text-sm font-medium text-gray-700">Item Name</label>
      <input 
        id="itemName"
        type="text" 
        name="name" 
        placeholder="Enter item name" 
        required 
        className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
      />
      <SubmitButton />
    </form>
  );
}

ใน `SubmitButton` Component เราใช้ `useFormStatus()` เพื่อตรวจสอบว่า Form กำลังอยู่ในสถานะ `pending` (กำลังส่งข้อมูล) หรือไม่ หากเป็นเช่นนั้น ปุ่มจะถูกปิดใช้งานและข้อความจะเปลี่ยนไป เพื่อให้ผู้ใช้ทราบสถานะและป้องกันการส่งข้อมูลซ้ำครับ

Server Actions ที่ทรงพลังและเสถียรยิ่งขึ้น

Next.js 15 ได้ปรับปรุง Server Actions ให้มีความเสถียรและทรงพลังมากยิ่งขึ้นครับ Server Actions เป็นฟีเจอร์ที่ช่วยให้คุณสามารถรันโค้ด JavaScript บนเซิร์ฟเวอร์ได้โดยตรงจาก Client Component หรือ Server Component โดยไม่ต้องสร้าง API Route แยกต่างหาก ซึ่งช่วยลดความซับซ้อนของการพัฒนา Full-stack และทำให้การจัดการข้อมูลระหว่าง Client กับ Server เป็นไปอย่างราบรื่น

การจัดการข้อผิดพลาดใน Server Actions

Next.js 15 ปรับปรุงการจัดการข้อผิดพลาดใน Server Actions ให้ดีขึ้น ทำให้คุณสามารถจัดการกับข้อผิดพลาดที่เกิดขึ้นบนเซิร์ฟเวอร์และแสดงผลไปยัง Client ได้อย่างเหมาะสม คุณสามารถใช้ `try…catch` block ภายใน Server Action เพื่อดักจับข้อผิดพลาดและส่งคืนข้อความผิดพลาดที่สามารถแสดงผลใน UI ได้

import { revalidatePath } from 'next/cache';

async function registerUser(formData: FormData) {
  'use server';
  const email = formData.get('email') as string;
  const password = formData.get('password') as string;

  if (!email || !password) {
    return { error: 'Email and password are required.' };
  }

  try {
    // Simulate database operation
    if (email === '[email protected]') {
      throw new Error('User with this email already exists.');
    }
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(`User ${email} registered successfully.`);
    revalidatePath('/dashboard');
    return { success: true, message: 'Registration successful!' };
  } catch (error: any) {
    console.error('Registration failed:', error.message);
    return { error: error.message };
  }
}

export default function RegisterForm() {
  const [response, setResponse] = useState<{ success?: boolean; error?: string; message?: string } | null>(null);

  const handleSubmit = async (formData: FormData) => {
    const result = await registerUser(formData);
    setResponse(result);
  };

  return (
    <form action={handleSubmit} className="p-4 border rounded max-w-md mx-auto">
      <h3 className="text-xl font-semibold mb-4">Register</h3>
      {response?.error && <p className="text-red-500 mb-2">{response.error}</p>}
      {response?.success && <p className="text-green-500 mb-2">{response.message}</p>}
      
      <div className="mb-4">
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          required 
          className="mt-1 block w-full p-2 border rounded" 
        />
      </div>
      <div className="mb-4">
        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
        <input 
          type="password" 
          id="password" 
          name="password" 
          required 
          className="mt-1 block w-full p-2 border rounded" 
        />
      </div>
      <button type="submit" className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
        Register
      </button>
    </form>
  );
}

ในตัวอย่างนี้ `registerUser` Server Action จะคืนค่า `{ error: string }` หากเกิดข้อผิดพลาด ซึ่ง `RegisterForm` Component สามารถนำไปแสดงผลให้กับผู้ใช้ได้ ทำให้การจัดการข้อผิดพลาดมีความชัดเจนและเป็นระบบมากขึ้นครับ

การจัดการข้อมูลและการ Revalidation

Server Actions ยังคงเป็นเครื่องมือหลักในการจัดการ Data Mutation และการ Revalidation ของข้อมูลใน Next.js ครับ ด้วยฟังก์ชันอย่าง `revalidatePath` และ `revalidateTag` คุณสามารถบอก Next.js ให้ล้าง Cache ของเส้นทางหรือ Tag ที่เกี่ยวข้องกับข้อมูลที่ถูกแก้ไข เพื่อให้ข้อมูลใหม่ถูกดึงมาแสดงผลแก่ผู้ใช้ นี่เป็นสิ่งสำคัญในการสร้างแอปพลิเคชันที่ข้อมูลเป็นปัจจุบันเสมอ

import { revalidatePath, revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';

async function updateProduct(formData: FormData) {
  'use server';
  const productId = formData.get('id') as string;
  const newPrice = parseFloat(formData.get('price') as string);

  try {
    // Simulate updating product in DB
    console.log(`Updating product ${productId} to price ${newPrice}`);
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // Revalidate specific product data or a list page
    revalidatePath(`/products/${productId}`); // Revalidate individual product page
    revalidateTag('products'); // Revalidate all products list if tagged

    redirect(`/products/${productId}`); // Redirect user after successful update
  } catch (error) {
    console.error('Failed to update product:', error);
    // Handle error, maybe return an error object or throw
    throw new Error('Could not update product.');
  }
}

export default function ProductUpdateForm({ productId, currentPrice }: { productId: string; currentPrice: number }) {
  return (
    <form action={updateProduct} className="p-4 border rounded">
      <input type="hidden" name="id" value={productId} />
      <label htmlFor="price" className="block text-sm font-medium text-gray-700">New Price</label>
      <input 
        type="number" 
        name="price" 
        id="price" 
        defaultValue={currentPrice} 
        step="0.01" 
        className="mt-1 block w-full p-2 border rounded" 
      />
      <button type="submit" className="mt-4 bg-purple-500 text-white p-2 rounded hover:bg-purple-600">
        Update Price
      </button>
    </form>
  );
}

เมื่อ `updateProduct` Server Action สำเร็จ Next.js จะทำการ Revalidate Cache สำหรับหน้าสินค้าเฉพาะหน้าและสำหรับ Tag ‘products’ ซึ่งจะทำให้ข้อมูลบนหน้าเว็บเป็นปัจจุบันทันทีหลังจากที่ผู้ใช้กดอัปเดตครับ

Turbopack: ประสิทธิภาพการ Build ที่เหนือกว่า

Next.js 15 มาพร้อมกับ Turbopack ในฐานะ Bundler และ Development Server เริ่มต้น ซึ่งถูกออกแบบมาเพื่อแทนที่ Webpack และ SWC ครับ Turbopack ถูกสร้างขึ้นมาโดยทีมงานเดียวกับ Turborepo และเป็น Rust-based ทำให้มันมีประสิทธิภาพที่เหนือกว่ามาก โดยเฉพาะในเรื่องของความเร็วในการ Development Server และ Production Build

Dev Server ที่เร็วขึ้นอย่างก้าวกระโดด

หนึ่งในปัญหาที่นักพัฒนาหลายคนประสบคือความช้าของ Development Server เมื่อโปรเจกต์มีขนาดใหญ่ขึ้น Turbopack เข้ามาแก้ปัญหานี้ด้วยการทำงานแบบ Incremental Compilation และ Hot Module Replacement (HMR) ที่รวดเร็วอย่างไม่น่าเชื่อ ทำให้การเปลี่ยนแปลงโค้ดและการเห็นผลลัพธ์บนเบราว์เซอร์เป็นไปอย่างทันทีทันใด ช่วยเพิ่ม Productivity ในการพัฒนาได้อย่างมหาศาลครับ

“Turbopack can be up to 700x faster than Webpack for large applications and 4x faster for smaller applications on cold starts.” – Vercel

ความเร็วนี้ไม่ได้มาจากการปรับปรุงเล็กน้อย แต่มาจากการออกแบบสถาปัตยกรรมใหม่ทั้งหมด ซึ่งใช้ประโยชน์จาก Rust ในการประมวลผลที่มีประสิทธิภาพสูงกว่า JavaScript อย่างมาก ทำให้แม้แต่โปรเจกต์ขนาดใหญ่ก็ยังคงรัน Dev Server ได้อย่างรวดเร็วและลื่นไหลครับ

Build Production ที่รวดเร็วและน่าเชื่อถือ

นอกจากการเร่งความเร็วของ Dev Server แล้ว Turbopack ยังช่วยลดเวลาในการ Build สำหรับ Production ลงได้อย่างมาก ซึ่งเป็นสิ่งสำคัญสำหรับ CI/CD Pipeline และการ Deploy แอปพลิเคชัน การ Build ที่รวดเร็วขึ้นหมายถึงการ Deploy ที่บ่อยขึ้น และการ Iteration ที่เร็วขึ้น ซึ่งเป็นประโยชน์อย่างยิ่งต่อทั้งนักพัฒนาและธุรกิจครับ

การใช้ Turbopack ใน Next.js 15 ยังช่วยให้การจัดการ Asset, Tree-shaking และ Code Splitting มีประสิทธิภาพมากยิ่งขึ้น ส่งผลให้ Bundle Size มีขนาดเล็กลง และแอปพลิเคชันโหลดได้เร็วขึ้นเมื่ออยู่บน Production ครับ อ่านเพิ่มเติมเกี่ยวกับ Turbopack

การเพิ่มประสิทธิภาพการโหลด Asset ที่ล้ำหน้าขึ้น

Next.js ได้ชื่อว่าเป็น Framework ที่ให้ความสำคัญกับ Performance มาโดยตลอด และ Next.js 15 ก็ยังคงเดินหน้าปรับปรุงเครื่องมือสำหรับการโหลด Asset ต่าง ๆ ให้ดียิ่งขึ้นไปอีก ไม่ว่าจะเป็นรูปภาพ, สคริปต์ หรือ Font เพื่อให้เว็บไซต์ของคุณโหลดได้เร็วที่สุดและมอบประสบการณ์ที่ดีที่สุดให้กับผู้ใช้

`next/image` ที่ฉลาดกว่าเดิม

`next/image` Component ได้รับการปรับปรุงให้ฉลาดและยืดหยุ่นมากขึ้นครับ ความสามารถใหม่ ๆ อาจรวมถึง:

• Automatic Alt Text Generation (ในอนาคต): มีการพูดถึงความเป็นไปได้ในการใช้ AI ช่วยสร้าง Alt Text สำหรับรูปภาพ ซึ่งจะช่วยเรื่อง SEO และ Accessibility ได้มาก
• Advanced Responsive Images: การสร้าง `srcset` และ `sizes` ที่เหมาะสมกับหน้าจอของผู้ใช้แต่ละคนได้ดียิ่งขึ้น เพื่อโหลดรูปภาพขนาดที่พอดีที่สุด
• Lazy Loading และ Priority Loading ที่ปรับแต่งได้: สามารถควบคุมการโหลดรูปภาพได้อย่างละเอียดมากขึ้น เพื่อให้รูปภาพที่สำคัญโหลดก่อน และรูปภาพอื่น ๆ โหลดเมื่อจำเป็น

ตัวอย่าง `next/image` (พื้นฐาน):

import Image from 'next/image';

export default function ProductDetail({ product }) {
  return (
    <div>
      <h2>{product.name}</h2>
      <Image
        src={product.imageUrl}
        alt={product.imageAlt || `Image of ${product.name}`}
        width={500}
        height={300}
        priority={true} // Load this image with high priority
        className="rounded-lg shadow-md"
      />
      <p>{product.description}</p>
    </div>
  );
}

`next/script` ที่ควบคุมได้มากขึ้น

`next/script` ช่วยให้คุณสามารถโหลด External Scripts (เช่น Google Analytics, Stripe JS) ได้อย่างเหมาะสม โดยไม่บล็อกการโหลดหน้าเว็บ การปรับปรุงใน Next.js 15 อาจรวมถึง:

• Improved Hydration Control: การผสานรวมกับการ Hydration ของ React ได้ดียิ่งขึ้น ทำให้สคริปต์ทำงานในเวลาที่เหมาะสมที่สุด
• Better Error Handling: การจัดการข้อผิดพลาดเมื่อสคริปต์ภายนอกโหลดไม่สำเร็จหรือทำงานผิดพลาด
• Strategic Loading: ตัวเลือกในการโหลดสคริปต์แบบ `beforeInteractive`, `afterInteractive`, `lazyOnload` หรือ `worker` ที่มีประสิทธิภาพยิ่งขึ้น

import Script from 'next/script';

export default function MyPage() {
  return (
    <>
      <h1>Welcome to my page!</h1>
      <p>This is some content.</p>

      <Script 
        src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" 
        strategy="afterInteractive" 
      />
      <Script id="google-analytics-script" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'GA_MEASUREMENT_ID');
        `}
      </Script>

      <Script 
        src="https://js.stripe.com/v3/" 
        strategy="lazyOnload" 
        onLoad={() => console.log('Stripe script loaded!')}
      />
    </>
  );
}

`next/font` และการจัดการ Font ที่ดีขึ้น

`next/font` เป็นเครื่องมือที่ยอดเยี่ยมในการจัดการ Web Fonts โดยไม่เกิด Cumulative Layout Shift (CLS) และช่วยเพิ่มประสิทธิภาพการโหลด Font ครับ ใน Next.js 15 อาจมีการปรับปรุงเพิ่มเติม เช่น:

• Enhanced Font Loading Strategies: การโหลด Font ที่ชาญฉลาดขึ้น เช่น การ Preload Font ที่สำคัญ หรือการใช้ Font Swap อย่างมีประสิทธิภาพมากขึ้น
• Variable Font Support: การสนับสนุน Variable Fonts ที่ดีขึ้น เพื่อลดขนาดไฟล์และเพิ่มความยืดหยุ่นในการออกแบบ

import { Inter, Space_Grotesk } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
      <body className="font-sans text-gray-800">
        {children}
      </body>
    </html>
  );
}

ด้วยการใช้ `next/font` คุณสามารถมั่นใจได้ว่า Font ของคุณจะถูกโหลดอย่างมีประสิทธิภาพสูงสุด โดยไม่ส่งผลกระทบต่อ Performance ของเว็บไซต์ครับ

กลยุทธ์ Caching ที่ปรับปรุงใหม่

Caching เป็นหัวใจสำคัญของการสร้างเว็บแอปพลิเคชันที่รวดเร็วและมีประสิทธิภาพ Next.js 15 ได้รับการปรับปรุงกลยุทธ์ Caching ให้มีความลึกและซับซ้อนมากยิ่งขึ้น โดยผสานรวมกับกลไก Caching ใหม่ ๆ ของ React 19 และปรับปรุง Caching ทั้งฝั่ง Client และ Server

Memoization และ Client Cache

React 19 มาพร้อมกับการปรับปรุงในส่วนของ Memoization ซึ่งช่วยให้ Component และผลลัพธ์ของการคำนวณถูก Cache ไว้ได้นานขึ้นหากไม่มีการเปลี่ยนแปลง Dependency ทำให้การ Render ฝั่ง Client มีประสิทธิภาพมากขึ้น

• `memo()` และ `useMemo()` ที่ฉลาดขึ้น: React อาจมีการปรับปรุงกลไกภายในที่ทำให้ `memo()` และ `useMemo()` ทำงานได้มีประสิทธิภาพยิ่งขึ้น
• Client-Side Data Cache: สำหรับข้อมูลที่ Fetch มาจาก Server Components หรือ Server Actions แล้วถูกส่งมายัง Client, Next.js จะพยายาม Cache ข้อมูลเหล่านั้นในหน่วยความจำของ Client เพื่อลดการ Fetch ซ้ำหากข้อมูลยังไม่หมดอายุ

Server Cache และ Data Revalidation

Next.js 15 ยังคงยกระดับ Server Cache และกลไก Data Revalidation ให้ทรงพลังกว่าเดิม ซึ่งรวมถึง:

• Full Route Cache: Next.js จะ Cache ผลลัพธ์การ Render ของ Server Components สำหรับแต่ละ Route ทั้งหมด
• Data Cache: ข้อมูลที่ Fetch ด้วย `fetch()` API ใน Server Components จะถูก Cache โดยอัตโนมัติ และสามารถตั้งค่า `revalidate` option ได้
• `revalidatePath()` / `revalidateTag()`: เครื่องมือที่จำเป็นสำหรับการ Invalidating Cache เมื่อข้อมูลมีการเปลี่ยนแปลง ช่วยให้ข้อมูลบนหน้าเว็บเป็นปัจจุบันอยู่เสมอ
• Stale-While-Revalidate (SWR) on the Server: Next.js ใช้กลยุทธ์ SWR เพื่อให้บริการข้อมูลที่ Cache ไว้ทันทีและทำการ Revalidate ข้อมูลในเบื้องหลัง หากข้อมูลใหม่พร้อมก็จะอัปเดตให้อัตโนมัติ

การปรับปรุง Caching เหล่านี้ทำงานร่วมกันเพื่อลดเวลาในการโหลดหน้าเว็บ, ลดภาระงานบน Server และมอบประสบการณ์ที่รวดเร็วทันใจให้กับผู้ใช้ครับ การทำความเข้าใจและใช้งานกลยุทธ์ Caching เหล่านี้อย่างถูกต้องจะเป็นกุญแจสำคัญในการสร้างแอปพลิเคชัน Next.js 15 ที่มีประสิทธิภาพสูงสุดครับ เรียนรู้เพิ่มเติมเกี่ยวกับ Next.js Caching

Metadata API ที่ยืดหยุ่นและทรงพลัง

Next.js 15 ยังคงให้ความสำคัญกับการจัดการ Metadata (เช่น `