SPA, CSR, SSR에 대해 알아보기

본 게시글은 개인 공부를 하면서 기록 목적으로 작성하였습니다.
잘못된 내용이 있다면 제보 부탁드립니다. 감사합니다.🙇‍♂️

 

 

1.  개 요

최근 Portfolio 프로젝트를 만들고 SEO 최적화에 관심이 생겨 본격적으로 NextJS 공부하게 되었다.
NextJS로 프로젝트를 만들면서 궁금했던 CSR과 SSR 개념과 차이에 대해 공부한 기록을 남겨보고자 한다.

 

2. SPA (Single Page Application)

SPA 란?

• Single Page Application의 약자로 한 개의 페이지로 이뤄진 어플리케이션을 의미한다.

 

SPA를 사용하는 이유

• 과거에는 서버로부터 새로운 페이지를 요청하고 파싱하는 MPA(Multi Page Application)를 사용하였는데
  MPA는 일부 데이터만 갱신할 때도 전체 페이지를 다시 렌더링해야 하고, 정보의 변경이 많으면 그만큼 페이지
  전체를 갱신하는 요청 횟수도 많아져 성능적으로 비효율적이었다.
• 반면, SPA는 HTML만 받은 뒤 필요한 영역의 데이터만 요청해 갱신할 수 있기에 성능적으로 효율적이다.

 

3.  CSR (Client Side Rendering)

CSR 이란?

• Client Side Rendering의 약자로 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식을 말한다.

 

동작 개념

• 먼저, 클라이언트에서 초기 화면을 보여주기 위해서는 서버에 요청을 보낸다.
• 서버는 화면에 표시하는데 필요한 HTML, CSS와 자바스크립트 모든 파일을 보내준다.
• 클라이언트는 자바스크립트를 다운받아 사용자가 볼 수 있도록 모든 UI를 렌더링한다.

 

장 점

• 하나의 페이지를 동적으로 새로고침이 없이 자연스러운 화면 전환과 좋은 사용자 경험을 제공할 수 있다.
• HTML 자체가 바뀌는 것이 아니라 초기 로딩 때 이미 다운받은 JavaScript 파일을 통해 필요한 부분만
  교체하여 렌더링하기 때문에 성능적으로 효율적이다.

 

단 점

• 화면에 표시하는데 필요한 모든 파일(HTML, CSS, JavaScript)을 다운받은 후 렌더링하기 때문에 사용자가
  첫 화면을 보기까지 초기 로딩이 오래걸릴 수 있다.
• 웹 크롤러가 페이지를 색인화 하려고 하면 내용의 빈 페이지 처럼 보이게 되어 SEO가 어렵다.
  (※ 소스 코드를 통해 확인 시 <div id="root"></div> 사실상 비어있는 div만 존재한다.)

 

4.  SSR (Server Side Rendering)

SSR 이란?

• Server Side Rendering의 약자로 서버에서 사용자에게 보일 페이지를 모두 구성해 보여주는 방식을 말한다.

 

동작 개념

• 먼저, 클라이언트에서 초기 화면을 보여주기 위해서는 서버에 요청을 보낸다.
• 서버는 화면을 표시하는데 필요한 데이터를 모두 가져와서 HTML 파일을 만들고, JS 파일과 함께 클라이언트에 보내준다.
• 브라이저에서 바로 전달받은 페이지를 띄우고, 이어 자바스크립트 코드를 다운로드하고 HTML에 실행시킨다.

 

장 점

• 서버로부터 화면을 렌더하기 위한 필수적인 요소를 먼저 가져오기 때문에 초기 로딩 속도가 빠르다.
• 사용자의 인터넷 속도가 느리거나, 자바스크립트가 비활성화 되어 있더라도 실제로 사용자가 보게 될 HTML을 얻을 수 있다.
• 모든 컨텐츠가 HTML에 담겨져 있기 때문에 SEO 최적화가 가능하다.

 

단 점

• 사용자 이벤트가 발생할 경우 전체적인 웹사이트를 다시 서버에서 받아오는 것과 동일하기 때문에 사용자가 많을 경우
  서버에 부담이 증가할 수 있다.
• 사용자가 빠르게 웹사이트를 확인할 수 있지만, 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서
  클릭 시 반응이 없는 경우가 발생할 수 있다.

 

 

---

참 고

기초부터 완성까지, 프런트엔드 (이재성, 한정)

https://miracleground.tistory.com/165

SSR(서버사이드 렌더링)과 CSR(클라이언트 사이드 렌더링)