Next.js(app router)는 by default로 server component를 사용한다. 즉 Next.js 프로젝트에서 일반적으로 리액트 컴포넌트를 만들면 그게 server component로 취급된다는 것이다. Next.js server component는 React Server Components(RSC)를 기반으로 한다. Server Component를 사용할때의 렌더링은 다시 세가지 렌더링 전략으로 나눌 수 있다. ⇒ Static Rendering, Dynamic Rendering, Streaming
1. Static Rendering
- app router 기준으로 가장 기본, default 렌더링 방식이다.
- 빌드타임 또는 data revalidation 이후에 렌더링 되며, 캐싱되기 때문에 가장 성능상으로 좋은 방식이라고 볼 수 있다.
- 캐싱된 결과를 CDN을 통해 공급할 수 있다고 한다.
- static rendering 방식은, 특정 route이 personalized되지 않은, 그리고 빌드 타임에 미리 알 수 있는 데이터를 제공할때 유용하다.
- 예를들면 static blog post나 product page가 여기에 해당한다.
- 기존 getStaticProps에 해당한다(SSG).
2. Dynamic Rendering
-
route 접속 (request) 시마다 새로 렌더링 된다. (routes are rendered for each user at request time)
- 즉 static rendering은 build time, dynamic rendering은 request time이라고 표현할 수 있다.
-
static rendering과는 반대로, dynamic rendering is useful when a route has data that is personalized to the user or has information that can only be known at request time, such as cookies or the URL's search params.
- personalized data 예시는 장바구니 목록같은게 해당된다고 볼 수 있을듯?
-
caching?
<aside> 💡 Dynamic Routes with Cached Data
In most websites, routes are not fully static or fully dynamic - it's a spectrum. For example, you can have an e-commerce page that uses cached product data that's revalidated at an interval, but also has uncached, personalized customer data.
In Next.js, you can have dynamically rendered routes that have both cached and uncached data. This is because the RSC Payload and data are cached separately. This allows you to opt into dynamic rendering without worrying about the performance impact of fetching all the data at request time.
Learn more about the full-route cache and Data Cache.
</aside>
- 참고: Next.js Caching
-
기존의 getServerSideProps(SSR)에 해당한다고 볼 수 있다.
-
dynamic rendering을 사용하는 방법
-
렌더링 중에, *dynamic function이나 uncached data request를 하는 것이 발견되면, Next.js는 자동으로 Dynamic Rendering을 적용한다고 한다. (Next.js will switch to dynamically rendering the whole route)
- dynamic functions rely on information that can only be known at request time. (e.g.
cookies(),headers(),searchParamsprops on a Page, etc.) ⇒ using any of these functions will opt the whole route into dynamic rendering at request time.
- dynamic functions rely on information that can only be known at request time. (e.g.
-
아래 표는 dynamic function과 caching이 어떻게 static 또는 dynamic rendering을 결정하는지 보여준다.
- 표를 보면, fully static이 되려면 모든 데이터가 cached되어야 한다는 것을 알 수 있다.
- 반면 dynamically rendered route의 경우 cached와 uncached data fetching을 동시에 사용할 수 있다.
-
아무튼 중요한 것은, Next.js를 사용할때는 개발자로서 우리가 직접 static / dynamic rendering을 결정하는 개념이 아니라는 것이다. Next.js가 자동으로 우리가 어떤 기능이나 API를 사용했는지에 따라 알아서 결정한다. 따라서 어떤 기능을 사용할때 렌더링까지 미리 생각할 수 있어야 한다고 볼 수도 있을 것이다.
- 반대로 우리가 결정할 부분은 1) 언제 특정 데이터를 cache하고 revalidate 할지, 그리고 2) 어떤 UI 부분을 stream할지 등이라고 볼 수 있다.
-
3. Streaming
- 일반 서버 컴포넌트는, data fetching을 포함한 서버 측 렌더링 전체가 완료된 후 한번에 클라이언트에게 공급한다면, streaming 방식을 사용하면 해당 페이지에서 data fetching이 필요 없는 화면부터 해서, data fetching이 완료된 순서대로 부분적으로 렌더링을 하여 바로바로 클라이언트에게 보내는(stream) 방식으로, initial loading이 더 빠르다는 장점이 있다.
- loading.js(전체 streaming)와 React Suspense(component streaming)를 사용해 적용할 수 있다.