🌱 CSR과 SSR

🌊 CSR과 SSR

CSR과 SSR은 개발을 처음 배우기 시작했을 때 부터 자주 듣던 용어다. 단순히 React에서 만들면 CSR, 아니면 SSR로 기억해두었지만 Next.js로 프로젝트를 진행하게 되므로 확실히 개념을 짚고 넘어가려 한다.

 

CSR이란?

CSR(Client-side Rendering)은 클라이언트에서 페이지를 렌더링을 하고 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침 하지 않고 동적으로 관리한다는 특징을 가지고 있으며 데이터 가져오기, 라우팅 등 모든 로직이 클라이언트에서 처리 된다. 

 

CSR의 특징

• 자바스크립트 번들 크기의 영향을 많이 받아 코드 분할을 통해 필요한 것만 필요할 때 제공해야 한다.
• 사용자가 웹페이지에 방문하면 최소한의 HTML 파일을 다운로드 한 후 HTML 파일에 있는 자바스크립트 번들 파일을 다운로드하여 AJAX를 통해 API 요청을 수행하고 동적 컨텐츠를 가져와 파싱하여 최종 컨텐츠를 렌더링한다.

CSR의 장점

• 사전에 스크립트를 로드하기 때문에 후속 페이지 로드 시간이 빠르다. 
• 이미 스크립트가 캐싱 된 경우 인터넷 없이도 해당 웹 애플리케이션을 실행할 수 있다.
• 서버를 호출할 때 마다 전체 페이지를 리로드 할 필요 없다.

 

CSR의 단점

• 사전에 스크립트를 로드하기 때문에 SSR에 비해 초기 페이지 로드가 느리다.
• 내가 꼽는 가장 큰 단점인데 SEO(검색 엔진 최적화)에 좋지 않다. 검색 엔진 로봇이 해당 페이지에 방문했을 때 로드가 되지 않은 빈 HTML 파일이기 때문이다.
• META 데이터를 변경해야하는 추가적인 노력이 필요하다. 

 

SSR이란?

SSR(Server Side Rendering)은 클라이언트가 아닌 서버에서 렌더링을 하는 방식이다. 

SSR의 특징

• 사용자가 웹 페이지에 방문하면 서버는 리소스를 확인 후 페이지 내에 있는 서버측 스크립트를 실행 후  HTML 컨텐츠를 컴파일 한 후 브라우저로 전송한다. 브라우저는 HTML을 다운 후 최종 사이트를 사용자가 볼 수 있게 한다.
• 사용자가 페이지를 이동할 경우 위 동작을 반복하며 행동한다.

SSR의 장점

• 초기 페이지 로드 시간이 CSR에 비해 더 빠르다. 
• 수 많은 자바스크립트 코드를 클라이언트에 보내지 않아도 되서 웹 페이지가 완전히 로드 된 후 사용자가 빠르게 입력할 수 있다.
• SEO에 친화적이다. 
• 클라이언트는 렌더링만 하면 되므로 부담이 줄어 든다.

 

SSR의 단점

• 페이지를 이동할 때 마다 서버에서 페이지를 생성하는 시간이 오래 걸린다.
• 페이지 로드가 오래 걸리면 사용자 경험을 해친다.
• 서버 부하가 증가할 수 있다. 

 

 

SPA에서 SSR이 필요한 이유

SPA(Single Page Application)는 사용자에게 다른 페이지를 보여주는 것 처럼 보이지만 실은 필요한 부분만 업데이트하는 웹 앱이다. SPA는 주로 CSR 방식으로 구현되는데 Next.js 같은 프레임워크는 SPA에 SSR을 구현할 수 있도록 도와준다.

SPA는 JS를 이용해 페이지 콘텐츠를 동적으로 불러와 업데이트 하는데 SSR을 사용하게 되면 SEO가 최적화 되며, 로드 시간을 개선할 수 있다. 이는 SPA의 단점인 SEO 문제를 해결 할 수 있고, 초기 로드 시간을 단축시킬 수 있다

 

 

 

참고 자료

 

• https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure
• https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg