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

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)은 웹 애플리케이션 개발에서 사용되는 랜더링 방식이다.

1. 클라이언트 사이드 렌더링(CSR)

1) CSR이란?

• 클라이언트 사이드 렌더링(CSR)은 브라우저에서 모든 렌더링을 담당하는 방식이다.
• 초기 HTML 및 CSS는 서버로부터 로드되고, JavaScript를 사용하여 동적 컨텐츠를 렌더링한다.
• 주로 단일 페이지 애플리케이션(SPA)에서 사용되며, React, Angular, Vue.js와 같은 프레임워크 및 라이브러리와 호환된다.

2) CSR의 장단점

• 클라이언트 사이드 렌더링(CSR)은 최초 페이지 로딩 이후 앱 내비게이션이 빠르다.
• 동적인 UI를 제공하며 빠른 상호 작용이 가능하고, 서버는 데이터만 제공하므로 렌더링 부하가 줄어든다.
• 초기 로딩이 느릴 수 있으며, 검색 엔진 최적화(SEO)이 JavaScript 렌더링을 기다리는 데 시간이 걸릴 수 있다.
• 클라이언트는 JavaScript 엔진을 실행할 수 있는 충분한 자원이 필요하다.

2. 서버 사이드 렌더링(SSR)

1) SSR이란?

• 서버 사이드 렌더링(SSR)는 서버에서 HTML을 동적으로 생성하고 클라이언트에게 제공하는 방식이다.
• 클라이언트는 초기 HTML을 받고, 이후 JavaScript를 사용하여 상호 작용한다.
• 주로 SEO가 중요한 웹 애플리케이션에서 사용되며, 일반적으로 React, Next.js, Nuxt.js와 같은 프레임워크를 사용한다.

2) SSR의 장단점

• 서버 사이드 렌더링(SSR)은 초기 페이지 로딩이 빠르며 사용자에게 빠른 콘텐츠를 표시할 수 있다. - 검색엔진은 초기 HTML을 쉽게 색인화할 수 있다.
• 서버에서 렌더링을 처리해야 하므로 서버 부하가 높을 수 있다.
• 초기 로딩 후 클라이언트에서의 상호 작용이 CSR에 비해 다소 느릴 수 있으며, CSR에 비해 설정 및 구현이 복잡할 수 있다.

클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 중 어떤 방식을 선택할지는 프로젝트 요구사항과 우선순위에 따라 결정된다. SEO가 중요하다면 SSR을, 초기 로딩 속도와 사용자 경험이 중요하다면 CSR을 고려할 수 있다.