[/\/] fetch 옵션의 필요성

Next 14버전에서는

fetch 옵션 기본값을 SSG 렌더링처럼 정적 데이터를 빌드하게 두었다.

하지만 실제로 아무런 옵션을 적지 않았을 때, 예상치 않은 문제가 발생할 수 있다.

---

 

아래 로직은 fetch 옵션을 주지 않고 SSG 렌더링을 구현하였다.

// SSG > page.tsx

import { Post } from "@/types/type";
import React from "react";

const SSGPage = async () => {
  const response = await fetch("http://localhost:4000/posts", {
    cache: "force-cache",
  });
  const data: Post[] = await response.json();
  console.log("data", data);

  return (
    <>
      <div>SSGPage</div>
      <div>{JSON.stringify(data)}</div>
      ⭐️ SSR 컴포넌트 (Test.tsx) 들어갈 자리 ⭐️ 
    </>
  );
};

export default SSGPage;

export default SSGPage;

빌드 후 SSG 페이지가 Static(정적)으로 잘 렌더링 되었다.

 

 

⭐️표시한 자리에 { cache: "no-store" } 옵션을 준 SSR 렌더링 컴포넌트를 import 하여 추가하였다.

// Test.tsx

import { Post } from "@/types/type";
import React from "react";

const Test = async () => {
  const response = await fetch("http://localhost:4000/posts", {
    cache: "no-store",
  });
  const data: Post[] = await response.json();
  console.log("data", data);

  return (
    <>
      <div>Test</div>
      <div>{JSON.stringify(data)}</div>
    </>
  );
};

export default Test;

빌드 후 SSG 페이지가 Dynamic(동적)으로 바뀌었다.

 

📌즉, 정적인 페이지에 동적인 컴포넌트를 추가하면 페이지 전체가 동적으로 바뀐다 !

그렇다면, 데이터를 추가했을 때는 어떻게 작동할까?

 

🤔예상 작동

기존 SSG의 html요소 (JSON.stringify 부분)은 변하지 않고 고정,

추가한 동적 컴포넌트 (Test.tsx)에만 값이 추가 될 것으로 예상했다.

 

🚨실제 작동

데이터 추가 후 새로고침 시 전체 페이지(html + 동적 컴포넌트)에 값이 추가되었다.

 

 

📌해결 방법

fetch 옵션을 { cache: "force-cache" } 로 두어 빌드하니 기존 html은 고정, 동적 컴포넌트만 변화하는 모습을 보인다.

// SSG > page.tsx

import { Post } from "@/types/type";
import React from "react";
import Test from "./Test";

const SSGPage = async () => {
  const response = await fetch("http://localhost:4000/posts", {
    cache: "force-cache", ⭐️추가
  });
  const data: Post[] = await response.json();
  console.log("data", data);

  return (
    <>
      <div>SSGPage</div>
      <div>{JSON.stringify(data)}</div>
      <Test />
    </>
  );
};

export default SSGPage;

 

 

 

14버전 Next에서 패치 옵션을 아무것도 주지 않았을 때 “force-cache” 옵션을 준 듯 정적인 html이 생성되었지만,

동적인 컴포넌트가 추가되었을 때 페이지 전체가 변동되는 문제가 발생했다.

따라서 혹시 모를 상황을 대비해 패치 옵션을 정확하게 명시하는 것이 필요하다고 느꼈다.

 

15버전에서는 기본값을 SSR로 주고, SSG를 따로 설정하는 방향으로 개선되었다고 한다.