Next.js App Router: SSR กับ SSG - คู่มือฉบับสมบูรณ์

Next.js App Router ได้ปฏิวัติวิธีการสร้างแอปพลิเคชัน React ของเรา โดยมอบประสิทธิภาพ ความยืดหยุ่น และประสบการณ์ของนักพัฒนาที่ดีขึ้น หัวใจสำคัญของสถาปัตยกรรมใหม่นี้คือกลยุทธ์การเรนเดอร์อันทรงพลังสองรูปแบบ: Server-Side Rendering (SSR) และ Static Site Generation (SSG) การเลือกแนวทางที่เหมาะสมเป็นสิ่งสำคัญอย่างยิ่งในการเพิ่มประสิทธิภาพ SEO และประสบการณ์ผู้ใช้ของแอปพลิเคชันของคุณ คู่มือฉบับสมบูรณ์นี้จะเจาะลึกรายละเอียดของ SSR และ SSG ในบริบทของ Next.js App Router เพื่อช่วยให้คุณตัดสินใจได้อย่างมีข้อมูลสำหรับโปรเจกต์ของคุณ

ทำความเข้าใจพื้นฐาน: SSR และ SSG

ก่อนที่จะลงลึกในรายละเอียดของ Next.js App Router เรามาทำความเข้าใจเกี่ยวกับ SSR และ SSG ให้ชัดเจนกันก่อน

Server-Side Rendering (SSR)

SSR คือเทคนิคที่คอมโพเนนต์ของ React ถูกเรนเดอร์เป็น HTML บนเซิร์ฟเวอร์สำหรับทุกๆ คำขอ (request) จากนั้นเซิร์ฟเวอร์จะส่ง HTML ที่เรนเดอร์เสร็จสมบูรณ์แล้วไปยังเบราว์เซอร์ของไคลเอ็นต์ ซึ่งจะทำการ hydrate หน้าเว็บและทำให้สามารถโต้ตอบได้

ลักษณะสำคัญของ SSR:

• เนื้อหาแบบไดนามิก: เหมาะสำหรับแอปพลิเคชันที่มีเนื้อหาเปลี่ยนแปลงบ่อยหรือเป็นส่วนตัว เช่น หน้าสินค้าอีคอมเมิร์ซที่มีการเปลี่ยนแปลงราคาแบบไดนามิก ฟีดโซเชียลมีเดีย หรือแดชบอร์ดของผู้ใช้
• ข้อมูลแบบเรียลไทม์: เหมาะสำหรับแอปพลิเคชันที่ต้องการอัปเดตข้อมูลแบบเรียลไทม์ ตัวอย่างเช่น ผลคะแนนกีฬาสด ตัวติดตามตลาดหุ้น หรือโปรแกรมแก้ไขเอกสารร่วมกัน
• ปรับปรุง SEO: Search engine crawler สามารถจัดทำดัชนี HTML ที่เรนเดอร์เสร็จสมบูรณ์แล้วได้อย่างง่ายดาย ซึ่งนำไปสู่ประสิทธิภาพ SEO ที่ดีขึ้น
• เวลาในการโหลดเริ่มต้นช้ากว่า: เนื่องจากเซิร์ฟเวอร์ต้องเรนเดอร์หน้าเว็บสำหรับทุกคำขอ เวลาในการโหลดเริ่มต้นจึงอาจช้ากว่าเมื่อเทียบกับ SSG
• ความต้องการด้านเซิร์ฟเวอร์: SSR ต้องการโครงสร้างพื้นฐานของเซิร์ฟเวอร์เพื่อจัดการกระบวนการเรนเดอร์

Static Site Generation (SSG)

ในทางกลับกัน SSG เกี่ยวข้องกับการเรนเดอร์คอมโพเนนต์ของ React ล่วงหน้าเป็น HTML ณ เวลาสร้าง (build time) จากนั้นไฟล์ HTML ที่สร้างขึ้นจะถูกให้บริการโดยตรงจาก CDN หรือเว็บเซิร์ฟเวอร์

ลักษณะสำคัญของ SSG:

• เนื้อหาแบบสถิต: เหมาะที่สุดสำหรับเว็บไซต์ที่มีเนื้อหาที่ไม่เปลี่ยนแปลงบ่อย ตัวอย่างเช่น บล็อก เว็บไซต์เอกสาร พอร์ตโฟลิโอ และเว็บไซต์การตลาด
• เวลาในการโหลดเริ่มต้นที่รวดเร็ว: เนื่องจากหน้าเว็บถูกเรนเดอร์ไว้ล่วงหน้า จึงสามารถให้บริการได้อย่างรวดเร็ว ส่งผลให้มีประสิทธิภาพที่ยอดเยี่ยม
• ปรับปรุง SEO: เช่นเดียวกับ SSR, search engine crawler สามารถจัดทำดัชนี HTML ที่เรนเดอร์ไว้ล่วงหน้าได้อย่างง่ายดาย
• ความสามารถในการขยายขนาด: เว็บไซต์ SSG สามารถขยายขนาดได้สูงเนื่องจากสามารถให้บริการจาก CDN ได้อย่างง่ายดาย
• เวลาในการสร้าง (Build Time): กระบวนการสร้างอาจใช้เวลานานขึ้นสำหรับเว็บไซต์ขนาดใหญ่ที่มีเนื้อหาแบบสถิตจำนวนมาก

SSR กับ SSG ใน Next.js App Router: ความแตกต่างที่สำคัญ

The Next.js App Router นำเสนอแนวทางใหม่สำหรับการกำหนดเส้นทาง (routes) และการจัดการการดึงข้อมูล เรามาดูกันว่า SSR และ SSG ถูกนำมาใช้ในสภาพแวดล้อมใหม่นี้อย่างไร และมีความแตกต่างที่สำคัญอย่างไรบ้าง

การดึงข้อมูลใน App Router

App Router มีแนวทางที่เป็นหนึ่งเดียวในการดึงข้อมูลโดยใช้ไวยากรณ์ (syntax) `async/await` ภายใน Server Components ซึ่งช่วยให้กระบวนการดึงข้อมูลง่ายขึ้นไม่ว่าคุณจะใช้ SSR หรือ SSG ก็ตาม

Server Components: Server Components เป็นคอมโพเนนต์ React ประเภทใหม่ที่ทำงานบนเซิร์ฟเวอร์เท่านั้น ซึ่งช่วยให้คุณสามารถดึงข้อมูลได้โดยตรงภายในคอมโพเนนต์ของคุณโดยไม่จำเป็นต้องสร้าง API routes

ตัวอย่าง (SSR):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

ในตัวอย่างนี้ ฟังก์ชัน `getBlogPost` จะดึงข้อมูลบล็อกโพสต์บนเซิร์ฟเวอร์สำหรับทุกคำขอ การใช้ `export default async function BlogPost` บ่งชี้ว่านี่คือ Server Component

