[캐싱(cache)]
- 결과를 잠깐 저장해두고 재사용
- 페이지 캐싱 : 페이지 완성본을 잠깐 저장해두고 재사용
- GET 요청결과 캐싱 : GET 요청결과를 잠깐 저장해두고 재사용
await fetch('/URL', {cache : 'force-cache'})
- 매번 서버로 새 요청 (실시간 데이터 중요)
await fetch('/URL', {cache : 'no-store'})
- 60초마다 캐싱된 데이터 갱신해줌
await fetch('/URL', {next : {revalidate : 60})
- 캐싱된 데이터는 하드 용량을 차지함
- connectDB 사용한 DB 입출력 코드 캐싱 방법
1. GET 요청시 DB 데이터 보내주는 서버 API 만들어두고 fetch()로 바꾸면 캐싱기능 사용가능
2. revalidate 옵션을 켜놓으면 페이지 단위로 캐싱 가능
: page.js 파일 위쪽에 revalidate 변수 만들고 원하는 초 단위 입력하면 특정 페이지를 원하는 시간만큼 캐싱해둠
export const revalidate =60; // 60초가 지나면 페이지를 재생성해서 캐싱.
[Dynamic rendering / Static rendering]
1. Next.js에서 페이지를 만들면 기본적으로 static rendering 식으로 페이지 보여줌
페이지 안에 fetch 등의 함수가 없는 일반 페이지들은 static 하게 동작함
페이지 안에 별 기능이 없기 때문에 매번 html 페이지를 새로 만들지 않아 그냥 그대로 전송
2. 하지만
- fetch('/URL', { cache : 'no-store' })로 데이터 가져오는 문법
- useSearchParams(), cookies(), headers()
- [dynamic route]
등을 사용한다면 dynamic rendering으로 페이지를 보여줌
유저가 페이지 접속시 html에 변동사항이 들어가야하기 때문에 페이지에 접속할 때마다
html 페이지를 서버에서 다시 그려줌
- 여러 컴포넌트에서 같은 /url로 fetch 하는 경우 알아서 중복 제거, 비효율 문제 없음
[Dynamic rendering / Static rendering 강제 변환]
- npm run build 하면 λ (람다) 표시와 ㅇ표시가 나오는데 λ는 dynamic rendering, ㅇ는 static rendering
- dynamic rendering으로 변환 방법
: export const 변수명 = 'force-dynamic' // 변수 페이지에 추가, 'force-static'넣으면 static rendering,
'auto' 넣으면 자동으로 판단(디폴트)
[useEffect]
1. html 로드/재렌더링 될 때마다 실행됨 (한번만 실행시키려면 [] 추가)
2. html 보여준 후에 늦게 실행시작
[DB에 유저 이름 보관할 때?]
- MySQL 등 관계형 DB들은 안좋은 관습 (정규화 문제)
- MongoDB 등 비관계형 DB들은 좋은 관습
[Like 태그]
- 링크 태그 사용 시 sever-side rendering에서 페이지 이동시 새로고침되지 않고,
필요한 부분만 재렌더링되어 전환이 부드러움