Static Rendering 언급

nextjs-dashboard에서 지금까지 사용한 방식은 Dynamic Rendering이다.

Static Rendering의 경우 build time의 결과물, 즉 cached result를 사용한다.

예전에 커뮤니티 서비스를 만들기 위해 Vue/Nuxt로 Static Rendering을 사용하였을 때는 Vercel과 같은 사이트를 사용해 배포를 한 cached result만 사용하면 됐다. 이때, server side rendering과 static generation을 사용하면 커뮤니티 사이트에 적합하지 않게 된다. 따라서 client side rendering을 통해 client에서 data fetching을 하면 유용하게 사용할 수 있는 앱이 된다. 하지만 이 경우에는 client side rendering 때문에 seo 문제가 생긴다. 이를 해결할 수 있는 방법이 있을까? 이를 해결하는 방법으로는 static을 포기하고 Universal Mode, 즉 SSR, CSR, 그리고 이 둘을 이어주는 hydration을 사용하는 방식이 있었다. 당시 프로젝트는 search engine indexing을 불허하는, 즉 SEO가 전혀 필요 없는 사이트였기에, Universal Mode를 사용하지 않았다.

여담이 길었다. 아무튼 이 대시보드 프로젝트의 경우에는 React Server Components을 사용하기에, 대시보드처럼 계속 최신 데이터를 불러 오려면 dynamic rendering을 사용해야된다.

Simulating a Slow Data Fetch!

fetchRevenue()를 3초가 걸리게 만든다. 상당히 긴 시간이다.

dashboard/page.tsx 에 await fetchRevenue()는, fetchRevenue() 가 완료될 때까지 기다린다. 분명 Promise.all()으로 병렬구조를 사용할 수 있지만, 이 코드는 일부러 나쁘게 짜놓은 것이다. 다음 장의 Suspense를 소개하기 위해서.

하지만 실무에는 이처럼 waterfall 구조를 정말로 사용해야되는 경우들도 있다. 너무 기획적으로 접근하지 말고 기술적으로 이런 것이 가능하다는 접근으로 Next.js Learn 문서를 읽는 게 맞는 것 같다.