CSR, SPA / SSR, MPA 그리고 Nuxt Universal

들어가며

React, Vue 등을 활용하여 개발한 웹서비스는 대부분 SPA로 개발되었을 것이다.
그러나 SPA 에도 명백히 단점이 존재하고, 해당 단점을 극복하기 위해 위와같은 SPA 프레임워크를 쓰면서도
SSR이 되어야 하는 상황이 존재할 것이다.

그러한 것을 가능하게 하는 Next.js, Nuxt.js 등의 프레임워크가 있는 것이고
그 중에서도 오늘은 Nuxt.js 의 Universal Mode를 정리해보려고 한다.

시작하기에 앞서서 CSR, SSR 부터 정리해보자.

CSR (Client Side Rendering)

• React, Vue 등을 활용한 SPA (Single Page Application) 에서 사용되는 방식
  • 최초 한번의 페이지에 대해서만 서버로 부터 받은 다음, 이후에는 필요한 데이터만 서버에 요청하며 페이지를 갱신한다.
• 필요한 모든 코드들이 JS 파일에 번들되어 받아지기 때문에 모든 리소스를 한번에 가져오기 때문에 초기 렌더링 속도가 느리다.
• 페이지 전환시에는 이미 필요한 리소스를 가지고 있기때문에 속도가 빠르다. (첫 페이지 로딩시간 > 나머지 페이지 로딩시간)
  • 이후에 일어나는 화면 전환은 화면 깜빡임 없는 부드러운 화면전환이 일어난다.
• 서버에는 데이터(API)만 요청하는 형태
• HTML 파일 자체에는 내용이 없으므로 SEO 에 취약.

SSR (Server Side Rendering)

• 대중적인 SPA 의 등장 전인 전통적인 MPA (Multi Page Application) 에서 사용되는 방식
• 서버가 데이터를 포함한 페이지를 직접 구성한 뒤에 클라이언트로 내려주는 방식.
• 서버에서 이미 렌더링이 된 형태로 받아지기 때문에 초기 로딩이 빠르다.
• 페이지를 전환할 때마다 첫 페이지를 로딩한 과정이 동일하게 재실행 된다. (첫 페이지 로딩시간 == 나머지 페이지 로딩시간)
• 화면의 전환이 사실상 새로운 페이지에 대한 이동이기 때문에 화면이 깜빡거린다.
• SEO 대응이 가능

Nuxt.js Universal Mode

공식문서에서 표현하기로는 아래와 같다.

Isomorphic application (server-side rendering + client-side navigation)

굳이 해석을 해보자면 '동형사상의 어플리케이션'인데,
개발경험으로 비추어 해석하면 서버사이드의 로직과 클라이언트 사이드의 로직이 동일한 코드를 기반으로 실행되기 때문에 해당 표현이 사용된게 아닐까 싶다.

일단 더 중요한 부분은 뒤에 괄호안에 작성된 부분이다.

server-side rendering + client-side navigation

이게 사실상 Universal Mode 의 핵심이라고 생각된다.

• Server Side Rendering + Client Side Navigation
  • 서비스 최초 접속시에는 SSR 방식으로 화면이 렌더링 된다. 그리고 이후의 화면 전환은 CSR 방식으로 진행이 된다.
• 위 기능이 가능하기위해서 아래 3가지 기능이 제공되어야 함 (당연하게도 Nuxt가 알아서 해준다)
  • 하이드레이션(Hydration)
  • 코드 분할(Splitting)
  • 프리페칭(Prefetching)

하이드레이션(Hydration)

• 렌더링 과정을 마치고 브라우저로 전달된 HTML파일을 기반으로 자바스크립트 코드들을 실행하는 동작
• 하이드레이션의 결과로 SSR 방식으로 접속한 페이지 내에서, 이후에는 SPA 와 같은 동작 및 사용성을 제공

코드 분할(Splitting)

• 코드 전체를 로드하지 않고 분할해서 필요에 맞게 번들로 나눠 가져오는 것
• 필요한 번들만 가져오기 때문에 로딩 속도가 빨라지는 장점이 있다.
• 당장 방문할 페이지의 렌더링에 필요한 번들만 서버로부터 가져온다.
• 한번 다운로드된 번들들은 캐싱이 돼서 재활용이 가능하다.

프리페칭(Prefetching)

• 화면에 노출된 <nuxt-link> 에 대해서 해당 페이지를 렌더링 하는데 필요한 번들을 미리 불러옴
• 인터섹션 옵저버(Intersection Observer)를 사용하여 뷰포트에 이동할 페이지 링크가 노출되면 번들을 요청한다.
  • 개인적으로는 제일 좋다고 느낀 부분이다. 쉽게말하면 스크롤 중에 화면에 노출된 컴포넌트를 파악해서 동적으로 해당 컴포넌트의 번들을 미리 불러오는 거다.

마치며...

나의 블로그는 나처럼 근본이 부족한 사람들에게 주로 읽히지 않을까 싶어서 내 수준을 타겟으로 작성하고 있다.
이해한 내용을 최대한 단순화 해서 쉬운 단어와 표현으로 작성해보았다.

현재 진행중인 프로젝트가 SEO 가 굉장히 중요한 서비스이기 때문에 Nuxt.js 를 택하여 개발중인데
오픈까지 다 해놓고 이제와서 Universal Mode에 대해 자세히 찾아봤다... 노근본 개발자의 종특이다

React로 부터 나온 Next.js 가 이와 비슷한 컨셉의 원조일텐데
react 스터디를 하면서 해당 내용도 같이 정리해보면 좋을 것 같다.