[기술면접대비] SPA vs. MPA, CSR vs. SSR, SEO, 정적 페이지와 동적 페이지

요약

• 정적 페이지는 미리 작성된 HTML, CSS 및 JavaScript 파일로 구성되며, 동적 페이지는 서버 측 스크립팅 언어를 사용하여 생성된다.
• SPA는 하나의 HTML 페이지로 구성되고 JavaScript를 사용하여 동적으로 업데이트되는 반면, MPA는 여러 HTML 페이지로 구성되고 각 페이지는 서버에서 렌더링된다.
• CSR은 클라이언트 측 JavaScript를 사용하여 페이지를 렌더링하는 기술이고, SSR은 서버 측에서 HTML 페이지를 렌더링하는 기술이다.

SPA와 MPA

MPA (Multiple Page Application)

• 여러 개의 페이지로 구성된 애플리케이션
• 사용자가 페이지를 요청할 때마다 (= 화면이 전환될 때마다) 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션 (서버로부터 새로운 HTML 파일을 받아 웹페이지 전체 리렌더링)

SPA (Single Page Application)

• 하나의 HTML 파일을 기반으로 JS를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
  • 한 개의 페이지로 구성된 애플리케이션
• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드
  • AJAX, WebSockets 등의 기술을 사용하여 페이지를 새로고침 없이 필요한 데이터만 요청하고 업데이트한다.

---

SSR vs. CSR

페이지 렌더링 방식

SSR (Server Side Rendering)

• 서버에서 렌더링 준비를 끝낸 상태로 클라이언트에 전달하는 방식.
• 서버에서 사용자에게 보여줄 페이지(HTML)를 받아와서 페이지 전체를 렌더링하는 방식.
• SSR에선 브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링을 시킨다.

장점

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다. (완성된 HTML을 바로 보여줄 수 있음)
• 초기 HTML이 페이지에 대한 정보를 담고 있으므로 검색 엔진 최적화(SEO)가 가능하다.

단점

• 매번 서버에 HTML 파일을 요청하므로 서버의 부하가 커진다.
• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않다.
  • 화면 깜빡임 발생
• 초기 로딩 속도가 빠르나 JS 로딩이 완료되어야 사용자와 상호작용이 가능하다. 즉, TTV(Time To View)와 TTI(Time To Interaction) 사이의 간극이 있다.

CSR (Client Side Rendering)

• 초기에는 빈 HTML을 가지고 있고, 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식

장점

• 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험(UX)이 좋다.
  • 변경되는 부분만 다시 렌더링되므로 화면 깜빡임이 없음
  • 초기 로딩 이후 구동 속도가 빠름
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.
• CSR에선 브라우저가 서버에 HTML과 JS 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해 동적으로 렌더링을 시킨다.
  • TTV(Time To View)와 TTI(Time To Interaction) 사이의 간극이 없다.

단점

• 초기 로딩시 모든 정적 리소스를 다운받아야 하므로 초기 로딩 속도가 느리다.
• 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
  • 리소스를 청크(Chunk) 단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수 있지만 완벽히 해결할 수는 없다.
• 초기에 빈 HTML파일을 가지고 있으므로 검색 엔진 최적화(SEO)에 불리하다.
  • 검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪는다.
  • 구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.

🧐 TTV, TTI? (time-to-view, time-to-interect)

• TTV는 타임 투 뷰의 약자로, 콘텐츠가 화면에 보여지는 시점이고, TTI는 타임 투 인터렉트로 사용자와 상호작용이 가능한 시점을 의미한다.
• 클라이언트 사이드 렌더링을 사용하면 TTV와 TTI가 동일하다.
  • 서버에서 빈 HTML 파일을 받아오고, 자바스크립트 파일도 모두 가져온 이후에 렌더링하기 때문에 보이는 시점과 상호작용 하는 시점이 동일하다.
• 서버 사이드 렌더링을 사용하면 TTV가 TTI보다 더 빠르다.
  • 서버에서 완성된 HTML 파일을 받아오면 콘텐츠가 화면에 먼저 보이게 된다. 그 후 서버에 인터렉션을 위한 자바스크립트를 요청하게 되고, 응답 받게 되면 그때부터 실제로 상호작용이 가능하.

CSR의 단점을 보완하려면?

단점 1. 느린 초기 로딩 속도

• code splitting, tree-shaking, chunk 분리를 통해 JS 번들 크기를 줄여서 개선할 수 있다.

단점 2. 불리한 SEO

• 웹팩 플러그인을 통해 각 페이지에 대한 HTML을 미리 생성해두는 pre-rendering을 통해 개선 가능

전통적인 방식을 이용한다면 SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다.
전통적인 방식을 벗어나 SPA에서도 적절히 SSR을 구현할 수 있다.

SPA에 SSR을 구현하는 방법?

• CSR을 사용중인 SPA에 SSR과 SSG를 도입해서 초기 로딩 속도, SEO 둘 다 개선 가능 → Next.js의 장점

SSG(Static Site Generation)란?
서버에서 HTML을 보내준다는 점은 SSR과 동일하나 SSR은 요청시 HTML을 만들고, SSG는 HTML을 미리 다 만들어 놓는다는 차이점이 있다.

CSR? SSR? 무엇을 써야할까?

💡 웹페이지의 특성에 따라 선택하자!

Case 1.

• 유저랑 상호작용이 많음, 더 나은 사용자 경험을 제공하고 싶을 때
• 대부분 고객 개인 정보로 이루어진 페이지여서 SEO가 필요없을 때, 데이터 보호가 더 중요

→ CSR!

Case 2.

• SEO가 중요함(회사 사이트, 쇼핑몰, 블로그 등)
• 누구에게나 항상 같은 내용을 보여줌

→ 내용 업데이트가 자주 된다면 SSR!

→ 내용 바뀔 일이 거의 없으면 SSG!

Case 3.

• SEO도 중요
• 유저랑 상호작용도 많음

→ Next.js와 같은 Universal Rendering을 지원하는 프레임워크를 사용하여 각 페이지 별로 적절한 렌더링 방식을 선택

→ Universal Rendering은 기존 CSR의 장점은 유지하면서 초기 로딩 속도와 SEO를 개선할 수 있는 방법이다.

---

SEO(검색 엔진 최적화)란?

• 구글과 같은 사이트의 검색 엔진들이 서버에 등록된 사이트를 돌아다니면서 문서를 분석한다.
• 분석한 데이터로 검색 결과를 표시하게 되는데, 이때 콘텐츠에 포함된 정보를 검색 엔진이 잘 수집할 수 있도록 하는게 검색 엔진 최적화이다.

CSR에서 SEO 이슈가 발생하는 이유?

• 클라이언트 사이드 렌더링으로 작성된 사이트들은 일반적으로 처음 접속하면 body가 비어있는 HTML 파일을 받아오고, 자바스크립트를 통해 동적으로 콘텐츠를 렌더링한다.
• 검색엔진의 봇은 사이트를 돌아다니면서 HTML 문서 정보를 수집하는데, 싱글 페이지 어플리케이션에서는 body가 비어있는 HTML 문서를 수집하게 된다.
• 구글의 봇은 자바스크립트를 실행하여 수집할 수 있지만, 대부분의 봇들은 싱글 페이지 어플리케이션의 비어있는 문서를 수집하기 때문에 검색엔진 최적화가 잘 되지 않는다.

CSR에서 검색 엔진 최적화를 하려면?

사전 렌더링 방식 적용

• 클라이언트 사이드 렌더링을 사용한다면, 사전 렌더링 방식을 적용할 수 있습니다.
• 검색 엔진이 빈 HTML 파일 대신 내용이 포함된 HTML을 가져갈 수 있도록 빌드 타임에 데이터가 포함된 HTML 파일을 생성하는 방식을 사용할 수 있습니다.
• SPA에서 사용하는 렌더링 방식은 CSR.

SEO, 어떻게 해야 해?

SSR 적용

• 서버 사이드 렌더링은 서버에서 HTML문서를 만들어서 응답하기 때문에 사용자도, 검색 엔진도 완성된 HTML 파일을 응답받기 때문입니다.

온페이지 SEO 최적화

• 제목이나 헤드 태그 등 HTML 파일에 문서 정보를 잘 나타낼 수 있도록 설정해야 합니다.

---

정적 페이지와 동적 페이지

정적 페이지와 동적 페이지는 웹 페이지를 렌더링하는 방식에 따라 구분되는 두 가지 유형의 웹 페이지이다.

정적 페이지

• 미리 작성된 HTML, CSS, JavaScript 파일로 구성된다.
• 웹 서버는 사용자 요청을 받으면 해당 파일을 그대로 클라이언트에게 전송한다.
• 사용자 요청에 따라 페이지가 변경되지 않는다.
• 로딩 속도가 빠르고 개발 및 유지 관리가 간편하다.
• SEO에 유리하다.
• 간단하고 정보가 많지 않은 웹 페이지에 적합하다.

동적 페이지

• 서버 측 스크립팅 언어(PHP, Python, Ruby 등)를 사용하여 생성된다.
• 웹 서버는 사용자 요청에 따라 데이터베이스에서 데이터를 가져와 페이지를 동적으로 생성한 뒤 사용자에게 전송한다.
• 사용자 맞춤형 콘텐츠 제공, 실시간 상호 작용 등이 가능하다.
• 개발 및 유지 관리가 더 복잡하다.
• SEO에 불리할 수 있다.
• 복잡하고 상호 작용이 많은 웹 페이지에 적합하다.
  • 정적 페이지는 미리 작성된 HTML, CSS 및 JavaScript 파일로 구성되며, 동적 페이지는 서버 측 스크립팅 언어를 사용하여 생성된다.