Vue.js

1️⃣ 서버에서의 반응형

SSR이 진행되는 동안에는 사용자와 상호작용하는 것도 아니고, DOM 업데이트도 일어나지 않는다. 따라서 모든 반응형들은 SSR동안 비활성화 된다.

2️⃣ 컴포넌트 라이프사이클 훅

또한 SSR동안은 동적인 업데이트가 일어나지 않는다. 따라서 onMounted , onUpdated 같은 생명주기 훅들은 SSR동안 호출되지 않는다. 이들은 오직 클라이언트에서만 호출된다!

만약 타이머 함수가 <script setup> 의 루트 범위에 작성되어있고 위와 같은 생명주기 훅에서 해제된다면, SSR동안 이 함수는 영원히 해제되지 않고 결국 SSR이 끝나지 않는다. 이런 친구들은 모두 생명주기 훅으로 모아두어야 한다.

3️⃣ 플랫폼 의존 API 사용시 주의

만약 코드가 window 나 document 와 같은 브라우저 전용 전역을 직접 사용한다면, SSR시 오류가 난다. SSR 환경은 Node.js환경이기 때문이다.

따라서 서버와 클라이언트 간에 공유되지만 플랫폼이 다른 API인 경우 이를 플랫폼 범용 API내에 래핑하거나 애초에 이런 기능을 지원하는 라이브러리에 의존하는게 좋다.

예를들면 node-fetch 는 클라이언트와 서버 양쪽에서 모두 동일한 fetch API를 수행한다.

브라우저 전용 API라면 eg) window 이를 onMounted 와 같은 클라이언트 전용 생명주기 훅 내에서 접근하는 것이 좋다.

4️⃣ 교차 요청 상태 오염(Cross-Request State Pollution)

vue의 상태관리를 정리한 문서에서 반응형 객체를 이용한 상태관리가 SSR에서 문제를 일으킬 수 있다는 내용을 서술했었다.

상태관리

위 패턴은 JS모듈의 루트 범위(프로젝트 전 범위)에서 상태를 공유하도록 반응형 객체를 선언한다.

그런데 이런 방식은 해당 상태 관리 객체를 싱글톤으로 만든다.