Vue SRR 잘라먹기 - Writing Universal Code

universal code란 클라이언트와 서버에서 모두 동작하는 코드를 의미한다. 플랫폼과 케이스의 api 차이 때문에 우리의 코드는 다른 환경에서 작동시 완전하게 똑같이 작동하지 못 한다.

서버에서의 데이터 반작용성

서버사이드는 클라이언트와 같이 분리된, 신선한 인스턴스를 제공해야한다. 이는 cross-request state pollution을 방지하기 위함이다.
 actual rendering process는 구분되어야 하기 때문에, 우리는 데이터를 서버에  pre-fetching 한다. 이는 렌더링이 시작 될 때, 어플리케이션 상태는 이미 resolved 되어있게 됨을 의미한다. 이는 데이터 반작용성이 서버에서 필요하지 않음을 이야기 하고,  기본적으로 disabled 되어 있다. disabling data reactivity는 또한  reactive objects 안의 데이터를 converting 하는데 들어가는 perfomance cost 

컴포넌트 라이프사이클 훅

동적 업데이트가 없다면, 모든 사이클 훅 중 beforeCreate와 created만 SSR중 불려집니다. 나머지 훅은 클라이언트 측에서 실행됩니다.
beforeCreate 와 created에서 전역 side effect를 생성하지 않도록 해야합니다. 예를 들면 setInterval이 있습니다.  클라이언트에서의 코드는 타이머를 만들고 beforeDestroy나 destroyed에서 타이머가 tear down됩니다.  그러나 SSR에서는  destroy 훅이 없기 때문에 타이머가 영원이 지속됩니다. 이를 방지하기 위해서 side-effect code는 beforeMount 나  mounted로 옮기시기 바랍니다.

특정 플랫폼 api에 접근하기

대부분의 커스텀 디렉티브는 직접적으로 DOM을 조종하고 이는 SSR의 오류를 야기한다.  다음의 2가지 방법으로 다룰 수 있다:
1. 컴포넌트를 축약된 매커니즘으로 다루거나 Virtual-DOM 레벨( render function )으로 작업하라.
2.  컴포넌트에서 대체하기 힘든 커스텀 디렉티브가 있다면,  디렉티브의 옵션으로 서버 렌더러를 만들때 사용할 'server-side version'을 제공하라