📚 Reference

• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4

📜 Chapter

‣

‣

‣

Next.js

useId

‣

React

• React v18에서는 새로운 Suspense SSR Architecture가 추가될 예정이고 이제 React의 Suspense를 융합해 선택적인 Hydratation을 웹사이트에 적용할 수 있게 된다.
• Hydratation은 이미 서버 사이드 렌더링을 제공하는 많은 프레임워크나 라이브러리(Gatsby, Next.js 등)에서 필수적으로 제공하는 솔루션이다.
• suspense
  • 미결정, 불안, 걱정, 서스펜스, 긴장감

Hydration

• Hydration
• 하이드레이션
• 하이드레이션은 SSR과 CSR의 장점을 결합한 방식으로, 서버에서 HTML을 렌더링하여 빠른 초기 로딩 속도를 제공하고, 이후 클라이언트에서 JavaScript를 실행하여 페이지를 동적화(interactive) 한다.
• 웹페이지를 랜더링하는 과정에서 React와 같은 CSR(Client Side Redering) 라이브러리는 번들된 JS를 가져와 DOM을 랜더링 한다.
• 이러한 방식은 많은 장점과 함께 초기 랜더링의 속도 저하, SEO의 한계 등과 같은 문제점 또한 가지고 있다.
• 그래서 상황에 따라 SSR(Server Side Rendering)을 선택하곤 하는데, SSR을 사용하면 언급한 CSR의 문제점을 해결할 수 있기 때문이다.
• SSR과 CSR 중 무엇이 더 좋은 방식이냐에 대한 오랜 논쟁이 있지만 어떤 프로젝트이고 무엇을 중점에 두느냐에 따라 장단점이 있어 왔다.