ISR ба revalidation

Өмнөх хичээлд Next.js-н кэш систем хэрхэн ажилладгийг суралцсан. Энэ хичээлд кэшийг хэзээ, хэрхэн шинэчлэх талаар гүнзгийрэн судална. ISR (Incremental Static Regeneration) бол статик хурд болон шинэ өгөгдлийн гайхалтай хослол юм.

ISR гэж юу вэ?

ISR нь Next.js-н хамгийн хүчирхэг онцлогуудын нэг. Хуудсыг нэг удаа build хийж статик HTML болгон хадгалдаг — ингэснээр маш хурдан ачаалагддаг. Гэхдээ тодорхой хугацааны дараа арын дэвсгэрт дахин build хийж шинэ өгөгдлөөр солидог.

Хэрэглэгч хуудас руу орно
        ↓
Кэшлэгдсэн HTML шуурхай харуулна  ← хурдан!
        ↓ (арын дэвсгэрт)
Тохируулсан хугацаа өнгөрсөн бол:
Next.js серверт шинэ HTML үүсгэнэ
        ↓
Дараагийн хэрэглэгч шинэ хуудас харна

Нэг л тохиргоогоор хэрэгжүүлнэ:

// app/courses/page.tsx
export const revalidate = 3600; // 1 цаг тутамд шинэчлэнэ

export default async function CoursesPage() {
  const courses = await getCourses(); // кэшлэгдсэн, 1 цагт нэг удаа дахин татна

  return (
    <main>
      <h1>Сургалтууд</h1>
      {courses.map((course) => (
        <div key={course.slug}>{course.title}</div>
      ))}
    </main>
  );
}

revalidate = 3600 гэдэг нь "3600 секунд (1 цаг) тутамд шинэчлэ" гэсэн утгатай. Хэрэв revalidate = 0 бол кэш огт хийхгүй — хүсэлт бүрт серверт шинэ өгөгдөл татна.

On-demand revalidation

Заримдаа хугацаагаар биш, өгөгдөл өөрчлөгдсөн тэр даруйд кэшийг шинэчлэх хэрэгтэй болдог. Жишээлбэл нийтлэл шинэ гарахад сайт тэр даруй шинэчлэгдэх ёстой. Үүнд revalidatePath болон revalidateTag ашигладаг.

revalidatePath

Тодорхой хуудасны кэшийг шинэчлэнэ:

// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { path } = await request.json();

  revalidatePath(path); // тухайн хуудасны кэшийг устгана

  return NextResponse.json({ revalidated: true });
}

Ингэснээр /api/revalidate руу { path: '/courses' } илгээхэд /courses хуудасны кэш шинэчлэгдэнэ.

revalidateTag

fetch дуудлагад tag тааруулж, дараа нь тэр tag-г шинэчлэх боломжтой:

// lib/courses.ts
export async function getCourses() {
  const res = await fetch("https://api.example.com/courses", {
    next: { tags: ["courses"] }, // tag нэмэв
  });
  return res.json();
}

// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";

export async function POST() {
  revalidateTag("courses"); // 'courses' tag-тай бүх fetch-г шинэчлэнэ
  return NextResponse.json({ revalidated: true });
}

revalidateTag нь олон хуудас нэг л tag ашигладаг үед маш тохиромжтой — нэг дуудлагаар бүгдийг шинэчилнэ.

revalidate утгуудыг харьцуулах

| Утга | Утга | Хэрэглэх үе | | -------------------- | ----------------------------- | ----------------------------- | | revalidate = false | Хэзээ ч шинэчлэхгүй (default) | Хэзээ ч өөрчлөгдөхгүй контент | | revalidate = 0 | Кэш хийхгүй, шуурхай | Өгөгдөл байнга өөрчлөгддөг | | revalidate = 60 | 60 секунд тутамд | Хагас шинэ контент | | revalidate = 3600 | 1 цаг тутамд | Цөөн өөрчлөгддөг контент |

Дараагийн хичээлд:

Server Action гэж юу болохыг судална. Form submit хийхдээ API route бичихгүйгээр серверийн function-г шууд дуудах аргыг ойлгоно.