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 중 무엇이 더 좋은 방식이냐에 대한 오랜 논쟁이 있지만 어떤 프로젝트이고 무엇을 중점에 두느냐에 따라 누가 장단점이 있어 왔다.