Incremental Static Regeneration (ISR) adalah fitur di Next.js yang memungkinkan pembaruan halaman statis secara otomatis di background, tanpa perlu build ulang seluruh aplikasi. Ini memberikan kecepatan seperti Static Generation (SSG) tetapi tetap bisa mengupdate data secara dinamis seperti Server-Side Rendering (SSR).

Mengapa lebih memilih metode ini? Karna seperti yang di jelaskan di awal itu sangat membantu tekait cepatnya proses Rendering Page. Yang dimana Data sudah caching oleh Next.js, jadi ketika Page di refresh Server tidak akan memfetching data kembali, data akan di ambil dari caching Server. Namun perlu di ingat konsep dari Revalidate Caching

Contoh Code seperti ini

// page.tsx
const page = async () => {
  const { data, time } = await GetProducts();

  async function onDelete() {
    "use server";

    if (data.length === 0) return; // Hindari error jika data kosong

    const idString = data[0].id;
    await DeleteData(idString);
  }

  return (
    <div>
      <p>Amount Of Data : {data.length}</p>
      <p>Execution Time : {time}</p>

      <ButtonOnClick text="Delete Data" onClicks={onDelete} disabled={data.length === 0} />
    </div>
  );
}

Ini Code component <ButtonOnClick />. Ini hanya bertujuan untuk mempertahankan page.tsx menjadi Server Components

//ButtonOnClick.tsx
"use client";

import { useState } from "react";

export default function ButtonOnClick({
  text,
  onClicks,
  disabled
}: {
  text: string;
  onClicks: (formData: FormData) => Promise<void>;
  disabled?: boolean
}) {
  const [isLoading, setIsLoading] = useState(false);

  async function handleClick() {
    if (isLoading || disabled) return;
    setIsLoading(true);

    const formData = new FormData();
    await onClicks(formData);

    setTimeout(() => {
      setIsLoading(false);
    }, 500);
  }

  return (
    <button
      onClick={handleClick}
      disabled={isLoading || disabled}
      className="px-4 py-2 bg-blutext-white rounded disabled:bg-gray-400"
    >
      {isLoading ? "Processing..." : text}
    </button>
  );
}