ปรับจูน App Router ให้เว็บเร็วปรี๊ด ประหยัดทรัพยากร

สวัสดีครับ

วันนี้ ผมมีเรื่องที่อยากจะมาเล่าให้เพื่อนๆ โปรแกรมเมอร์ฟังนะครับ เป็นเรื่องเกี่ยวกับการ 'ปรับจูน App Router' ให้เว็บของเราเนี่ย มันทำงานได้เร็วขึ้นมากๆ ครับ แล้วก็ยังช่วยประหยัดทรัพยากร Server ของเราได้อีกด้วยนะครับ

คืออย่างงี้นะครับ เวลาที่เราทำเว็บด้วยเฟรมเวิร์ค อย่าง Next.js เนี่ย ตัว App Router มันจะเข้ามาช่วยเราจัดเส้นทางต่างๆ ของเว็บได้ง่ายมากๆ เลยนะครับ

แต่ถ้าเราไม่มานั่งดูดีๆ ว่ามันทำงานยังไง แล้วก็ไม่ได้ Optimize มันให้ดีๆ เนี่ย เว็บเราอาจจะกลายเป็นเต่าคลานไปเลย ก็ได้นะ ครับ

งั้นมาดูกันเลยครับ ว่ามีเทคนิคอะไรบ้าง ที่เราสามารถเอาไปใช้ได้จริง กับ App Router ของเรานะครับ

1. แยก Component ที่มัน 'หนักๆ' ออกไปก่อนเลย

หลักการนี้ มันง่ายๆ เลยครับ คือ ส่วนประกอบไหน หรือ Component ไหน ที่มันยังไม่จำเป็นต้องโหลดเข้ามาตั้งแต่แรกเลยเนี่ย ก็ยังไม่ต้องไปโหลดมันเลยนะครับ ให้มันค่อยๆ โหลดเข้ามาตอนที่มันต้องการใช้จริงๆ แบบนี้เราเรียกว่า Dynamic Import หรือว่า Code Splitting นะครับ

แบบนี้มันช่วยให้ Browser ของผู้ใช้งาน โหลดแค่ JavaScript เท่าที่มันจำเป็นต้องใช้จริงๆ ก่อนนะครับ

ตัวอย่างโค้ดนะครับ สำหรับทำ Dynamic Import ใน Next.js:

import dynamic from 'next/dynamic'

const HeavyReport = dynamic(() => import('../components/HeavyReportComponent'), {
  loading: () => <p>กำลัง โหลดรายงาน.. รอแป๊บนะครับ</p>,
  ssr: false, // Component นี้ ไม่จำเป็นต้อง Render ฝั่ง Server นะ
})

function MyDashboard() {
  return (
    <div>
      <h1>หน้า แดชบอร์ดของผม</h1>
      {/* ส่วนนี้จะโหลดเมื่อ Component HeavyReport ถูกเรียกใช้จริง */}
      <HeavyReport />
    </div>
  )
}

export default MyDashboard

แบบนี้นะครับ HeavyReportComponent มันจะถูกโหลดก็ต่อเมื่อ User เข้าไปที่ส่วนนั้นจริงๆ นะครับ ทำให้หน้าแรกๆ ของเรามันโหลดได้เร็วขึ้นมากๆ เลย ครับ

2. ดึงข้อมูลให้ถูกที่ และ ถูกเวลา

ใน App Router ของ Next.js เนี่ย มันมีเรื่องของ Server Components กับ Server Actions ที่ มันเจ๋งมากๆ เลยครับ

เราสามารถใช้มัน ในการดึงข้อมูล หรือ Data Fetching ได้ตั้งแต่ฝั่ง Server เลยนะครับ ทำให้ Client-side JavaScript ของเรามันลดลงไปเยอะเลย ครับ แล้วก็ไม่ต้องไปรอข้อมูลจาก API อีกรอบ ตอนที่ Browser โหลดเสร็จอีกแล้วนะครับ

ตัวอย่างโค้ดนะครับ ถ้าเราใช้ Server Component ดึงข้อมูล Product List:

