Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
프론트엔드
Vue SSR 제대로 적용하기 (feat. Vanilla SSR)
두줄요약
SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.
핵심 내용
- SSR의 개념, 필요 시점, Node.js 필요성, 프론트엔드 관점의 역할 정리
- Vanilla JS로 CSR 분리, 서버에서 HTML 문자열 생성, Hydration으로 이벤트 복원하는 흐름 설명
- Vue SSR 적용을 위해 client/server 분리, 서버 번들·클라이언트 매니페스트 생성, router/store의 인스턴스 분리와 state 동기화 구성
- SSR 실패 시 CSR로 대체하는 전략과 브라우저 환경·Node.js 환경 구분, 요청별 store/router 생성 같은 유의점 정리
적용해볼 점
- 검색 노출이나 초기 화면 표시가 중요한 일부 페이지에 선택적으로 SSR 적용 고려
- SSR용 코드에서는 DOM 접근을 CSR 시점으로 미루고, 요청마다 별도 router/store 생성
- 빌드 산출물과 manifest를 활용해 SSR/CSR을 함께 구성하고, 실패 시 CSR fallback까지 준비
