정적 및 동적 렌더링
Next.js에서 경로는 정적 또는 동적으로 렌더링할 수 있습니다.
- 정적 경로에서는 컴포넌트가 빌드 시점에 서버에서 렌더링됩니다. 작업 결과는 캐시되어 후속 요청에서 재사용됩니다.
- 동적 경로에서는 요청 시점에 컴포넌트가 서버에서 렌더링됩니다.
정적 렌더링(기본값)
정적 렌더링(기본값)은 모든 렌더링 작업이 미리 수행되고 사용자와 지리적으로 가까운 CDN(콘텐츠 전송 네트워크)에서 제공될 수 있으므로 성능이 향상됩니다.
layout이나 page에서 동적 함수 또는 동적 데이터 가져오기를 사용하여 동적 렌더링을 선택할 수 있습니다. 이렇게 하면 요청 시점에 Next.js가 전체 경로를 동적으로 렌더링합니다.
이 표에는 동적 함수와 정적 데이터 가져오기(캐싱)가 경로의 렌더링 동작에 어떤 영향을 미치는지 요약되어 있습니다.
경로가 정적으로 렌더링되는 경우 데이터 요청이 캐시되고 동적 함수가 없다는 점에 유의하세요.
참고: 향후 Next.js에는 전체 경로 대신 경로의 레이아웃과 페이지를 독립적으로 정적 또는 동적으로 렌더링할 수 있는 하이브리드 서버 측 렌더링이 도입될 예정입니다.
정적 데이터 가져오기(기본값)
기본적으로 Next.js는 캐싱 동작을 특별히 선택 해제하지 않은 fetch() 요청의 결과를 캐싱합니다. 즉, 캐시 옵션을 설정하지 않은 fetch 요청은 force-cache 옵션을 사용합니다.
route의 모든 가져오기 요청이 revalidate(재검증) 옵션을 사용하는 경우 재검증 중에 경로가 정적으로 다시 렌더링됩니다.
데이터 가져오기 요청 캐싱에 대해 자세히 알아보려면 캐싱 및 revalidating 페이지를 참조하세요.
동적 렌더링
정적 렌더링 중에 동적 함수 또는 동적 fetch() 요청(캐싱 없음)이 발견되면 Next.js는 요청 시점에 전체 경로를 동적으로 렌더링하는 것으로 전환합니다. 캐시된 데이터 요청은 동적 렌더링 중에도 계속 재사용할 수 있습니다.
동적 함수 사용
동적 함수는 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수와 같이 요청 시점에만 알 수 있는 정보를 사용합니다. Next.js에서 이러한 동적 함수는 다음과 같습니다:
- 서버 컴포넌트에서 cookies() 또는 headers()를 사용하면 요청 시 전체 경로를 동적 렌더링으로 선택합니다.
- 클라이언트 컴포넌트에서 useSearchParams()를 사용하면 정적 렌더링을 건너뛰고 대신 클라이언트에서 가장 가까운 상위 Suspense 경계까지 모든 클라이언트 컴포넌트를 렌더링합니다.
- useSearchParams()를 사용하는 클라이언트 컴포넌트를 <Suspense/> 경계로 감싸는 것이 좋습니다. 이렇게 하면 그 위에 있는 모든 클라이언트 컴포넌트가 정적으로 렌더링될 수 있습니다.
- searchParams Pages prop을 사용하면 요청 시 페이지가 동적 렌더링으로 선택됩니다.
동적 데이터 가져오기
동적 데이터 가져오기는 cache 옵션을 'not-store(저장 안 함)'으로 설정하거나 revalidate을 0으로 설정하여 캐싱 동작을 특별히 opt out하는 fetch() 요청입니다.
레이아웃 또는 페이지의 모든 가져오기 요청에 대한 캐싱 옵션은 세그먼트 구성 개체를 사용하여 설정할 수도 있습니다.
동적 데이터 가져오기에 대해 자세히 알아보려면 데이터 가져오기 페이지를 참조하세요.
질문)
세그먼트 구성 개체 같은 경우 (https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config)
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'all'
export function generateStaticParams(...)이런식으로 layout.js 나 page.js에서 export const ... 해주는데, export를 하면 그 페이지 내에서 그냥 적용이 되는건지 궁금하다. 보통은 모듈 export를 하면 사용할때 import 해서 다른곳에서 사용을 하는데... 여기서 export해주면 어디서 쓴다는거지?가 이해가 안됨..
요약)
1. Next JS에는 정적 렌더링 / 동적 렌더링이 있는데, 정적 렌더링이 기본이고, 퍼포먼스상의 이유로 Next는 정적 렌더링을 권고한다. 페이지마다 둘중 하나를 선택할 수 있다.
2. 정적 렌더링 페이지들은 프로젝트 빌드 시점에 HTML 파일이 생성되고, 모든 요청에 재사용이된다.
그리고 가까운 CDN에 캐시된다. (성능 향상!!) 정적으로 렌더링되는 경우는, 데이터 요청이 캐시되고 동적 함수가 없는 경우이다.
3. 동적 렌더링 페이지들은 모든 요청 시점에 HTML을 생성한다. 매 요청마다 서버에서 렌더링 해서 내려줌.
4. 정적 렌더링중에 동적 함수나 동적 fetch를 만나면, 라우트는 즉시 동적 렌더링으로 전환 한다.
5. 정적 렌더링 페이지 = 클라이언트 페이지, 동적 렌더링 페이지 = 서버 페이지 라고 이해해도되는지?
6. 동적 데이터 가져오기는, 캐싱 동작을 의도적으로 opt out 한 fetch() 이다.