[Vue] SPA, CSR, SSR, SEO

TOC

• FE 개발
• SPA
• CSR
• SSR
• CSR과 SSR의 선택
• SEO

FE 개발

• HTML, CSS, JS를 활용해 데이터를 볼 수 있게 만들어 줌
• 사용자는 데이터와 상호작용(Interaction) 가능

SPA

SPA란?

• Single Page Application(단일 페이지 어플리케이션)
• 최초에만 페이지를 서버로부터 다운로드, 이후 동적으로 DOM 구성
• 처음 페이지를 받은 이후 서버로부터 새로운 전체 페이지를 불러오는 것이 아닌, 필요한 부분만 현재 페이지에서 동적으로 재작성
• 연속되는 페이지 간의 사용자 경험(UX) 향상
• 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요
• 동작 원리의 일부가 CSR(Client Side Rendering) 구조를 따름

SPA의 등장 배경

• 과거 : MPA(Multi Page Application)
• 요청에 따라 매번 새로운 페이지 응답
• 스마트폰의 등장으로 모바일 최적화의 필요성 대두
• 모바일 네이티브 앱과 같은 형태의 웹페이지 필요
• CSR, SPA의 등장으로 1개의 웹 페이지에서 여러 동작이 이루어져 모바일 앱과 비슷한 UX 제공

CSR

CSR이란?

• Client Side Rendering
• 클라언트에서 화면 구성
• 최초 요청 시 HTML, CSS, JS 등 데이터를 제외한 각종 리소르를 응답
• 이후 클라이언트에서는 필요한 데이터만 요청해 JS로 DOM을 렌더링
• 뼈대만 받고 브라우저에서 동적으로 DOM 구성

CSR의 장점

• 서버-클라이언트 트래픽 감소 : 웹 App에 필요한 정적 리소스를 최초 한 번 다운로드, 이후 필요한 데이터만 갱신
• UX 향상 : 전체 페이지 rerender 없이 변경되는 부분만 갱신

CSR의 단점

• SSR에 비해 전체 페이지 최종 렌더링 시점이 느림
• SEO에 어려움(최초 문서에 데이터 마크업이 없기 때문)

SSR

SSR이란?

• Server Side Rendering
• 서버에서 클라이언트에게 보여줄 페이지를 모두 구성하여 전달
• JS 웹 프레임워크 이전에 사용되던 전통적 렌더링 방식

SSR의 장점

• 초기 구동 속도가 빨라 클라이언트가 빠르게 컨텐츠 확인 가능
• SEO에 적합 → DOM에 이미 모든 데이터가 작성

SSR의 단점

• 모든 요청마다 새로운 페이지를 구성하여 전달
• 반복되는 전체 새로고침으로 UX 저하
• 상대적으로 트래픽이 많아 서버 부담 가중

CSR과 SSR의 선택

• 두 방식의 차이는 최종 HTML 생성 주체가 누구인가에 따라 결정

• 실제 렌더링 HTML을 서버가 만든다면 SSR, 클라이언트가 만든다면 CSR

• SSR과 CSR 중 단순히 어떤 것이 우위인 것이 아니라, 내 서비스 또는 프로젝트 구성에 맞는 방법을 적절히 선택하는 것이 중요

SEO

SEO란?

• Search Engine Optimization (검색 엔진 최적화)
• 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 노출될 수 있도록 하는 작업
• 구글의 등장 이후 검색엔진들이 컨텐츠의 신뢰도를 파악하는 기초 지표로 사용
• 다른 웹 사이트에서 얼마나 인용되었는지 반영
• 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화

SEO 대응

• SPA 프레임워크는 SSR을 지원하는 SEO 대응 기술 존재 → SEO 대응이 필요한 페이지에 대해 선별적 SEO 대응 가능

• 별도의 프레임워크 사용

• Nuxt.js : Vue.js의 SSR 지원

• Next.js : React의 SSR 지원