TIL 60. 2024-03-27

서버 렌더링 종류

정적 렌더링(기본값)

: 빌드 시 렌더링되거나 데이터 재검증 후 백그라운드(서버)에서 렌더링됩니다. 결과는 캐시되어 CDN(Content Delivery Network)으로 푸시된다.

정적 렌더링은 사용자에게 개인화되지 않은 데이터가 있고 정적 블로그 게시물이나 제품 페이지 같이 빌드 시 알 수 있는 데이터가 있는 경우 유용하다. 경로가 완전히 정적으로 렌더링 되려면 모든 데이터가 캐시되어야 한다.

동적 렌더링

:사용자들의 요청이 있을 때마다 경로가 새로 렌더링된다. 경로에 사용자에게 맞춤화된 데이터가 있거나 쿠키, URL의 검색 매개변수와 같이 요청 시에만 알 수 있는 정보가 있는 경우 유용하다. 렌더링하는 동안 동적 기능(cookies(), header(), useSearchParams(), searchParams)을 사용하거나 캐시되지 않은 데이터 요청이 발견된다면 동적 렌더링으로 전환된다.

서버 렌더링의 이점

• 데이터 가져오기 - 렌더링에 필요한 데이터를 가져오는데 걸리는 시간과 클라이언트의 수행 요청량을 줄여 성능 향상된다.
• 보안 - 토큰 및 API키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험이 없다.
• 캐싱 - 결과를 캐시하고 후속 요청이나 사용자간에 재사용 할 수 있다.
• 번들 - 클라이언트가 자바스크립트를 다운로드하고 분석 및 실행할 필요가 없기에 인터넷 속도가 느리거나 성능이 떨어지는 장치를 사용하는 사용자들에게 유용하다.
• 초기 페이지 로드 및 콘텐츠가 포함된 첫 페인트 - 클라이언트가 페이지를 렌더링 하는데 필요한 자바스크립트를 다운로드하고 분석 및 실행할 때까지 기다리지 않고 즉시 HTML을 생성할 수 있다.
• 검색 엔진 최적화 및 소셜 네트워크 공유성 - 렌더링된 HTML은 검색 엔진 봇의 색인화에 사용되고 소셜 네트워크 봇이 페이지에 대한 미리보기를 생성하는데 사용될 수 있다.
• 스트리밍 - 렌더링 작업을 분할하고 준비가 되면 클라이언트로 스트리밍할 수 있다. 사용자는 전체 페이지가 렌더링되지 않더라도 페이지의 일부를 일찍 볼 수 있다.

———————————
참고자료
https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-rendering