Next.js - fetch를 이용한 SSG,ISR,SSR

fetch 를 사용해 SSG, ISR, SSR 페이지를 만들어보겠습니다.

페이지가 정적인지 아닌지 확인하기 위해 랜덤 API 를 호출해보겠습니다.

코드를 보게되면 상단에 export const revalidate 가 있는걸 확인 하실 수 있습니다.

레이아웃이나 페이지에 위와 같이 작성하게 되면 숫자에 따라서 SSG, ISR 등을 설정 할 수 있습니다. 참고하기 : revalidate

하지만 지금 확인할 필요는 없지만 적어놓은 이유는 Next 를 사용하여 만들 때 yarn build & start 를 사용하여 어떤 페이지인지 확인 합니다. (SSG 로 컴파일 되기때문에 새로고침해도 실시간 데이터를 불러오지 못합니다.)

yarn dev 를 사용해서 작업 할 때는 SSR처럼 요청할 때 마다 변화가 있기 때문 입니다. 하지만 yarn dev 를 작업을 했으나 새로고침해도 SSG 처럼 정적으로 페이지가 보였습니다. 이를 해결하기 위해 적어놓은 코드 입니다.

하지만 우리는 fetch에 대해 아직 모르기 때문에 1번 방법으로 하겠습니다.

export const revalidate 를 주석처리 한 후 yarn build & start 를 하고 확인하면 브라우저에 요청을 해도 렌더링이 빌드 시점에서 되기 때문에 화면에 변화가 없습니다.

서버가 빌드 될 때 처음 fetch를 하고 그 데이터로 HTML를 미리 만들어둡니다. 하지만 13버전부터 렌더링 일어나는 시점을 fetch에서 결정 할 수 있습니다.

fetch 두 번째 옵션에 객체 형태로 next : {revalidate : 시간} 명시를 하면 명시한 시간 간격 만큼 데이터를 가져옵니다.

확인하기 위해 yarn build & start 를 합니다.

지정한 시간이 지나고 새로고침을 하면 글귀가 달라지는 것을 볼 수 있습니다.

next : {revalidate : 0} 을 이용하면 SSR이 됩니다.

요청이 올 때 마다 revalidate 를 하게 됩니다. revalidate 를 한다는 것은 곧 HTML을 새롭게 만든다는 뜻 입니다.

확인 할 때는 역시 yarn build & start

동일하게 적용 할 수 있는 방법은 cache : no-store 라고 지정하면 됩니다.

각 렌더링 방식마다 다르게 선언했어야 하는데 fetch로 편하게 지정 할 수 있게 된 것 같다.

Table of contents