SSG / SSR / ISR과 Next.js 13버전의 fetch()

SSG - Static Site Generation

사전 렌더링(pre-rendering)을 통해 정적인 페이지를 생성하는 방식
빌드시에 html에 데이터를 담아서 미리 파일을 만들고 접속자들에게 뿌리는 방법. 이미 만들어진 페이지를 여러 사람들에게 보여주는 것.

서버 부담이 적고 응답 속도가 빠르다.

마케팅 페이지나 블로그 등 한번 만들어지고 나서 변화가 없는 사이트에 적합하다.

변경 사항이 있을 때 빌드와 배포를 다시 해야한다.
수시로 변하는 동적 컨텐츠에는 부적합하다.

SSR & CSR

ssr은 서버 부하가 높음.
csr은 초기 로딩 속도가 느리고 검색엔진 최적화에 취약하다.

ISR

점진적으로 정적페이지를 다시 생성해줌.
빌드 시점에 페이지가 생성 (SSG와 동일)
일정 시간이 지난 후 페이지 새로 생성 → 최신 데이터로 업데이트
SSG의 장점은 살리면서 최신 데이터를 반영하는 방식.

Next.js 13버전의 fetch()

async/await을 사용한 fetch() API 사용한다.

app 폴더 사용 시

 getStaticProps, getInitialProps, getServerSideProps 등 이전방법은 지원안됨

Next.js 13 버전부터는 모든 컴포넌트가 서버 컴포넌트이기 때문에 12 버전에서 사용하던 getStaticProps 함수나 getServerSideProps 함수가 필요 없어졌다.

getServerSideProps, getStaticProps 같은 방법은 fetch 옵션을 통해 사용이 가능하다.

💡 fetch('[https://url](https://url/)', option)

이런 방식으로 option을 준다.

staticData의 경우 - { cache: 'force-cache' } (기본값임 생략가능)

const res = await fetch(https://url, { cache: 'force-cache' })
기본 값이므로 생략이 가능하다. getStaticProps와 유사

강의를 듣고 chat GPT에서 더 자세한 설명을 요구했을 때 기본 값이 아니라고 해서 어리둥절… 여튼 기본 값이 맞다. chat GPT에는 next.js 13버전에 대한 내용이 아직 반영 안되어 있는 듯.

export default async function getUserPosts(userId: string) {
 
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, { cache: 'force-cache' })
    if (!res.ok) throw new Error('실패했습니다.')

    return res.json();
}

dynamicData의 경우 - { cache: 'no-store' }

const res = await fetch(https://url, { cache: 'no-store' })
모든 요청에서 최신 데이터를 받아온다. - getServerSideProps와 유사

export default async function getUserPosts(userId: string) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, { cache: 'no-store' })
if (!res.ok) throw new Error('실패했습니다.')

return res.json();
}

revalidatedData의 경우 - { next: { revalidate: 10 } }

const res = await fetch(https://url, { next: { revalidate: 10 } })

revalidate의 값은 초 단위이다.
10초 후 새 요청오면 페이지 새로 생성
revalidate옵션이 있는 getStaticProps와 유사

export default async function getUserPosts(userId: string) {
const res = await fetch(https://jsonplaceholder.typicode.com/posts?userId=${userId}, { cache: 'no-store' })
if (!res.ok) throw new Error('실패했습니다.')
return res.json();
}