// app/products/page.tsx (อันนี้เป็น Server Component นะครับ)

async function getProductsList() {
  const res = await fetch('https://api.example.com/products') // ไปดึงข้อมูลมาจาก API นะ
  if (!res.ok) {
    throw new Error('โหลดข้อมูลสินค้า ไม่สำเร็จครับ')
  }
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProductsList()

  return (
    <div>
      <h1>รายการสินค้าทั้งหมด</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name} - ราคา: {product.price} บาท</li>
        ))}
      </ul>
    </div>
  )
}

โค้ด แบบนี้นะครับ ข้อมูลสินค้ามันจะถูกดึงแล้วก็ Render ที่ Server เสร็จก่อนเลย นะครับ จากนั้นค่อยส่ง HTML ที่พร้อมใช้งานแล้ว ไปให้ Client ทำให้หน้าเว็บเรามันพร้อมใช้งานได้เร็วขึ้นจริงๆ นะครับ

3. จัดการ Cache ให้มันฉลาดๆ เข้าไว้

เรื่องของ Cache เนี่ย มันก็เป็นหัวใจสำคัญเลยนะครับ ในการทำ Optimize เนี่ย App Router มันช่วยให้เราจัดการ Cache ได้ดีขึ้นมากๆ เลยครับ

เราสามารถกำหนดให้ข้อมูลมัน Refresh ตัวเองได้ (ที่เรียกว่า Revalidate) หรือเราจะไปตั้งค่า HTTP Caching Headers ที่เหมาะสม ก็ได้นะครับ เพื่อลดการเรียก API ซ้ำๆ ที่ไม่จำเป็นไงครับ

ตัวอย่างการ Revalidate ใน Next.js นะครับ เพื่อให้ข้อมูล บทความอัปเดตเองทุกๆ 1 นาที:

// app/news/[slug]/page.tsx (อันนี้ก็ Server Component อีกเหมือนกันนะครับ)

export const revalidate = 60 // ตั้งให้มัน Revalidate ทุกๆ 60 วินาทีนะครับ

async function getArticleDetail(slug: string) {
  const res = await fetch(`https://api.example.com/articles/${slug}`)
  if (!res.ok) {
    throw new Error('โหลดรายละเอียดบทความ ไม่ได้ครับ')
  }
  return res.json()
}

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const article = await getArticleDetail(params.slug)

  return (
    <div>
      <h2>{article.title}</h2>
      <p>เขียนโดย: {article.author}</p>
      <p>{article.content.substring(0, 200)}...</p>
    </div>
  )
}

จากโค้ดนี้ นะครับ ข้อมูลข่าวสารหรือบทความของเรามันก็จะไม่เก่าเกินไป แล้วก็ยังคงประสิทธิภาพการโหลด ที่รวดเร็วอยู่ได้ ตลอดเวลาเลยครับ

สรุปนะครับ

คือการที่เรามานั่ง Optimize App Router เนี่ย มันช่วยให้เว็บของเราทำงานได้เร็วขึ้นมากๆ เลยนะครับ ไม่ว่าจะเป็นการใช้ Dynamic Import เพื่อโหลด Component เท่าที่มันจำเป็น, จากนั้นก็ใช้การดึงข้อมูลแบบ Server-side เพื่อลดงานฝั่ง Client, แล้วก็การจัดการ Cache ให้มันเหมาะสมเนี่ย ทั้งหมดนี้มันก็จะนำไปสู่ประสบการณ์การใช้งานของผู้ใช้ที่มันดีขึ้นมากๆ เลยนะครับ แล้วก็ยังช่วยให้ประหยัดทรัพยากร Server ของเราไปได้อีกเยอะด้วยนะครับ

ผมอยากให้เพื่อนๆ ลองเอาเทคนิคพวกนี้ ไปปรับใช้กับโปรเจกต์ของตัวเองกันดูนะครับ ถ้ามีคำถามอะไร หรืออยากแลกเปลี่ยนความคิดเห็นเนี่ย ก็มาคุยกันได้เลยนะครับ

ขอบคุณครับ

อ้างอิง: * Next.js Documentation * React Documentation