SSR & CSR (서버 사이드 렌더링 & 클라이언트 사이드 렌더링), Nuxt

렌더링이란?

: 요청받은 내용을 브라우저 화면에 표시하는/그리는 작업.

과정

- 서버로부터 데이타를 응답받아 Parsing하여 DOM트리 생성

- DOM 트리가 구축되는 동안 브라우저는 Render 트리 구축

- CSS 설정 및 위치 지정

- Render 트리가 그려짐

1. SSR (Server Side Rendering)

 - 전통적인 웹 어플리케이션 방식으로, 요청시 마다 서버에서 처리하여 새로고침으로 페이지 응답

 - 웹에서 기능과 데이터가 많아지면서 SPA(Single Page Application)이 생김 , 더 향상됨 UX를 위함

1-1) MPA (Multi Page Application)

 - page = html

2. CSR (Client Side Rendering)

 - 클라이언트에서 Javascript를 통해 렌더링 하는 방식

 - SPA (Single Page Application) 형식의 대부분 프론트엔드 라이브러리(Vue, React 등)가 CSR 방식으로 시작되었다. 그리고 초기 렌더링 시간 비용 문제, SEO 문제, 메타 데이터 동적 생성의 한계를 극복하기 위해 SSR 프레임워크를 모두 보유하고 있다.

2-1) SPA (Single Page Application)

 - 최초 한번 전체 페이지를 다 불러오고 HTML에 번들링된 js가 실행되며 페이지를 렌더링한다.

 - 클라이언트 요청에 따라 응답 데이터만 다시 페이지의 특정부분에 렌더링하는 Web Application 개념이다.

두 방식의 Workflow 비교

   

3. SPA의 장/단점

 + 필요한 부분만 중복없이 요청하므로 퍼포먼스 상 이득

 + 페이지 이동 자연스럽고 빠름 (UX)

 + 서버의 렌더링 연산을 클라이언트로 분산

 + 개발 생산성 개선 (컴포넌트 별 개발)

 + 다른 플랫폼과 공통으로 사용하는 Backend API 개발 가능

 - JS번들링 파일을 한번에 받기 때문에 초기 로딩 비용 있음 (=> code spliting으로 최적화 가능)

 - 렌더링의 부하를 클라이언트가 담당하기에 구형 단말기/성능이 낮은 단말기에서의 초기 로딩 비용이 클 수 있음

 - SEO의 한계 (pre-rendering, SSR)

 - 동적 metat data 생성 불가능 ex) open graph

 - 보안 이슈

4. SSR의 장/단점

 : 위의 SPA가 가지는 단점을 보완하기 위해 SSR(universal)의 개념을 도입

 + 초기 페이지의 컨텐츠는 서버사이드에서 생성하므로 SEO, 크롤링의 문제 해결 가능

 - 페이지 이동시 새로고침 및 중복된 로딩

 - 서버 렌더링 부하 (CPU)

 - 다른 플랫폼과 공유하는 Backend API 한계

 - 개발/배포 환경이 기존 CSR 방식보다는 까다로울 수 있음

=> Vue의 Nuxt, React의 Next등의 Server Side Rendering 프레임워크가 존재한다.

5. Vue의 SSR Framework : Nuxt.js

 - universal : Isomorphic application (SSR + Client Side Navigation)

 

nuxtServeInitmiddlewarevalidate()asyncData()fetch() 등의 과정을 최초 요청에서는 서버사이드에서 처리.

그 이후 페이지를 이동할 때는 클라이언트 사이드에서 동일한 로직을 통해서 페이지를 렌더링.

* 실제 코딩할 때 해당 코드가 서버/클라이언트 양쪽에서 모두 실행될 수 있다는 걸 항상 염두에 두고 작업 필요

* 완전 정적 SPA와 달리 서버 렌더링 앱에는 Node.js 서버를 실행할 수있는 환경이 필요

참고 링크 : https://linked2ev.github.io/devlog/2018/11/15/Javascript-2.-What-is-SSR/

참고 링크 : https://asfirstalways.tistory.com/244

참고 링크 : https://medium.com/aha-official/아하-프론트-개발기-1-spa와-ssr의-장단점-그리고-nuxt-js-cafdc3ac2053