ตัวอย่าง (SSG):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export async function generateStaticParams() {
  const posts = await getAllBlogPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

ในที่นี้ ฟังก์ชัน `generateStaticParams` ถูกใช้เพื่อเรนเดอร์บล็อกโพสต์ล่วงหน้าสำหรับ slugs ที่มีอยู่ทั้งหมด ณ เวลาสร้าง (build time) ซึ่งเป็นสิ่งสำคัญสำหรับ SSG

กลยุทธ์การแคช (Caching)

Next.js App Router มีกลไกการแคชในตัวเพื่อเพิ่มประสิทธิภาพสำหรับทั้ง SSR และ SSG การทำความเข้าใจกลไกเหล่านี้เป็นสิ่งสำคัญ

Data Cache: โดยค่าเริ่มต้น ข้อมูลที่ดึงโดยใช้ `fetch` ใน Server Components จะถูกแคชโดยอัตโนมัติ ซึ่งหมายความว่าคำขอครั้งต่อไปสำหรับข้อมูลเดียวกันจะถูกให้บริการจากแคช ซึ่งช่วยลดภาระบนแหล่งข้อมูลของคุณ

Full Route Cache: ผลลัพธ์ที่เรนเดอร์ทั้งหมดของ route สามารถถูกแคชได้ ซึ่งช่วยเพิ่มประสิทธิภาพให้ดียิ่งขึ้น คุณสามารถกำหนดค่าพฤติกรรมการแคชได้โดยใช้ตัวเลือก `cache` ในไฟล์ `route.js` หรือ `page.js` ของคุณ

ตัวอย่าง (การปิดใช้งานแคช):

// app/blog/[slug]/page.js

export const fetchCache = 'force-no-store';

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

ในกรณีนี้ `fetchCache = 'force-no-store'` จะปิดการใช้งานการแคชสำหรับ route นี้โดยเฉพาะ เพื่อให้แน่ใจว่าข้อมูลจะถูกดึงมาใหม่จากเซิร์ฟเวอร์เสมอ

ฟังก์ชันไดนามิก (Dynamic Functions)

คุณสามารถประกาศให้ route เป็นแบบไดนามิก ณ เวลาทำงาน (runtime) ได้โดยการตั้งค่าตัวเลือก `dynamic` ใน route segment config ซึ่งมีประโยชน์ในการแจ้งให้ Next.js ทราบว่า route นั้นใช้ฟังก์ชันไดนามิกและควรได้รับการจัดการที่แตกต่างออกไปในเวลาสร้าง (build time)

ตัวอย่าง (Dynamic route segment):

// app/blog/[slug]/page.js
export const dynamic = 'force-dynamic'; // static by default, unless reading the request

import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Incremental Static Regeneration (ISR)

App Router นำเสนอ Incremental Static Regeneration (ISR) เป็นแนวทางแบบไฮบริดที่รวมข้อดีของทั้ง SSR และ SSG เข้าไว้ด้วยกัน ISR ช่วยให้คุณสามารถสร้างหน้าเว็บแบบสถิตในขณะที่ยังสามารถอัปเดตหน้าเว็บเหล่านั้นในเบื้องหลังตามช่วงเวลาที่กำหนดได้

ISR ทำงานอย่างไร:

1. คำขอแรกไปยังหน้าเว็บจะกระตุ้นการสร้างแบบสถิต
2. คำขอต่อๆ มาจะถูกให้บริการจากแคชที่สร้างขึ้นแบบสถิต
3. ในเบื้องหลัง Next.js จะสร้างหน้าเว็บขึ้นใหม่หลังจากช่วงเวลาที่กำหนด (revalidate time)
4. เมื่อการสร้างใหม่เสร็จสมบูรณ์ แคชจะถูกอัปเดตด้วยเวอร์ชันใหม่ของหน้าเว็บ

การนำ ISR ไปใช้งาน:

เพื่อเปิดใช้งาน ISR คุณต้องกำหนดค่าตัวเลือก `revalidate` ในฟังก์ชัน `getStaticProps` ของคุณ (ในไดเรกทอรี `pages`) หรือตัวเลือก `fetch` (ในไดเรกทอรี `app`)

ตัวอย่าง (ISR ใน App Router):

// app/blog/[slug]/page.js
import { getBlogPost } from './data';

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export const revalidate = 60; // Revalidate every 60 seconds

ตัวอย่างนี้กำหนดค่า ISR ให้ทำการ revalidate บล็อกโพสต์ทุกๆ 60 วินาที ซึ่งช่วยให้เนื้อหาแบบสถิตของคุณสดใหม่อยู่เสมอโดยไม่ต้องสร้างเว็บไซต์ใหม่ทั้งหมด

การเลือกกลยุทธ์ที่เหมาะสม: คู่มือเชิงปฏิบัติ

การเลือกระหว่าง SSR, SSG และ ISR ขึ้นอยู่กับความต้องการเฉพาะของแอปพลิเคชันของคุณ นี่คือกรอบการตัดสินใจ:

เมื่อใดควรใช้ SSR:

• เนื้อหาแบบไดนามิก: แอปพลิเคชันที่มีเนื้อหาเปลี่ยนแปลงบ่อยหรือเป็นส่วนตัว
• ข้อมูลแบบเรียลไทม์: แอปพลิเคชันที่ต้องการอัปเดตข้อมูลแบบเรียลไทม์
• เนื้อหาเฉพาะผู้ใช้: เว็บไซต์อีคอมเมิร์ซที่ต้องแสดงคำแนะนำสินค้าส่วนบุคคลหรือข้อมูลบัญชี
• หน้าที่สำคัญต่อ SEO ที่มีองค์ประกอบแบบไดนามิก: เพื่อให้แน่ใจว่าหน้าที่สำคัญถูกจัดทำดัชนีอย่างถูกต้องแม้ว่าจะต้องอาศัยข้อมูลส่วนบุคคลก็ตาม

ตัวอย่าง: เว็บไซต์ข่าวที่มีบทความอัปเดตตลอดเวลาและการแจ้งเตือนข่าวด่วน นอกจากนี้ยังเหมาะสำหรับฟีดโซเชียลมีเดียที่รีเฟรชแบบเรียลไทม์

เมื่อใดควรใช้ SSG:

• เนื้อหาแบบสถิต: เว็บไซต์ที่มีเนื้อหาที่ไม่เปลี่ยนแปลงบ่อย
• เว็บไซต์การตลาด: เว็บไซต์องค์กร แลนดิ้งเพจ และเว็บไซต์ส่งเสริมการขาย
• บล็อกและเว็บไซต์เอกสาร: เว็บไซต์ที่มีบทความ บทแนะนำ และเอกสารประกอบ
• เว็บไซต์ที่ต้องการประสิทธิภาพสูงสุด: SSG มอบประสิทธิภาพที่เหนือกว่าเนื่องจากลักษณะที่ถูกเรนเดอร์ไว้ล่วงหน้า

ตัวอย่าง: เว็บไซต์พอร์ตโฟลิโอส่วนตัวที่แสดงทักษะและโปรเจกต์ของคุณ หรือหน้า "เกี่ยวกับเรา" ของบริษัทซึ่งไม่ค่อยมีการเปลี่ยนแปลง

เมื่อใดควรใช้ ISR:

• การอัปเดตเนื้อหาเป็นระยะ: เว็บไซต์ที่มีเนื้อหาที่ต้องอัปเดตเป็นระยะแต่ไม่ต้องการการอัปเดตแบบเรียลไทม์
• สร้างสมดุลระหว่างประสิทธิภาพและความสดใหม่: เมื่อคุณต้องการประโยชน์ด้านประสิทธิภาพของ SSG แต่ก็ต้องการให้เนื้อหาของคุณค่อนข้างทันสมัยอยู่เสมอ
• เว็บไซต์ขนาดใหญ่ที่มีการอัปเดตบ่อย: ISR หลีกเลี่ยงเวลาในการสร้างที่ยาวนานโดยการสร้างหน้าเว็บใหม่ทีละส่วน

ตัวอย่าง: เว็บไซต์อีคอมเมิร์ซที่มีราคาสินค้าที่อัปเดตทุกวัน หรือบล็อกที่มีการเผยแพร่บทความใหม่สัปดาห์ละสองสามครั้ง

แนวทางปฏิบัติที่ดีที่สุดสำหรับการนำ SSR และ SSG ไปใช้ใน Next.js App Router

เพื่อให้มั่นใจถึงประสิทธิภาพสูงสุดและความสามารถในการบำรุงรักษา ควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้เมื่อนำ SSR และ SSG ไปใช้ใน Next.js App Router:

• เพิ่มประสิทธิภาพการดึงข้อมูล: ลดปริมาณข้อมูลที่ดึงบนเซิร์ฟเวอร์ให้น้อยที่สุดเพื่อลดเวลาในการเรนเดอร์ ใช้ GraphQL หรือเทคนิคอื่นๆ เพื่อดึงเฉพาะข้อมูลที่จำเป็น
• ใช้ประโยชน์จากการแคช: ใช้กลไกการแคชในตัวของ App Router เพื่อหลีกเลี่ยงการดึงข้อมูลและการเรนเดอร์ที่ไม่จำเป็น
• ใช้ Server Components อย่างชาญฉลาด: ใช้ Server Components สำหรับการดึงข้อมูลและตรรกะที่ไม่ต้องการการโต้ตอบฝั่งไคลเอ็นต์
• เพิ่มประสิทธิภาพรูปภาพ: ใช้คอมโพเนนต์ Image ของ Next.js เพื่อปรับแต่งรูปภาพให้เหมาะกับอุปกรณ์และขนาดหน้าจอต่างๆ
• ตรวจสอบประสิทธิภาพ: ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อระบุและแก้ไขปัญหาคอขวดด้านประสิทธิภาพ
• พิจารณาการแคชด้วย CDN: สำหรับ SSG และ ISR ให้ใช้ประโยชน์จาก CDN เพื่อกระจายเนื้อหาสถิตของคุณไปทั่วโลกและเพิ่มประสิทธิภาพให้ดียิ่งขึ้น Cloudflare, Akamai และ AWS CloudFront เป็นตัวเลือกที่ได้รับความนิยม
• ให้ความสำคัญกับ Core Web Vitals: เพิ่มประสิทธิภาพแอปพลิเคชันของคุณสำหรับ Core Web Vitals (Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) เพื่อปรับปรุงประสบการณ์ผู้ใช้และ SEO

ข้อควรพิจารณาขั้นสูง

Edge Functions

Next.js ยังรองรับ Edge Functions ซึ่งช่วยให้คุณสามารถรันฟังก์ชันแบบ serverless บนเครือข่าย Edge ได้ ซึ่งมีประโยชน์สำหรับงานต่างๆ เช่น การทดสอบ A/B, การพิสูจน์ตัวตน และการปรับเนื้อหาให้เป็นส่วนตัว

Middleware

Middleware ช่วยให้คุณสามารถรันโค้ดก่อนที่คำขอจะเสร็จสมบูรณ์ คุณสามารถใช้ Middleware สำหรับงานต่างๆ เช่น การพิสูจน์ตัวตน, การเปลี่ยนเส้นทาง (redirection) และ feature flags

Internationalization (i18n)

เมื่อสร้างแอปพลิเคชันสำหรับทั่วโลก การทำให้รองรับหลายภาษา (internationalization) เป็นสิ่งสำคัญ Next.js มีการสนับสนุน i18n ในตัว ซึ่งช่วยให้คุณสามารถสร้างเว็บไซต์เวอร์ชันที่แปลเป็นภาษาท้องถิ่นได้อย่างง่ายดาย

ตัวอย่าง (การตั้งค่า i18n):

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es', 'de'],
    defaultLocale: 'en',
  },
}

