Learn Next.js 제 8장 : Static and Dynamic Rendering

7장이랑 연결되는 내용입니다.

7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다.

1. 데이터 요청이 의도하지 않는 waterfall을 만들었다.

2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다.

 

이번 장에서 배울 내용

* 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다.

* 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다.

* 대시보드를 동적으로 만들기 위한 다양한 접근 방식.

* 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다.

 

정적 렌더링이란?

정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다.

그런 다음 결과를 CDN(Content Delivery Network)에 분산하고 캐시 할 수 있습니다.

사용자가 응용 프로그램을 방문할 때마다 캐시된 결과가 제공됩니다. 정적 렌더링에는 다음과 같은 몇 가지 이점이 있습니다.

• 더 빠른 웹 사이트 - 미리 렌더링된 콘텐츠를 캐시하고 배포할 수 있다. 이를 통해 사용자가 더 빠르고 안정적으로 액세스 가능하다.
• 서버 부하 감소 - 내용이 캐시되므로 서버는 각 사용자 요청에 동적으로 내용을 생성할 필요가 없다.
• SEO - 미리 렌더링된 콘텐츠는 search engine crawler가 index을 작성하기가 더 쉽다. 이는 검색 엔진 순위 향상으로 이어진다.

정적 렌더링은 정적 블로그 게시물이나 제품 페이지와 같이 사용자 간에 공유되는 데이터나 데이터가 없는 UI에 유용하다.

정기적으로 업데이트되는 개인화된 데이터가 있는 대시보드에는 적합하지 않을 수 있다.

대시보드 앱에 적합하지 않은 대표적인 이유로는 최신 데이터 변경 사항을 반영하지 못하기 때문이다.

 

동적 렌더링이란?

동적 렌더링을 사용하면 요청 시(사용자가 페이지를 방문할 때) 각 사용자에 대해 서버에 콘텐츠가 렌더링 됩니다. 동적 렌더링에는 다음과 같은 몇 가지 이점이 있습니다.

• Real-Time Data - 동적 렌더링을 통해 실시간 또는 자주 업데이트되는 데이터를 표시할 수 있습니다. 자주 데이터가 변하는 app에 이상적.
• 사용자별 컨텐츠 - 대시보드 또는 사용자 프로필과 같은 개인화된 콘텐츠를 제공, 사용자 상호 작용을 기반한 데이터 업데이트가 쉽다.
• Request Time Information - 동적 렌더링을 사용하면 쿠키 또는 URL 검색 매개 변수와 같이 요청 시에만 알 수 있는 정보에 액세스 할 수 있다.

느린 데이터를 가져온다면?

동적 렌더링으로 역동적으로 만들었습니다. 만약 많은 데이터 중에 유독 느린 하나의 응답이 있다면 어떻게 될까요?

과정에서는 시뮬레이션을 통해 결과를 보여줍니다.

결론 - 동적 렌더링은 가장 가져오는 게 느린 데이터의 속도만큼 빠르다.