1. 개요

Next 서버측에서 빌드타임에 특정 페이지의 랜더링 결과를 캐싱하는 기능

캐싱된 특정 페이지를 다시 요청하면 캐시에 저장된 내용을 전송한다.

2. 특징

Static Page에만 full route cache가 적용된다.

Dynamic page vs Static page

Dynamic Page

특정 페이지가 접속 요청을 받을 때 마다 변화가 생기거나 데이터가 달라질 경우

1. 캐시 되지 않는 Data Fetching을 사용할 경우 ex) {cache:no-store}
2. 동적함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때

Static Page

Dynamic Page가 아니면 모두 Static Page - default

빌드 타임에 풀 라우트 캐시로 저장된다.

Revalidate (갱신)

설정한 시간이 지나면 갱신이 되도록 할 수 있다.

최적화하기

• Dynamic Page를 Static Page로 변경해주면 최적화를 할 수 있다.
  동적함수가 없는 컴포넌트에서 캐시를 저장할 수 있는 항목을 캐싱하도록 설정 (revaliate 옵션도 static으로 반영됨)

• 동적함수가 있는 페이지에서 캐시를 저장하도록 설정하면 조금 더 빠르게 최적화가 가능하다. ({cache:"force-cache"}

• 동적 경로를 가지는 페이지(쿼리스트링 등등)를 Static page로 설정하려면 generateStaticParams라는 약속된 이름의 함수를 통해 return으로 어떤 url 파라미터가 빌드타임에 존재하는지 설정

  	```
  	export function generateStaticParams () {
  	 return [{id:"1"}, {id:"2"}, {id:"3"}]
  	}
  	```

  • 위 함수가 존재하는 페이지는 데이터 캐싱이 되지 않는 페이지라도 강제로 static이 된다.

  • return에는 문자열로만 데이터 설정

  • page router의 getStaticPaths와 비슷

    	generateStaticParams값으로 명시하지 않은 값을 404페이지로 보내려면
    
    	export const dynamicParams = false;
        를 generateStaticParams 위에 입력

번외

빌드타임에 클라이언트 동작을 하는 함수를 불러오려면 오류가 생긴다.
이때 suspense(컴포넌트 스트리밍)로 클라이언트 동작을 하는 컴포넌트를 묶어주면 해결

import {  Suspense } from "react";

<Suspense fallback={<div>Loading...</div>}>
  <Searchbar /> // 쿼리스트링이 있는 컴포넌트
</Suspense>