Next.js (6) static/dynamic rendering/캐싱

 

Dynamic rendering / Static rendering

 

Next.js에서 페이지를 하나 만들면 기본적으로 static rendering 식

페이지안에 fetch라든지 그런 함수가 없는 일반 페이지들은

기본적으로 static rendering으로 동작

 

이 경우 매우 빠르게 페이지 전송이 가능

 

- fetch('/URL', { cache: 'no-store' }) 로 데이터 가져오는 문법

- useSearchParams(), cookies(), headers() 

- [dynamic route]

이런걸 사용한다면 dynamic rendering 으로 페이지가 동작

 

유저가 페이지 접속시 html에 변동사항이 들어가야하기 때문에

유저가 페이지에 들어갈 때마다 html 페이지를 서버에서 다시 그려준다는 소리

 

따라서 npm run build 했을 때 페이지 렌더링이 이상하다 싶으면

export const dynamic = 'force-dynamic' or 'force-static'

이렇게 강제로 페이지 렌더링을 바꿀 수 있다

 

캐싱기능

 

데이터를 잠깐 몰래 저장해두고 그걸 재사용한다는 소리

사이트 만들 때 비용절약 + 속도향상에 도움되는 캐싱을 도입

 

GET요청

export default async function 페이지(){

  let result = await fetch('/api/어쩌구', { cache: 'force-cache' })}

컴포넌트 안에서 데이터 가져올 때 fetch() 를 이렇게 사용하면 캐싱기능을 자동으로 이용할 수 있는데

이러면 fetch() 명령 줄 때마다 서버에서 데이터를 새로 가져오는게 아니라 

한 번 가져온 결과를 어딘가에 몰래 저장해두고 그걸 몰래 꺼내옵니다. 

그럼 서버API 또는 DB 응답을 기다릴 필요가 없기 때문에 훨씬 빠르게 데이터를 가져올 수 있다

 

fetch() 사용시 cache: 'force-cache' 설정을 넣어두면 캐싱해주고

앞으로 /URL로 요청할 때 마다 계속 캐싱된 결과를 가져와줍니다. 

사이트 다시 npm run build 하기 전 까지 캐싱된걸 평생 보여줌 

(참고) 실은 저거 안적어도 디폴트값은 cache: 'force-cache' 로 설정

  fetch('/URL', { next: { revalidate: 60 } })

fetch() 안에서 revalidate 옵션도 적용할 수 있는데

이러면 캐싱 결과를 60초 동안만 보관하고 사용합니다.

60초가 지나면 다시 /URL로 새로 요청해서 결과를 가져오고 캐싱

 

  fetch('/URL', { cache: 'no-store' })

{ cache : 'no-store' } 넣어두면 캐싱기능 안쓰겠다는 뜻입니다.

그래서 매번 저 코드 읽을 때 마다 서버로 요청해서 데이터를 새로 가져옵니다.

실시간 데이터가 중요하면 이거

 

- Next.js에선 쌩자바스크립트의 fetch() 기본함수를 업그레이드해놔서 사용가능한 문법입니다.

- server component 안에서만 캐싱기능 사용가능