[Next.js 14] 3. Rendering - 2

2. Server Components

• React Server Components는 렌더링할 수 있고 선택적으로 Server에서 캐싱할 수 있는 UI를 만들 수 있게 한다.
• Next.js에서는 route segnets로 분할 되어 Streaming, 부분 렌더링을 지원한다.
• Server 렌더링 전략으로 3가지가 있다.
  • Static Rendering
  • Dynamic Rendering
  • Streaming

 

2-1. Benifits of Server Rendering

• Data Fetching
  • Server Components는 Data fetching을 서버에서 data source와 가깝게 수행할 수 있다.
  • 이는, 렌더링에 필요한 데이터를 fetching하는 데 있어서 시간과 Client의 요청 수를 줄이고 성능을 향상 시킬 수 있다.
• Security
  • Server Components는 민감한 정보와 로직을 Server에서 유지하고 Client에 노출시키지 않는다.
• Caching
  • Server에서 렌더링되면, 후속 요청과 전체 사용자들에게 캐싱된 결과를 제공할 수 있다.
  • 이는, 각 요청에서 발생하는 재 렌더링 및 fetching을 줄요 성능 향상에 도움이 된다.
• Performance
  • Server Components는 추가적인 성능 최적화 도구를 제공한다.
  • 예를 들어, 상호 작용이 필요없는 UI를 가지는 컴포넌트를 Server에서 렌더링 하면 Client에서 사용하는 Javascript 코드 양이 줄어들어 느린 인터넷 환경이나 성능이 좋지 못한 디바이스에서 성능 향상을 낼 수 있다.
• Initial Page Load and First Contentful Paint(FCP)
  • 서버에서 HTML을 생성하면, 사용자는 Client에서 Javascript에서 다운로드를 기다릴 필요 없이 즉시 페이지를 볼 수 있다.
• Search Engine Optimization and Social Network Shareability
  • HTML을 렌더링 할 수 있다는 의미는 SEO와 Social Network bot에 유리하다.
• Streaming
  • Server Components는 렌더링을 청크 단위로 분리하여 Client에서 준비가 되는대로 Stream할 수 있다.
  • 사용자는 전체 페이지의 로드를 기다리지 않고, 준비가 된 일부분을 먼저 볼 수 있다.

 

2-2. Using Server Components in Next.js

• 기본적으로 Next.js는 Server Components를 사용한다.
• 추가적인 구성은 필요 없고, 필요에 따라 Client Components를 사용할 수 있다.

 

2-3. How are Server Components rendered?

• Server에서 Next.js는 React API를 이용해 렌더링을 조정한다.
• 렌더링은 개별의 route segments와 Suspense Boundaries 청크 단위로 나뉘어 이루어 진다.
  
  1. React는 React Server Component Payload라 불리는 특별한 data format에 Server Components를 담아 렌더링 한다.
  2. Next.js는 RSC Payload와 Client Component Javascript 지침에 따라 서버에서 HTML을 렌더링 한다.
  3. HTML은 초기 페이지 로드 시에만 Route의 상호작용이 불가능한 preview 페이지로 즉시 보여진다.
  4.  RSC Payload는 Client와 Server의 컴포넌트 트리를 조정하고 DOM을 업데이트.
  5. 애플리케이션이 상호작용할 수 있도록 Client Components를  대상으로 hydrate.

 

2-4. Server Rendering Strategies

• Static, Dynamic, Streaming 3가지의 전략이 있다.

1. Static Rendering (Default)

• Static Rendering은 build time에 routes를 렌더링하거나, 백 그라운드에서 data 재검증이 끝난 뒤 렌더링한다.
• 결과물은 Caching 되고, CDN으로 푸시될 수 있다.
• 이 최적화를 통해 사용자와 Server 요청 사이에 렌더링 결과물을 공유할 수 있도록 도와준다.
• Static 렌더링 방식은 개인화되지 않고, build time에 알 수 있는 데이터를 사용할 때 적합하다. (정적인 blog post, product page 등)

 

2. Dynamic Rendering

• Dynamic Rendering은 각 사용자의 request time에 route가 렌더링 된다.
• data가 개인화되지 않은 데이터 또는 request time에 알 수 있는 데이터를 사용할 때 적합하다. (cookies, URL'S Search Params 등)

대부분의 웹 사이트는 모두 Static이거나 모두 Dynamic하게 Route하지 않는다. 
예를 들어, cached data와 주기적으로 revalidate가 발생하는 데이터와, 캐시되지 않고 개인화된 데이터를 동시에 가지는 e-commerce 페이지.

• Switching to Dynamic Rendering
  • 렌더링 중에 동적 함수나 캐시되지 않은 데이터에 대한 요청을 발견하면, Next.js는 해당 Route를 Dynamic Route로 전환한다.
  • 다음 표는 동적 함수와 Data Cacahing이 정적 렌더링 또는 동적 렌더링에 영향을 미치는 지 요약.
    

    Dynamic Functions	Data	Route
    No	Cached	Statically Render
    Yes	Cached	Dynamically Render
    No	Not Cached	Dynamically Render
    Yes	Not Cached	Dynamically Render

  • 모든 데이터를 Cache해서 사용하면, Static Render가 실행되지만, 하나라도 Cache되지 않은 데이터를 사용하면 Dynamic Render가 실행.
  • 개발자는, Static과 Dynamic 중 무엇을 선택할 지 고민할 필요가 없다. Next.js가 기능과 API의 용법에 따라 자동적으로 변환해 준다.
  • 그저, 어떤 데이터에 Cache 및 재검증을 수행할 지, 어떤 UI에서 stream을 수행할 지만 선택하면 된다.
• Dynamic Functions
  • 동적 함수는 오직 request time에 알 수 있는 정보에 의존한다.(Cookies, request headers, search params)
  • cookies(), headers() : 이걸 사용하면 해당 Route는 요청 시점에 동적 렌더링을 선택.
  • searchParams : 이걸 사용하면 해당 Route는 요청 시점에 동적 렌더링을 선택.

2-5. Streaming

• Streaming은 Server에서 UI의 점진적 렌더링을 가능하게 해준다.
• 청크 단위로 나눠서 준비가 되는대로 Client에게 Streaming하는 방식.
• 사용자는 전체 페이지가 로드되지 않아도 완료된 일부 UI를 볼 수 있다.
• Streaming은 Next.js App Route 내에 기본적으로 포함되어 있다.

 

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

 

 

Preference

• https://nextjs.org/docs/14/app/building-your-application/rendering/server-components

Rendering: Server Components | Next.js