렌더링 방식

Single Page Application(SPA)과 Client Side Rendering(CSR)

• SPA는 한 개의 페이지로 이루어진 애플리케이션을 뜻한다.
  • 과거에는 서버로부터 새로운 페이지를 요청하고 파싱하는 Multi Page Application(MPA) 방식이었다.
• SPA는 하나의 페이지(HTML)를 동적으로 변경해 콘텐츠를 렌더링하기 때문에 MPA 방식보다 효율적이다.

그렇다면 SPA는 단점이 없나요?

• 애플리케이션의 규모가 커지면 초기에 로딩해야 하는 자바스크립트, CSS 번들 파일의 용량이 증가한다.

  → 애플리케이션 초기 로딩 성능 저하의 원인으로 이어진다.

• 검색 엔진 최적화(SEO)가 어려워진다.

  • 검색 엔진의 bot은 자바스크립트 코드를 실행하지 않고, 파싱된 HTML만 대상으로 크롤링 한다.
  • SPA의 경우 실제 렌더링 되는 데이터를 크롤링하기 어렵다.

SPA의 단점을 보완하는 방법은..

• 트리 셰이킹이나 코드 스플리팅 같은 기법을 사용하여 번들 파일의 용량을 줄일 수 있다.
• 또한 Server Side Rendering(SSR)을 사용해 SPA의 SEO 최적화를 보완할 수 있다.

많은 개발자들이 SPA의 가치를 인정했고, 이로 인해 SPA 프레임워크가 주목을 끌게 되었다. 대표적인 SPA 프레임워크에는 Angular, React, Vue,js가 있다.

---

Server Side Rendering(SSR)

• SSR은 서버에서 사용자에게 보일 페이지를 모두 구성해 사용자에게 보여주는 방법을 뜻한다.
  • MPA 애플리케이션에서 사용하던 렌더링 방식이다.
• 초기 로딩 속도나, SEO 측면에서 장점이 있기 때문에 사용하게 되었다.
  • 봇 서치, 초기 페이지 렌더링 시점 속도 등…
• CSR을 주로 사용하고, SSR을 적재적소에 사용해 단점을 보완하는 방법이 유용하게 사용되고 있다.

CSR을 사용하는데 이제 SSR을 곁들인 (CSR + SSR)

• 동적인 구성요소가 많아 초기 페이지의 완벽한 구성이 오래 걸릴 때(특히 네트워크가 느릴 때) SSR을 도입해 페이지의 콘텐츠 렌더링 완료 시점을 개선할 수 있다.
• Node.js 기반의 SSR을 도입해 CSR + SSR 형태로 개발하는 방식을 많이 사용한다.
• CSR + SSR 방식을 고수준 API로 지원하는 Next.js(React 기반)와 Nuxt.js(Vue.js) 프레임워크도 있다.