[Next.js] SSR과 CSR의 차이

SPA

여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다.  

MPA

반면 MPA란, Multi Page Application의 약자로, 탭을 이동할때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다. 

 

---

SSR과 CSR 알아보기

SPA는 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문에 CSR로 렌더링하고, MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링된 정적 리소스를 받아오기 때문에 SSR로 렌더링 한다.

 

CSR과 SSR의 차이점

CSR은 Client Side Rendering의 약자로, 클라이언트 측에서 렌더링 하는 방식이고, SSR은 Server Side Rendering의 약자로, 서버 측에서 렌더링 하는 방식이다. 말 그대로 어느 Side에서 렌더링을 준비하느냐에 따라 나뉘는 개념이다. 

SSR은 요청 시 서버에서 즉시 HTML을 만들어 응답하기에 데이터가 달라지거나 자주 바뀌어서 미리 만들어 두기 어려운 페이지에 적합하고, SSG는 페이지들을 서버에 모두 만들어 둔 후에 요청 시 해당 페이지를 응답하는 것이므로 바뀔 일이 거의 없어 캐싱해두면 좋을 페이지에 사용하면 적합하다. 

 

CSR의 동작 과정 

1. 브라우저가 서버에 콘텐츠를 요청한다.

2. 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다. 

3. 브라우저가 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드한다. 

4. JS를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다. 

 

CSR의 장단점

초기 로딩 이후에 페이지 일부를 변경할 때는 서버에서 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다는 특징이 있다. 

브라우저들이 가지는 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데, 웹 크롤러 봇 입장에서는 HTML이 텅텅 비어 있는 것처럼 보여서 색인할만한 콘텐츠가 존재하지 않기에, SEO(검색엔진 최적화)에 불리하다는 단점이 있다. 

 

SSR의 동작 과정 

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 컨텐츠를 요청한다.

2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달한다. 

3. 브라우저에서는 JS코드를 다운로드하고 HTML에 JS로직을 연결한다. 

 

SSR의 장단점

모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다. 더불어, 자바스크립트 코드를 다운로드 받고, 실행하기 전에 사용자가 이미 HTML이 렌더링 된 화면을 볼 수 있다. 따라서 CSR 보다 초기 구동 속도가 빠르다.

---

CSR 및 SSR 도입 고려하기

1. CSR

- 유저와 상호작용이 많다

- 대부분이 고객의 개인정보로 이루어진 페이지들이라 검색엔진에 노출될 필요는 없다

2. SSR

- 회사 홈페이지여서 홍보나 상위노출이 필요하다

- 누구에게나 항상 같은 내용을 보여준다

- 업데이트가 빈번해 해당 페이지 데이터가 자주 바뀐다

3. SSG

- 회사 홈페이지여서 홍보나 상위노출이 필요하다

- 누구에게나 항상 같은 내용을 보여준다

- 업데이트를 거의 하지 않는다

 

*  SSG는 Static Site Generation의 약자로 페이지를 생성할 때 기본으로 적용되는 설정이다. SSR과 다른 점은 클라이언트가 요청하는 시점이 아니라 빌드 시에 페이지를 미리 생성해놓는 것이다.