cache, dynamic rendering, 서버 자원 절약

caching : 결과를 잠깐 저장해두고 재사용

페이지 캐싱 : 페이지 완성본을 잠깐 저장해두고 재사용

GET 요청 결과도 캐싱 가능

 

 💡 dynamic rendering 시, 서버와 db에 부담이 되는 것을 막기 위해 caching을 사용해보자

 

GET요청 결과 캐싱하는 방법

await fetch('/URL', {cache : 'force-cache'})

위의 코드를 적어주면 해당 url에서 가져온 데이터들은 새로 만들지 않고 잠깐 저장해놨다가 보여준다

{cache : 'force-cache'} 부분 생략 가능. 자동으로 채워짐

 

 

만약, chching이 싫고 실시간 데이터가 중요하다면

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

해당 url에서 값을 가져올 때 매번 서버에 요청해서 새 값을 가져온다

 

 

캐싱된 시간 지정

await fetch("/URL", { next: { revalidate: 60 } });

60초마다 캐싱된 데이터를 갱신해준다

 

 

db에서 데이터를 가져올 때에도 caching을 사용하는 방법

  const db = (await connectDB).db("forum");

  let result = await db.collection("post").find().toArray(); 

방법 1) fetch()로 바꿔준다

방법 2) revaildate 예약 변수 사용 -> 페이지 단위 캐싱 가능

방법 2 사용 예시

방법 2를 위의 이미지처럼 사용하면 60초동안은 새 데이터를 가져오지 않고 캐싱된 페이지를 보여준다.

60초가 지나면 다시 캐싱한다.