SPA 그리고 SSR과 CSR

첫 프론트 엔드 개발을 위해 공부한 내용을 정리하는 글입니다. 따라서 정리가 안되어 있을 수 있고,
틀린 내용이 있을 수 있습니다.댓글 달아주시면 계속 수정해 나가겠습니다.

SPA

SPA 는 Single Page Application(이하 SPA) 의 약자입니다.

말 그대로 한 개의 페이지를 가진 애플리케이션을 의미하고, SPA 를 사용하는 이유를 통해 SPA 를 설명하고자 합니다.

SPA 를 사용하는 이유

• 사용자에게 친화적입니다
  • 새로운 데이터를 얻기 위해 페이지를 새로고침 하는 것이 필요한 부분만 갱신할 수 있습니다.
• 초기 렌더링 후 데이터만 받아오기 때문에, 상대적으로 서버 요청이 적습니다.
  • Server Side Rendering(이하 SSR) 처럼 새로운 페이지에 접속하기 위해 HTML, js 파일을 매 번 다운받는 것이 아닙니다.
  • 갱신되어야 하는 데이터가 있는 부분만 서버 요청을 통해 갱신하기 때문에, 첫 로딩 이후에는 SSR 보다 빠른 응답이 가능합니다.
• Virtual Dom
  • 😭 가상 돔 에 대해서는 사실 아는 내용이 많이 없습니다. 공부해서 추가해두도록 하겠습니다. 😭
• 프론트 엔드와 백 엔드 분리로 개발 업무의 분업화와 협업에 용이합니다.
  • 아직, 직접 경험해보지는 못했지만, 주변에 개발자로 활동하시는 지인분들에게 들은 내용으로는 많은 대기업에서 React 를 사용하여 분업을 한다고 들었습니다.
  • 😭 프론트 엔드 경험을 전무 하여 이 부분도 이번 프론트 엔드 첫 개발을 통해 경험해보고 수정하도록 하겠습니다. 😭
• 개발이 상대적으로 효율적이다.
  • Vanilla.js 로, 그리고 React, 혹은 Vue 를 통한 웹 개발 모두 해본 적이 없지만 그렇다고 합니다. 프론트 엔드 개발자로 현업에 종사하고 있는 친형을 통해 간접적으로 경험했습니다

지금까지 SPA 가 무엇인지, SPA 를 사용하는 이유를 통해 얘기해봤습니다.

CSR, 그리고 SSR

CSR, SSR 은 각각 Client Side Rendering, Server Side Rendering 의 약자입니다(이하 CSR, SSR).

위에서 얘기했던 SPA 는 맨 처음 화면을 다 받아오고이후에는 페이지를 새로 받아오지 않고 데이터의 수정,조회가 가능하고 싶어서 Client Side Rendering 라는 기법을 사용하는 것입니다.

 

SPA 와 CSR 은 비교 대상이 아닙니다.

SPA <-> MPA (Multi Page Application)
CSR <-> SSR

 

SSR은 과거, 그리고 현재에 많은 웹사이트에서 사용되고 있는 기법으로 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식입니다.

서버에서 렌더링을 마치고, Data가 결합된 HTML 파일을 내려주는 방식입니다. 새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에, 하얀 화면을 마주하게 됩니다.

SPA 를 사용해야 하는 이유 중 "사용자에게 친화적이다." 가 바로 위와 같은 불편함을 개선할 수 있기 때문입니다.

 

CSR 방식은 최초 요청시 HTML을 비롯해 CSS, js 등 각종 리소스를 받아옵니다. 이 후 서버에 데이터만 요청하고,  js로 뷰를 컨트롤 합니다.

초기 요청은 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링의 속도는 SSR 보다 다소 느릴 수 있습니다. 하지만 이 후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도를 통해 사용자 경험을 제공합니다. ( = 사용자에게 친화적입니다. )

여기까지만 보면, SSR 을 사용하지 않고, CSR을 사용하는게 더 좋아보입니다.

 

하지만!!!

CSR 도 단점이 있습니다. 바로 SEO 문제입니다.

 

SEO란 Search Engine Optimization 의 약자입니다(이하 SEO)

리액트나 뷰를 사용하면서 CSR, SSR 중 어떤 것을 할 지 고민하는 이유가 바로 SEO 때문입니다. 검색엔진을 통한 많은 사용자에게 검색되어야 하는 경우가 아니라면, 신경쓸 필요가 없지만, 공식 홈페이지나 블로그 처럼 많은 사람들에게 검색되어야 하는 사이트라면 SSR 에 대해 생각하게 됩니다.

구글은 크롤러 안에 자바스크립트 엔진이 있어 잘 인식한다고 합니다. 반면 네이버나 다음은 그렇지 못합니다. 역시 갓글!!

 

지금까지 내용을 종합해서 SEO 문제를 해결하기 위한 방법으로 SSR with Hydration 기법이 있습니다.

React 는 Next.js, Vue 는 Nuxt.js 가 위 기법을 구현한 프레임 워크입니다. 한마디로 설명하자면

처음에는 SSR을 하고, 그 이후 다른 페이지에서는 CSR 을 이용하는 방식입니다.

 

종합해보면, 결국, 개발하는 프로젝트의 목적, 그리고 개발 상황에 따라 CSR, SSR 기법중 하나를 선택하면 될 것 같습니다.

 

 

 

지금 진행하는 프로젝트는

 

• Vue, Nuxt.js 를 사용한 front-end 
• node 와 express, sequelize 를 사용한 back-end 

를 이용하는 관리자 페이지 제작입니다.

 

프로젝트를 진행하면서 공부했던 내용을 추가적인 글을 통해 포스팅할 계획입니다. 아직, 개발자라고 하기에도 부족하고 부끄러운 실력입니다. 틀린 내용이 있거나, 수정해야 할 부분이 있다면 지적해주세요!! 같이 배워나갔으면 좋겠습니다!