Universal Rendering

📌 Nuxt의 렌더링 모드

Nuxt에서는 SSR, CSR 뿐만 아니라 하이브리드 렌더링, 엣지 사이드 렌더링을 지원한다.

브라우저와 서버가 함께 JavaScript 코드를 해석하여 Vue.js 구성 요소를 HTML 요소로 변환할 수 있다. 이 단계를 렌더링이라고 한다.
Nuxt는 universal 및 클라이언트 측 렌더링을 모두 지원합니다. 두 가지 접근 방식에는 장단점이 있다.
기본적으로 Nuxt는 더 나은 사용자 경험과 성능을 제공하고 검색 엔진 인덱싱을 최적화하기 위해 universal 렌더링을 사용하지만 한 줄의 구성에서 렌더링 모드를 전환할 수 있다.

 

📌 Universal Rendering

Nuxt 공식 홈페이지 https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering

브라우저가 universal 렌더링이 활성화된 URL을 요청하면 Nuxt는 서버 환경에서 JavaScript(Vue.js) 코드를 실행하고 완전히 렌더링된 HTML 페이지를 브라우저에 반환합니다. Nuxt는 페이지가 미리 생성된 경우 캐시에서 완전히 렌더링된 HTML 페이지를 반환할 수도 있습니다. 사용자는 클라이언트 측 렌더링과 달리 애플리케이션의 초기 콘텐츠 전체를 즉시 가져옵니다.

HTML 문서가 다운로드되면 브라우저가 이를 해석하고 Vue.js가 문서를 제어합니다. 한때 서버에서 실행되었던 동일한 JavaScript 코드가 다시 클라이언트(브라우저) 에서 백그라운드로 실행되어 리스너를 HTML에 바인딩하여 상호 작용(따라서 Universal Rendering )을 가능하게 합니다. 이를 Hydration 이라고 합니다 . Hydration이 완료되면 페이지는 동적 인터페이스 및 페이지 전환과 같은 이점을 누릴 수 있습니다.

 

📌 Universal Rendering 개발의 주의할점

Browser API 활용의 제한

• DOM API 같은  Browser API 들을 마음껏 쓰지 못하게 된다는 점
• 내가 사용하는 라이브러리가 Browser API 를 사용한다면 해당 라이브러리는 Client-Side 에서만 작동하게끔 조작을 해야한다는 뜻

 

HTTP 통신의 중복 호출 가능성

• Nuxt3는 Vue 를 이용해 개발시 제일 많이 써오던 Axios를 채택하지 않고, ofetch라는 라이브러리를 채택했다.
• ofetch는 환경에 따라 Server 면 node-fetch-native, Browser 면 브라우저의 기본 fetch 을 선택해 사용한다고 한다.
• $fetch 를 그냥 사용하게 될 경우 불필요하게 Api 호출을 두번 하는 경우가 생기며 Hydration misatch 버그가 생길 수 있다.
• Hydration mismatch 란 Server 에서 만든 HTML 과 Client 에서 렌더링된 HTML 의 결과가 다를때 나는 warning 으로 Nuxt는 Hydration 이 일어날때마다 서로의 결과가 같은지 확인한다. 다르다면 문제가 있다는 뜻이다.

 

---

참고 사이트

https://jae-study.tistory.com/126

https://jongmin4943.tistory.com/entry/Nuxt-%EC%9D%98-Universal-Rendering-%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering