[Nuxt] CSR, SSR, SPA, MPA

📌 개요

CSR, SSR, SPA + MPA 가 한 개의 글로 묶여 올라가게 된 이유는 뭘까...

Nuxt.js 를 사용하는 현장실습을 하면서 가장 많이 들었으나 들을 때마다 헷갈리던 개념들이기 때문이다.

CSR, SSR, SPA, MPA 개념들은 Nuxt 의 렌더링 과정을 알아볼 때 쓰인다.

관련하여, 브라우저의 렌더링 과정의 이해에 있어 도움이 될 것 같아 정리하고자 한다.

📌 CSR, SSR, SPA, MPA

💡 Nuxt 가 몰까나...

먼저, Nuxt 란 Vue.js 프레임워크 기반의 개발 환경 구축에 도움을 주는 프레임워크이다.

Vue 프로젝트에서 사용되는 여러 유용한 라이브러리들을 기본적으로 탑재하고 있는 프레임워크라고 할 수 있다.

✔️ Single Page Application (SPA)

• 서버로부터 처음만 페이지를 받아오고 이후에는 동적으로 DOM 을 구성하여 렌더링 되는 화면이 바뀌게 하는 것이다.
• SPA 로 개발된 웹 사이트에서 카테고리에 있는 각 메뉴를 선택하면, 헤더는 고정된 상태로 메인 화면 또는 특정 컴포넌트 부분만 바뀌곤 한다.
• CSR 로 렌더링한다.
  
  • 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달 받아서 클라이언트에서 필요한 페이지를 갱신하기 때문이다.

✔️ Multi Page Application (MPA)

• 탭을 이동할 때마다 서버로부터 새로운 HTML 을 받아와서 페이지 전체를 렌더링하는 웹 페이지 구성 방식이다.
• SSR 로 렌더링한다.
  • 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 SSR 로 렌더링한다. 

✔️ Client Side Rendering (CSR)

1. 유저가 웹 사이트에 방문
2. 브라우저가 서버에 콘텐츠 요청
3. 서버가 빈 뼈대 뿐인 HTML 응답
4. 브라우저가 연결된 JavaScript 링크 통해 서버로부터 다시 JavaScript 파일 다운로드
5. JavaScript 를 통해 동적으로 페이지 만들기
6. 브라우저에 띄워줌

• 데이터가 없는 빈 깡통인 HTML (이외에 static 파일들) 만 받아오고, 데이터는 깡통인 문서와 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식이다.
• 클라이언트 측에서 렌더링하는 방식이다.
• 브라우저가 하는 일이 많다!
• 단점 CSR 은 브라우저가 파일을 다운로드하고 동적으로 DOM 을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다.
  • 하지만 초기 로딩 이후엔 페이지 일부를 변경할 때 서버에서 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠름!
• 단점 브라우저들이 가지는 웹 크롤러는 HTML 을 읽어 검색 가능하게 하는데 웹 크롤러가 보기에 HTML 이 텅텅 비어 있는 것처럼 보여서 색인할 만한 콘텐츠가 존재하지 않기 때문에 SEO (검색엔진 최적화) 에 불리하다는 단점이 있다.
• 언제 사용? 사용자와 상호작용이 많을 때

✔️ Server Side Rendering (SSR)

1. 유저가 웹 사이트에 방문
2. 브라우저가 서버에 콘텐츠 요청
3. 서버가 페이지에 필요한 데이터 즉시 얻어와서 모두 삽입
4. CSS 까지 적용해서 렌더링 준비 마친 HTML, JavaScript 코드 응답
5. 브라우저는 JavaScript 코드 다운 받고 HTML 에 JavaScript 로직 연결

• 데이터까지 전부 삽입하여 완성된 HTML 을 받아오는 방식이다.
• 서버 측에서 렌더링 하는 방식이다.
• 그러니까, JavaScript 코드가 다 실행되기 전에 먼저 HTML 이 렌더링 화면을 볼 수 있는 것이다.
  • 그래서 CSR 보다 초기 구동 속도가 빠르다.
  • 단점  단, JavaScript 로직이 모두 연결되기 전까지 실제로 사용자의 입력에 응답하지 못할 수도 있다.
  • TTV(Time to View)와 TTI(Time to Interact) 간의 시간 간격이 존재하는 것이다.
