Next가 궁금해서 기존에 작업했던 everydaaay_shop 쇼핑몰 프로젝트를 관리하는 대시보드를 제작중입니다
Next관련 자료를 찾아볼때마다 Hydration이라는 용어가 나오는데
간단하게 제가 이해한 바는 아래와 같습니다
Hydration이란 서버사이드 랜더링, 클라이언트사이드 랜더링을 혼합해서 사용하는 방식입니다
왜? :
- SEO, 이미지 최적화 등 많은 요소 때문에 Next.js 와 같은 서버사이드 랜더링기능을 수행할수있는 프레임워크를 많이 사용하게 됨
- 서버사이드 랜더링으로 페이지를 제작하면 정적인 페이지라 초기 랜더링을 빨라도 사용자 상호작용이 많을때 좋지않음
- 그럼 서버사이드 랜더링해서 빠르게 ui를 보여주고 동작은 클라이언트 사이드 랜더링에서 수행된걸 사용하자
- 서버사이드 랜더링의 결과물은 정적이기에 js가 많지않아 크기가 크지않고 빠르게 사용자에게 ui 제공가능
항상 좋은가? :
- 결국 서버사이드랜더링 된 데이터로 pre-rendering한다는 것은 모든 데이터를 준비해서 진행해야하기에
서버측에서 데이터를 가져오는데 오래걸리는 작업이라면 분할 하거나 사용하지않는게 나을수있다.
- 적절한 분할이 필요하다, 예를들어 전체 페이지에 대해 Hydration했다면 서버사이드 랜더링으로 pre-rendering을 하고 클라이언트 사이드랜더링의 결과가 덧씌워지기 전까지 ui를 확인할수는 있어도 상호작용이 동작하지않는다.
최신 리액트에서의 방안:
- React v18에서 위의 문제를 해결하기위해 Streaming이라는 기술이 생겨났다
- 기존방식은 모든 SSR을 완료한 후 전달하는것이라면
- 위의 방식은 코드를 분할해서 선택적으로 Hydration을 하도록 설정한다.
- CSR 코드에서 suspense와 같은 비동기처리를 해주면
- Streaming의 동작에 의해 완성된 Hydration부터 진행이되면서 해결이 된다는 말인것 같습니다.