ตัวอย่างจากโลกแห่งความเป็นจริง

ลองพิจารณาตัวอย่างจากโลกแห่งความเป็นจริงว่าบริษัทต่างๆ ใช้ SSR, SSG และ ISR กับ Next.js อย่างไร:

• Netflix: ใช้ SSR สำหรับหน้า Landing Page และผลการค้นหาเพื่อให้แน่ใจว่ามี SEO ที่ดีที่สุดและเวลาในการโหลดเริ่มต้นที่รวดเร็ว
• Vercel: ใช้ SSG สำหรับเว็บไซต์เอกสารซึ่งมีเนื้อหาจำนวนมากและไม่เปลี่ยนแปลงบ่อย
• HashiCorp: ใช้ ISR สำหรับบล็อกของพวกเขา ทำให้สามารถเผยแพร่บทความใหม่ๆ ได้อย่างสม่ำเสมอโดยไม่ต้องสร้างเว็บไซต์ใหม่ทั้งหมด

บทสรุป

Next.js App Router นำเสนอแพลตฟอร์มที่ทรงพลังและยืดหยุ่นสำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ การทำความเข้าใจความแตกต่างระหว่าง SSR และ SSG รวมถึงประโยชน์ของ ISR เป็นสิ่งสำคัญในการตัดสินใจอย่างมีข้อมูลเกี่ยวกับกลยุทธ์การเรนเดอร์ของคุณ ด้วยการพิจารณาความต้องการเฉพาะของแอปพลิเคชันของคุณอย่างรอบคอบและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คุณจะสามารถเพิ่มประสิทธิภาพ, SEO และประสบการณ์ผู้ใช้ ซึ่งท้ายที่สุดจะนำไปสู่การสร้างเว็บแอปพลิเคชันที่ประสบความสำเร็จและตอบสนองผู้ชมทั่วโลก

อย่าลืมตรวจสอบประสิทธิภาพของแอปพลิเคชันของคุณอย่างต่อเนื่องและปรับเปลี่ยนกลยุทธ์การเรนเดอร์ตามความจำเป็น ภูมิทัศน์ของการพัฒนาเว็บมีการพัฒนาอยู่ตลอดเวลา ดังนั้นการติดตามเทรนด์และเทคโนโลยีล่าสุดจึงเป็นสิ่งจำเป็นสำหรับความสำเร็จ