CSR & SSR

웹 애플리케이션에서 CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 각각 클라이언트와 서버에서의 렌더링 방식을 나타낸다. 특히 모바일 시대와 함께 등장한 SPA(Single Page Application)는 CSR 방식의 중심에 있는 개념이다.

SPA(Single Page Application)

• SPA는 처음 한 번 페이지 전체를 로드하고, 이후 필요한 데이터만 변경하는 방식이다. 한 번 로딩 후에는 HTML 페이지 전체를 다시 로드하지 않고 클라이언트에서 필요한 부분만 업데이트해주는 방식이다.
• 이 과정에서 Html5 History API를 이용해 새로운 URL로 페이지 이동 없이 다양한 화면을 구현할 수 있다.

CSR(Client Side Rendering)

• CSR은 사용자의 요청에 따라 필요한 데이터만 서버에서 받아와서 클라이언트 측에서 화면에 렌더링하는 방식이다. 서버는 HTML 대신 주로 JSON 형태의 데이터를 보내주고, 브라우저에서 자바스크립트가 이 데이터를 기반으로 HTML을 그려준다.

CSR의 장점

• 트래픽 감소: 전체 페이지가 아니라 필요한 데이터만 받아오기 때문에 트래픽이 줄어든다.
• 사용자 경험 향상: 페이지 새로고침이 없어 네이티브 앱처럼 부드러운 인터랙션을 제공한다.

CSR의 단점

• 검색 엔진 최적화 문제: CSR 방식에서는 웹 페이지의 HTML 소스가 비어있거나 JavaScript로 처리되는 경우가 많다. 구글 검색엔진은 자바스크립트를 지원해 문제가 없지만, 네이버나 다음 같은 엔진은 크롤링이 어려울 수 있다.

SSR(Server Side Rendering)

• SSR은 브라우저가 요청을 보내면, 서버가 완성된 HTML을 생성해 브라우저로 보내주는 방식이다. 이 방식은 데이터를 HTML에 포함해 처음부터 전달하기 때문에 첫 로딩 속도가 빠르고, 검색 엔진 최적화에도 유리하다.

SSR의 장점

• SEO 최적화: 완성된 HTML을 검색 엔진에 제공해 검색 결과에 노출되기 쉽다.
• 빠른 초기 로딩 속도: 초기 화면이 서버에서 렌더링되어 전달되기 때문에 첫 화면이 사용자에게 빠르게 보인다.

SSR의 단점

• 프로젝트 복잡성: 클라이언트와 서버의 역할을 나누어 설계해야 하기 때문에 프로젝트 구조가 복잡해질 수 있다.
• 성능 부담: 모든 요청마다 서버에서 렌더링해 전달해야 하므로, 자원이 소모되고 트래픽이 증가해 성능 저하 가능성이 있다.

So...

CSR과 SSR은 각각의 장단점이 뚜렷하며, 상황에 맞게 선택하여 사용해야 한다. CSR은 부드러운 사용자 경험과 트래픽 절감을 제공해 인터랙션이 많은 애플리케이션에 유리하며, SSR은 검색 엔진 최적화와 빠른 초기 로딩을 필요로 하는 웹사이트에 적합하다. 프로젝트의 목적과 요구사항에 따라 이 두 가지 렌더링 방식을 적절히 혼합하여 사용하는 것이 이상적이다.