In the previous chapter, you fetched data for the Dashboard Overview page. However, we briefly discussed two limitations of the current setup:

1. The data requests are creating an unintentional waterfall.
2. The dashboard is static, so any data updates will not be reflected on your application.

In this chapter... Here are the topics we’ll cover

• What static rendering is and how it can improve your application's performance.
• What dynamic rendering is and when to use it.
• Different approaches to make your dashboard dynamic.
• Simulate a slow data fetch to see what happens.

What is Static Rendering?

• static rendering은, data fetching과 rendering이 서버에서, 빌드 타임에(when you deploy) 또는 revalidation 중에 일어나는 것을 말한다. 이 스태틱 렌더링의 결과, 즉 데이터를 가진 페이지는 CDN을 통해 distributed되고 cached될 수 있다. (vercel을 통해 배포하면 CDN도 자동으로 해주나?)

  • 참고:

    Rendering: Server Components

    CDN - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

• 유저가 앱을 방문하면, 유저에게 cached result가 served되는 것이다. static rendering에는 몇가지 이점이 있다:
  • Faster Websites - Prerendered content can be cached and globally distributed. This ensures that users around the world can access your website’s content more quickly and reliably.
  • Reduced Server Load - Because the content is cached, your server does not have to dynamically generate content for each user request.
  • SEO - Prerendered content is easier for search engine crawlers to index, as the content is already available when the page loads. This can lead to improved search engine rankings.
• Static rendering이 가장 잘 맞는 상황은 data가 없는 UI, 또는 여러 유저들에게 공통의 data를 보여주는 상황이다. 예를들면 static blog post, 또는 제품product 페이지 등이 있을 수 있겠다.
  • 반대로 정기적으로 업데이트가 되는 personalized data를 보여줘야 하는 dashboard 등에는 잘 맞지 않는 방식이라고 볼 수 있다. (실시간에 가깝게 최신 정보를 보여줘야 하는)

Quiz

• 정답: