프론트엔드 기술 면접 준비를 하면서 해당 질문을 접하게 되었는데, 회사에서 React 기반의 SPA 를 구현하고 있음에도 해당 개념에 대해 제대로 숙지하지 못하고 있다는 것을 깨닫게 되었다. 이 글에서는 서버사이드 렌더링과 클라이언트 사이드 렌더링, 그리고 SPA/MPA/PWA 에 대해 정리해보고자 한다.

1. 서버 사이드 렌더링 (SSR)

서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식으로 브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링을 시킨다.

장점

• 해당 HTML 파일에는 이미 DOM 이 다 구성이 되어 있기 때문에, 브라우저가 받고 바로 그릴수가 있어서 초기 로딩 속도가 빠르다. 따라서 사용자가 컨텐츠를 빠르게 볼 수 있다.
• DOM에 이미 내용이 다 차있기 때문에 검색엔진의 검색 봇이 크롤링 시 정확한 정보를 가져갈 수 있어서 SEO에 좋다.

단점

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험(UX)가 SPA에 비해서 좋지 않다.
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.

2. 클라이언트 사이드 렌더링 (CSR)

브라우저가 웹 서버에 HTML과 JS파일을 요청한 후 로드되면 JS파일을 실행하면서 DOM에 내용을 추가하면서 렌더링한다.

장점

• 초기 렌더링 이후에는 서버 의존 없이 클라이언트가 혼자 렌더링할 수 있기 때문에 빠른 화면 전환, 인터랙션 등의 사용자 경험(UX)이 좋다.
• 서버에 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다.

단점

• 모든 스크립트 파일이 로드될 때까지 기다려야 한다.
• 리소스를 청크(chunk)단위로 묶어서 요청할 때만 다운받게 하는 방식으로 완화시킬 수는 있지만 완벽히 해결할 수 없다.(코드 스플리팅)
• 처음 렌더링 시 어떤 DOM을 그릴지 판단하고, 그리는 작업을 하는 동안 딜레이가 발생하게 된다.
• index.html 에 뼈대만 있어 검색엔진의 검색 봇이 크롤링 시 아무 내용이 없기 때문에 검색엔진 최적화(SEO: Search Engine Optimization)의 문제가 있다.

  ❗️제공하고 있는 서비스가 SEO가 필요한가에 대해 고민해 볼 필요성이 존재한다. 검색엔진에 의해 검색되었으면 좋겠는 데이터만 SEO가 필요하지 모든 데이터가 SEO가 필요한 것은 아니기 때문이다.

3. SPA / MPA

SPA (Single Page Application)

• 하나의 페이지로 구성된 앱
• 동일한 HTML, CSS, JS 파일로 접속한 페이지에 맞게 화면을 구성한다.
  (이미 로드된 페이지에 DOM만 갈아끼는 느낌?)

MPA (Multi Page Application)

• 여러개의 페이지로 구성된 앱
• 하이퍼링크를 클릭했을 때 해당 페이지로 가고 화면이 한번 깜빡이면서 새로운 페이지가 로드되고 그때 해당 페이지에 맞는 HTML, CSS, JS를 받아 화면을 그린다.

❗️모바일의 경우 적은 트래픽과 빠른 인터렉션이 중요하다는 점에서 SPA 와 잘 맞는다고 한다. 초기 로딩은 살짝 느릴 수 있으나 모바일 브라우져도 캐싱을 하기 때문에 이후에 네트워크 트레픽의 소모가 적고 PWA를 활용하면 오프라인 상태에서도 인터렉션이 가능하다고 한다.

4. PWA

프로그래시브 웹 앱(Progressive Web App)이라고 하며 웹과 네이티브 앱의 기능을 모두 갖춘 형태이다.

• HTML, CSS, JS 로 이용해 만든 웹앱을 모던한 웹 브라우저 API와 결합해 크로스 플랫폼에서 동작하는 어플리케이션을 만든다.
• 웹처럼 URL로 접근하여 애플 스토어나 구글 스토어를 거치지 않고 모바일 디바이스 홈 화면에 바로 설치하여 사용이 가능하다.
• 설치를 하지 않더라도 모든 데이터를 기본적으로 캐싱하여 오프라인 상태에서도 데이터를 볼 수 있다.

참고

• Naver D2 어서와 SSR 도입은 처음이지?
  https://d2.naver.com/helloworld/7804182
• 위펄슨 기술블로그
  https://tech.weperson.com/wedev/frontend/csr-ssr-spa-mpa-pwa/#pwa-progressive-web-app