SSG, SSR และ ISR

กลยุทธ์การแสดงผลสามแบบ

SSG — การสร้างเมื่อสร้างแอป

SSG ในตัวจัดการเส้นทางแบบหน้า

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG ในตัวจัดการเส้นทางของแอป

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — การสร้างต่อคำขอ

SSR ในตัวจัดการเส้นทางแบบหน้า

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR ในตัวจัดการเส้นทางของแอป

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — ข้อดีของทั้งสองแบบ

ISR ในตัวจัดการเส้นทางแบบหน้า

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR ในตัวจัดการเส้นทางของแอป

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

การตรวจสอบใหม่ตามคำขอ

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

การเลือกกลยุทธ์ที่เหมาะสม

ตรวจสอบความเข้าใจ

ทบทวน: SSG, SSR, ISR