Vue SSR 제대로 적용하기 (feat. Vanilla SSR)

핵심 내용

• 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까지 준비