• 단점 서버 부하가 있을 수 있다. 서버 요청이 있을 때마다 서버에서 렌더링을 하기 때문에 서버 부담이 증가한다.
• 언제 사용? 회사 홈페이지라서 상위 노출 많이 필요할 때, 누구에게나 같은 내용을 보여줄 때, 업데이트가 빈번하여 해당 페이지 데이터가 자주 바뀔 때

📌 Nuxt 에서의 SSR, CSR

즉, Nuxt는 컴포넌트 단위의 개발과 SPA의 단점(SEO) 극복을 위해, CSR 로 렌더링되는 SPA 프레임 워크인 Vue에 SSR을 지원하는 프레임워크이다. Nuxt는 CSR과 더불어 다양한 렌더링 모드를 가지고 있는데, 이 중 Universal Mode 를 통해 SSR을 지원함으로써, 더 나은 사용자 경험 및 성능을 제공하고 검색 엔진 인덱싱을 최적화한다.

✔️ Universal Mode

1. 유저가 웹 사이트에 방문
2. 브라우저가 서버에 콘텐츠 요청
3. 서버가 JavaScript (Vue.js) 파일을 이용해 페이지를 만들어 HTML 을 먼저 전달
4. 필요한 JavaScript 파일을 받은 뒤 클라이언트에서 다시 실행
5. 그 이후부터의 모든 router 이동은 CSR 로 작동

• 즉, 초기 렌더링 속도를 위해 SSR 방식을 사용하고 페이지 간의 이동 시에는 CSR 을 사용한다.
• 핵심은 Hydration, 코드 분할 (Code Splitting), Prefetching 이라고 한다.

💡Hydration 이 몰까나... 

• Hydration 이란 서버로부터 받은 정적 HTML 을 사용자와 상호작용할 수 있는 동적 DOM 으로 바꾸는 방법이다.
  • Universal Mode 에서 Nuxt 앱에 사용자가 최초로 접근하면 서버로부터 정적 HTML 을 받는 동시에 HTML 을 동적 DOM 으로 바꿔줄  자바스크립트 번들을 함께 받아온다.
  • 브라우저는 받아온 자바스크립트 번들을 통해 이미 그려진 정적 HTML 을 리렌더링 (re-rendering) 없이 사용자와 상호작용 할 수 있는 동적 DOM 상태로 바꿔준다.

💡Prfetching 이 몰까나... 

• <NuxtLink/> 가 페이지에 있을 경우, 해당 페이지들을 미리 서버에 요청하여 준비한다. 
• 뷰포트에 이동할 페이지 링크가 보이기만 해도 번들에 요청하는 것이다. 따라서 이미 클라이언트에 준비가 되어 있으므로 페이지 간 이동 속도가 빠르다.

✔️ SPA 와 CSR 은 같은 것일까? 반대로, MPA 와 SSR 은 같은 것일까?

아니다. SPA 는 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM 을 구성하여 렌더링 되는 화면이 바뀌게 한다.

동적으로 DOM 을 구성하여 렌더링 되는 화면이 바뀌게 하는 것이 CSR 이고 처음에 페이지를 받아오는 것은 SPA 이다. 

SPA 에서 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 그럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR 이라는 방식을 채택한 것이다. MPA 도 마찬가지로 동적이지 않은 페이지를 상황에 맞게 클라이언트에게 보여주기 때문에 SSR 방식을 채택한 것이다.

---

💡 SEO 가 몰까나... 

• 검색엔진 최적화
• 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화 하는 과정을 말한다.

📌 마무리

잉... 얼레벌레 정리했다 너무 많은 내용을 한 번에 정리하려고 욕심낸듯? 아니 몰랐는데 모르는 게 너무 많은 거였다...!! 대박 짱이지

나는 아직 시작이니까 갠찬아... 나아질 길만 남아줌 ㅋㅋ

🗃️ reference

Nuxt3 의 Universal Rendering 이란 무엇인가..

SSR 시작하기 전 알아야 할 것들 (feat. CSR) | 요즘IT