https://github.com/0seo8/DreamCoding/commit/9e49e2cbc5d30cdabb7a569c55d62c0d7d95abc7

SSG로 만든 후 fetch를 이용하면서 option이 아닌 따로 revalidate를 사용하지 않는 경우, 얼마만큼 자주 렌더링을 할건지를 fetch에서 결정지을 수 있습니다.

import React from "react";
import Link from "next/link";
import { getProducts } from "@/service/prdoucts";
import styles from "./page.module.css";

// 여기 대신 
// export const revalidate = 3;

export default async function ProductsPage() {
  const products = await getProducts();
// 여기서 직접 option으로 전달해서 사용을 할 수 있습니다.
  const res = await fetch(`https://meowfacts.herokuapp.com`, {
    next: { revalidate: 3 },
  });
  const data = await res.json();
  const factText = data.data[0];

  return (
    <>
      <h1>제품 소개 페이지!</h1>
      <ul>
        {products.map(({ id, name }, index) => (
          <li key={index}>
            <Link href={`products/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>
      <article className={styles.article}>{factText}</article>
    </>
  );
}

SSR

const res = await fetch(`https://meowfacts.herokuapp.com`, {
  next: { revalidate: 0 },
});

//은 아래 코드와 동일합니다.
const res = await fetch(`https://meowfacts.herokuapp.com`, {
  cache: "no-store"
});

CSR

https://github.com/0seo8/DreamCoding/commit/7f347c0a037a5550663649fc42c656414062713e