fetch를 사용한 SSG, ISR, SSR

[MinJeung-Kim]

🗄️ Server Component

🖐️fetch를 사용한 SSG 렌더링

• revalidate를 해주지 않으면 fetch는 서버가 빌드될때 딱 한번만 네트워크 통신이 일어남.
• 새로고침을 해도 변경된 데이터가 반영되지 않음.

const res = await fetch("https://meowfacts.herokuapp.com");
const data = await res.json();
const factText = data.data[0];

$ npm run build && npm run start

👋fetch를 사용한 ISR 렌더링

• 3초마다 네트워크 통신을 함.

const res = await fetch("https://meowfacts.herokuapp.com", {
    cache:'reload', 
  });
const data = await res.json();
const factText = data.data[0];

🤙fetch를 사용한 SSR 렌더링

• cache:'no-store'를 하면 캐시를 해두지 않기때문에 요청을 할때마다 페이지 렌더링이 됨.

const res = await fetch("https://meowfacts.herokuapp.com", {
    cache:'no-store',
    next: { revalidate: 0 },
  });
const data = await res.json();
const factText = data.data[0];