static rendering, dynamic rendering, cache

next 13 전에는 여러가지 설정방법이 있었는데 13 부터는 바뀌었습니다.

 

1. Nextjs13 에서는 static rendering 이 기본으로 움직입니다.

별도의 fetch 가 없는 페이지의 경우, 유저들한테 그냥 보여줘도 되기 때문에 static rendering 으로 내려주면, html 을 매번 그리지 않아

매우 빠르게 페이지 전송이 가능해집니다.

 

2. 별도의 fetch 가 있는 경우, dynamic rendering 을 사용하면 됩니다.

fetch 사용시 fetch('url', {cache: 'no-store'}) 를 사용해도 되지만, nextjs13 에서는 키워드(force-dynamic)를 제공합니다.

// 캐시 사용안하고 실시간 사용한다, 
fetch('url', {cache: 'no-store'})

 

3. 캐시 기능을 사용해서 페이지에 부담을 줄일 수 있습니다. revalidate 기능을 사용하면 됩니다.

// 60초 단위로 캐시한다.
fetch('url', {next: {revalidate: 60}})

 

키워드 설정 방법 (중요)

// 다이나믹 렌더링 사용 키워드
export const dynamic = 'force-dynamic'
// 스태틱 렌더링 사용 키워드
export const dynamic = 'force-static'
// revalidate 옵션 사용, 초 단위
export const revalidate = 60

 

Tip: 실시간 기능을 사용해야하는데, 서버 부담이 있는 페이지에서는 캐시 옵션을 사용하면 성능이 개선됩니다.