🎀 SPA와 MPA 부터 알고 가자
SPA란 Single Page Application 의 약자며, 말 그대로 한개의 Page로 구성된 Application이다.
단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고 그 후에는 데이터를 받아올 때만 서버와 통신한다.
MPA란 Multi Page Application의 약자로 탭을 이동할 때 마다 새로운 페이지를 서버로부터 받아와서 새로 랜더링하는 전통적인 웹페이지 구성 방식이다.
AJAX 등장 이후부터는 SPA가 주로 개발되어 진다.
🎀 CSR과 SSR
📌 SPA와 CSR의 관계
CSR 이란 Client Side Rendering의 약자로
자바스크립트로 변환된 리액트, 뷰 같은 코드를 웹 브라우저에서 실행해서 HTML을 만드는 걸 말한다.
SPA에서는 필요한 모든 정적 데이터들을 한번에 다운로드 받은 후에 , 새로운 요청이 있을때 요청이 온 부분만 업데이트 시키는 방식을 사용기 때문에 CSR이라는 방식을 사용한다.
React.js, Vue.js, Angular.js 로 SPA를 만들고 있다면
렌더링 방식을 특별히 바꾸지 않는이상 자연스럽게 CSR을 사용하게 된다.
📌 MPA와 SSR의 관계
SSR 이란 Server Side Rendering의 약자로
백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 의미한다.
MPA에서는 새로운 요청이 있을 때 마다, 서버에서 렌더링된 정적 리소스를 받아오기 때문에 SSR 방식을 사용하게 된다.
주로 php, jsp로 MPA를 만들게 되며, 자연스럽게 SSR 방식을 사용하게 된다.
요약:
일반적으로 SPA에서는 CSR을, MPA에서는 SSR을 사용한다.
하지만 꼭 그런것만은 아니다. 렌더링을 어디서 하는지, 페이지는 몇개인지 등에 따라 정할 수 있다.
🎀 SSG도 있다고?
SSG는 Static Site Rendering의 약자이다.
서버에서 HTML을 완성하여 렌더링 시킨다는 점에서 SSR과 유사하지만
"언제" 만들어졌냐에 차이가 있다.
SSG는 빌드타임 때 미리 HTML을 생성해 놓고 요청이 들어왔을 때 해당 페이지를 보여준다.
즉, SSG는 미리 다 만들어두니까 바뀔일이 거의 없는 페이지에 적합하다.
SSR은 런타임때 서버에서 HTML을 생성하여 보여주니까, 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합하다.
🎀 특징을 알아보자
📌 CSR의 특징
- 런타임시점인데, 클라이언트에서 렌더링 된다.
- 모든 데이터를 한번에 불러와야해서 초기 로딩 속도가 느리다.
- 하지만 이후 부터는 필요한 부분만 업데이트 되기 때문에 빨라진다.
- 서버에서는 HTML의 빈 뼈대만 전송하기 때문에 서버측 부하 부담이 적다.
- 하지만 이 빈 뼈대 때문에 브라우저가 HTML 문서를 읽는데 어려움이 크고, SEO(검색 엔진 최적화)에 굉장히 불리하다.
- 이 때문에 사용자는 JS 불러오기 전까지 빈화면을 마주하고 있어야할 수도 있다.
📌 SSR의 특징
- 런타임시점인데, 서버에서 렌더링 된다.
- 서버에서 준비를 모두 마친 HTML를 먼저 렌더링 한다.
- 그렇기 때문에 브라우저가 HTML 문서를 읽는데 유리하고 SEO에 최적화되어 있다.
- JS 코드를 다운받기 전에 HTML 작업은 완료되기 때문에 사용자는 빈 화면을 볼 필요가 없다.
- JS 다운로드를 기다려야했던 CSR보다 초기 구동 속도가 빠르다.
- 하지만 이 시점(UI는 보이지만 JS는 적용 안된 상태)에는 사용자가 버튼을 클릭하는 등의 상호작용이 불가능해 오류처럼 보일 수 있다.
🎀 무엇을 사용하는게 가장 좋을까?
📌 CSR
유저랑 상호작용이 많고 고객의 개인정보로 기준으로 이루어지는 서비스라면 검색엔진 노출보다 고객의 데이터를 보호하는 것이 더 중요할 수 있다
📌 SSR
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야하며 매주 업데이트 되어야한다면
📌 SSG
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야 하지만 업데이트를 거의 하지 않아도 된다면
📌 CSR + SSR = Universal랜더링
만약 사용자에 따라 페이지 내용이 달라지며 화면깜빡임 없는 빠른 인터렉션이 중요하고 상위노출이 필요하다면
🎀 렌더링 기술 3가지
📌 Next.js
리액트 SSR을 조금 더 편하게 만들어준다.
리액트에서도 SSR 기능을 제공하고 있지만 , 아주 기본적인 것만 제공한다고 한다.
그래서 만들어지게 된 것이 Next.js이다. 심지어 리액트 공식 사이트에서도 Next.js를 추천한다.
특히 리액트 라우터랑은 다르게 HTML 파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 사용할 수 있다는 장점이 있다.
📌 Gatsby
리액트로 정적 사이트 만들기 가능
Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML 파일로 만들어 준다.
이런 웹사이트를 정적인 웹이라고 이야기 한다.
회사 소개 사이트나 동아리 홈페이지 혹은 포트폴리오 사이트 같이 정적인 사이트를 리액트로 만들고 싶다면 Gatsby를 추천한다.
📌 React Native
모바일 앱도 리액트로 만들 수 있다.
React Native는 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해 준다.웹과 안드로이드와 iOS 앱에서 사용하는 공통적인 코드를 한 번에 개발할 수 있다는 장점이 있다.
압도적 감사 (출처)
렌더링 삼형제 CSR, SSR, SSG 이해하기
[10분 테코톡] 🎨 신세한탄의 CSR&SSR
