SPA에서 보는 SEO, CSR과 SSR

회사에서 콘텐츠를 기획 및 개발, 운영하며 겪는 일 중 SPA 환경에서 SEO에 대한 접근 방식에 대해 글을 써보려고 합니다.

Single Page Application (SPA)

웹 애플리케이션은 SPA(Single Page Application) 등장 이후로 많은 변화가 생겼습니다. 이전의 MPA(Multi Page Application) 방식이 여러 페이지가 있고 페이지 이동을 할 때마다 새로 고침이 되면서 깜빡이는 현상이 있었다면, SPA 방식은 하나의 HTML 페이지에서 필요한 데이터만 받아 헤더와 푸터를 고정한 채로 특정 영역만 선택적으로 바꾸기 때문에 새로고침할 필요가 없어 깜빡임이 없는 등 사용자 경험을 개선한 방식입니다.

Client-Side Rendering (CSR)

Client-Side Rendering(CSR)은 SPA에서 가장 일반적인 렌더링 방법 중 하나입니다. 사용자가 페이지를 요청할 때 클라이언트는 빈 껍데기 페이지를 반환하고, 자바스크립트를 다운로드한 뒤 내용을 동적으로 생성하여 보여줍니다. 또한 필요한 데이터만 API 서버에서 받아오기 때문에 이전에 서버에서 완성된 HTML 데이터를 전달해 주던 방식과 달리 서버에 전해지는 부하를 훨씬 덜어낼 수 있었습니다. 대신에 해당 페이지만 불러오던 MPA 방식과 달리 SPA 특성상 처음에 모든 자바스크립트 파일을 가져와야 하기 때문에 초기 로딩 속도가 MPA에 비해 상대적으로 느립니다. 그럼에도 SPA는 화면의 변화가 있을 때마다 깜빡임 없이 즉각적으로 화면에 반영되어 사용자의 입장에서 페이지가 빠르게 이동하는 것처럼 느끼게 하는 효과가 있습니다.

다만, 대부분의 웹 크롤러, 봇들은 자바스크립트를 실행시키지 못하고 HTML 콘텐츠만 수집하기 때문에 CSR 방식으로 개발된 페이지에서 빈 페이지로 만 전달받기 때문에 SEO에서 불리한 상황에 놓이게 됩니다.

이에 대한 해결 방법으로 SSR을 제공하는 프레임워크를 사용하거나 SPA와 MPA를 섞은 하이브리드 방식을 채택하여 SPA로 구현하였을때 효과적인 페이지와 검색에 노출이 되어야하는 페이지는 MPA방식을 사용하는 방법으로 SEO 처리를 할 수 있습니다.

Server-Side Rendering (SSR)

Server-Side Rendering(SSR)은 서버 측에서 HTML 페이지를 생성하여 클라이언트에 제공하는 방법으로 이전 MPA 방식으로 개발할 때 주로 사용하던 방법 중 하나입니다. CSR은 브라우저에서 html, 자바스크립트를 받아 렌더링 한다면 SSR은 브라우저에서 해야 할 렌더링을 서버에서 렌더링 하고 html 파일을 브라우저로 한 번에 보내줍니다. 때문에 SEO 처리에 필요한 정보들을 미리 입력하면 메타 태그 등에 담아 줄 수 있게 됩니다. React.js에서의 Next.js 나 Vue.js에서의 Nuxt.js가 이러한 SSR을 쉽게 처리할 수 있도록 도와주는 프레임 워크로 SEO 처리를 위해 선택하기 좋은 솔루션이겠습니다.

[참고] https://www.chanstory.dev/blog/post/4

[참고] https://hanamon.kr/spa-mpa-ssr-csr-%ec%9e%a5%eb%8b%a8%ec%a0%90-%eb%9c%bb%ec%a0%95%eb%a6%ac/#respond

[참고] https://velog.io/@kws60000/SPASingle-Page-Application-1-%EB%93%B1%EC%9E%A5-%EB%B0%B0%EA%B2%BD

[참고] https://www.chanstory.dev/blog/post/4

[참고] https://v3-docs.vuejs-korea.org/guide/scaling-up/ssr.html#rendering-an-app

[참고] https://www.ascentkorea.com/seo-for-spa/