SPA의 한계 극복하기

Vue.js와 같은 Single Page Application(SPA)은 뛰어난 속도와 사용자 경험을 제공합니다. 부드러운 전환과 빠른 상태 관리는 개발을 용이하게 만듭니다.

비즈니스가 유기적 검색 트래픽(organic search traffic)에 의존한다면 문제에 직면하게 됩니다. 검색 엔진 봇이 SPA를 방문할 때 종종 빈 HTML 셸(shell)만 보게 되기 때문입니다. Google은 JavaScript를 느리게 처리하며, 다른 검색 엔진들은 콘텐츠를 인덱싱하는 데 아예 어려움을 겪기도 합니다.

저희는 Vue 3를 사용하여 Global Full-Stack Developer (GFD)를 구축했습니다. 전체 코드베이스를 Nuxt와 같은 Server-Side Rendering (SSR) 프레임워크로 옮기지 않으면서도 SEO가 필요했습니다.

저희는 빌드 타임 프리렌더링(build-time prerendering)을 선택했습니다.

프리렌더링은 빌드 프로세스 중에 특정 라우트를 정적 HTML 파일로 변환합니다. 봇이 사이트를 방문하면 빈 div 대신 전체 HTML 문서를 받게 됩니다.

저희는 Vite 설정을 위해 vite-plugin-prerender를 사용했습니다.

구현을 위해 다음 단계를 따르세요:

  1. 플러그인을 개발 의존성(development dependency)으로 설치합니다: npm install vite-plugin-prerender -D

  2. vite.config.js를 구성하여 라우트를 나열합니다.

  3. 빌드 명령어를 실행합니다.

이 방법은 전체 SSR의 복잡함 없이 SEO 이점을 제공합니다.

출처: https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd