[Front-End] SSR과 CSR의 개념(feat. Next.js)

⚙️ SSR(Server Side Rendering)

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다.

SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다.

 

🔄 SSR 동작 과정

먼저 클라이언트가 초기 화면을 로드하기 위해 서버에 요청을 보낸다.

그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고, css까지 모두 적용하여 렌더링 준비를 마친 html과 js 코드를 브라우저에게 전달한다.

브라우저는 바로 전달 받은 페이지를 띄우고, 브라우저가 js코드를 다운로드 하고 html에 실행시킨다.

 

 

 

⚙️ CSR(Client Side Rendering)

클라이언트 사이드 렌더링은 React, Vue 등의 SPA(Single Page Application)에서 쓰이는 기법으로, 서버에서 화면을 구성했던 SSR 방식과 달리 클라이언트에서 화면을 구성한다.

 

SPA의 경우 첫 화면에 들어가게 되면 데이터를 제외한 화면을 그리는 코드들이 프론트 서버에서 다운받아진다. (데이터를 제외한 코드들은 js파일에 한번에 번들되어 오기 때문에 번들된 이 파일을 처음에 다운받는데 시간이 꽤 걸릴 수 있다.

 

화면을 그리는 코드는 다운받았지만 아직 데이터를 다운 받은 상태가 아니다. CSR의 경우 클라이언트의 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터만 받아온다.

 

CSR은 초기 진입 속도가 느린 반면, 그 후론 필요한 데이터만 갱신하면 되기 때문에 SSR 방식에 비해 서버 부하가 덜하다는 장점이 있다.

하지만 초기에 html에 데이터가 없다보니 검색 봇이 해당 페이지를 빈 페이지로 착각하여 SEO(Search Engine Optimization) 검색엔진 최적화에 취약할 수 있는 단점이 존재한다.

 

 

🔄 CSR 동작 과정

먼저 클라이언트에서 초기 화면을 로드하기 위해 서버에 요청을 보낸다.

서버는 화면에 표시하는데에 필요한 완전한 리소스의 응답을 한다.

이때 SSR과 다른 것은 CSR은 모든 JS 파일을 다운받아 실행시키는 것이다.

​

화면을 구성하는 요소 중 일부분을 변경하려고 할 때 클라이언트는 이전과 같이 서버에게 요청을 보내고 서버는 변경된 부분과 관련된 리소스만 응답한다. 때문에 화면이 깜빡이지 않고 바로 수정된 데이터가 표시된다.

 

 

❤️ 두 문제를 해결한 Next.js

😡 SSR의 단점 : 불필요한 부분까지 렌더링이 된다.
😡 CSR의 단점 : 초기 진입 속도가 느리다. SEO에 취약하다.

 

위 두가지 단점을 해결하면서 두 방식의 장점을 살리고자 Next.js라는 프레임워크가 생겼다.

Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 SEO 문제를 해결하고

그 다음 페이지부턴 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하도 줄이게 한 것이다.

Next.js의 기능은 리액트로도 구현이 가능하지만 러닝커브가 있는 편이다.

 

---

👇아래 포스팅도 읽어보시는 걸 추천합니다!👇

[Front-End] 렌더링 기법 (CSR, SSR, SSG, ISR)