NextJS 독학 4차시

Donghyun Hwang·2024년 1월 17일

NextJS 독학

목록 보기

5/6

수강중인 강의 : 코딩애플 NextJS

✅ npm run build, 결과

개발 서버가 아닌, 실제 배포를 위해서는 npm run build를 통해 배포에 필요한 파일들을 준비해줘야 한다.
이 때 로그를 살펴보면

위와 같이 페이지 앞에 o, λ와 같은 기호들이 있는 것을 볼 수 있다.
각각 페이지의 렌더링 방식을 나타낸다.
o : Static Rendering
λ : Dynamic Rendering

✅ Dynamic Rendering VS Static Rendering

Dynamic Rendering의 특징

접속마다 새로 html을 만들어 보낸다

fetch('/URL', { cache: 'no-store' }), useSearchParams(), headers, cookies(), [dynamic route] 등을 사용 시에 Dynamic Rendering 된다.

Dynamic Rendering의 장단점

실시간 데이터를 유지 가능하다.

서버 / DB에 부담이 될 수 있다.

Static Rendering의 특징

아무 설정도 하지 않으면 디폴트로 설정된다.

npm run build 시 만들어진 페이지를 그대로 유저에게 보낸다.

Static Rendering의 장단점

만들어진 페이지를 보내기 때문에 전송이 빠르다.

실시간 데이터 반영이 되지 않는다.

Static <-> Dynamic Rendering 변환

Static Rendering, Dynamic Rendering 여부는 npm run build 시에 자동으로 결정되지만, 이를 전적으로 신뢰해서는 안된다.
해당 프로젝트의 list 페이지의 경우에도, 글을 수정, 삭제, 작성 시에 페이지에 실시간 적용이 되어야하나, 현재는

Static Rendering으로 설정되어 있는 것을 볼 수 있다.
이를 강제로 Dynamic Rendering으로 바꾸기 위해서는 페이지 상단에 다음과 같이 적어주면 된다.

// list.tsx
export const dynamic = 'force-dynamic';

// Dynamic을 Static으로 바꾸고 싶은 경우
// export const dynamic = 'force-static';

이렇게 적어준 후 npm run build를 다시 해보면, 성공적으로 Dynamic Rendering으로 바뀌어 있는 것을 볼 수 있다

✅ 캐싱

Dynamic Rendering의 단점인 서버 / DB에 부하를 줄이기 위한 방법으로 캐싱이 있다. 불러왔던 데이터를 저장해두고 잠시 가져다 쓰는 것이다.

1. GET 요청 결과 캐싱

get 요청을 캐싱하기 위해

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

위와 같이 적는 방법이 있다.
사실 적지 않아도 디폴트로 get 요청 값이 캐싱된다.
실시간 데이터 fetching을 위해 이를 해제하고 싶다면

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

와 같이 이를 명시해주면 된다.

이 외에도

await fetch('/URL', {next: {revalidate: 60}})
// 60초 단위 캐싱

과 같은 옵션이 있다.
앱의 성격에 맞게 이를 잘 구분해주자.

2. 페이지 단위 캐싱

하나의 요청이 아닌 페이지 단위로도 캐싱할 수 있다.
DB 입출력을 위한

export default async function Home() {

  const client = await connectDB;
  const db = client.db('board');
  let result = await db.collection('post').find().toArray();

  
  return ...;
}

아래와 같은 코드가 있을 때,

import { connectDB } from "@/util/db";

export const revalidate = 60;
// 60초 캐싱

export default async function Home() {

  const client = await connectDB;
  const db = client.db('board');
  let result = await db.collection('post').find().toArray();
  
  return ...;
}