클라이언트사이드 렌더링 (CSR)
목차
클라이언트사이드 렌더링 (CSR) 개요
CSR의 기본 원리
클라이언트사이드 렌더링 (CSR)은 웹 애플리케이션에서 클라이언트 측에서 HTML을 생성하는 방식이다. 이 방식에서는 브라우저가 서버로부터 JavaScript, CSS, HTML 파일을 다운로드한 후, JavaScript를 실행하여 동적으로 콘텐츠를 생성한다. 이는 웹 페이지가 초기 로드 시 모든 콘텐츠를 서버에서 렌더링하는 것이 아니라, 클라이언트 측에서 필요한 데이터를 요청하고 이를 기반으로 사용자에게 보여준다. CSR의 기본 원리는 사용자의 브라우저가 페이지의 동적인 부분을 처리하여, 서버의 부하를 줄이는 것이다. 이러한 접근법은 사용자에게 더 빠른 인터랙션을 제공할 수 있으며, 페이지 전환 시 사용자 경험을 개선할 수 있다. 예를 들어, React, Vue.js와 같은 JavaScript 프레임워크를 사용하여 클라이언트 측에서 UI 컴포넌트를 생성하고 관리한다. 이 과정에서 HTML 코드는 다음과 같이 구성될 수 있다. <div id=”app”></div> const app = new Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ } }); 위의 예에서 Vue.js는 클라이언트 측에서 동적으로 콘텐츠를 생성하는 방식으로, 사용자에게 실시간으로 반응하는 페이지를 제공한다. 클라이언트사이드 렌더링 (CSR)은 특히 SPA(Single Page Application) 개발에 널리 사용되며, 사용자 경험을 향상시키는 중요한 요소로 작용한다.
CSR과 서버사이드 렌더링(SSR)의 차이
클라이언트사이드 렌더링 (CSR)과 서버사이드 렌더링(SSR)은 웹 애플리케이션을 구축하는 두 가지 주요 접근 방식이다. CSR에서는 페이지의 콘텐츠가 사용자의 브라우저에서 JavaScript를 통해 동적으로 생성된다. 이 방식은 서버에서 HTML을 생성하여 클라이언트로 전송하는 것이 아니라, 클라이언트에서 필요한 데이터를 요청하고, 이를 기반으로 페이지를 구성한다. 반면, SSR에서는 서버에서 모든 페이지의 HTML을 미리 렌더링한 후 클라이언트에 전달한다. 이로 인해 초기 로딩 시 사용자에게 빠른 콘텐츠 제공이 가능하지만, 이후 페이지 전환 시에는 매번 서버에 요청을 해야 하므로 성능에 영향을 미칠 수 있다. CSR은 주로 SPA(Single Page Application) 개발에 적합하며, 사용자 인터페이스의 반응성을 높이고, 페이지 전환 시 부드러운 경험을 제공하는 데 강점을 가진다. 이는 JavaScript 프레임워크를 사용하여 구현되며, 예를 들어 React를 사용하여 다음과 같은 코드로 클라이언트 측에서 UI를 구성할 수 있다. const rootElement = document.getElementById(‘root’); ReactDOM.render(, rootElement); 이와 같이 CSR은 보다 동적인 사용자 경험을 제공하지만, 초기 로딩 시간이 길어질 수 있으며, SEO 최적화에 도전 과제가 발생할 수 있다. 반면, SSR은 초기 로딩 속도가 빠르지만, 사용자 경험을 저해할 수 있는 페이지 전환의 지연이 발생할 수 있다. 따라서 개발자는 프로젝트의 요구 사항에 따라 이 두 가지 렌더링 방식을 적절히 선택해야 한다.
CSR이 웹 성능에 미치는 영향
클라이언트사이드 렌더링 (CSR)은 웹 성능에 다양한 영향을 미친다. CSR은 브라우저에서 JavaScript를 실행하여 사용자 인터페이스를 동적으로 생성하는 방식으로, 초기 페이지 로딩 시 모든 필요한 리소스를 다운로드해야 한다. 이로 인해 초기 로딩 시간이 길어질 수 있으며, 사용자가 첫 번째 콘텐츠를 보기까지 걸리는 시간이 길어질 수 있다. 그러나 한 번 로딩이 완료된 후에는 이후의 페이지 전환이 빠르게 이루어지며, 이는 사용자 경험을 향상시키는 중요한 요소로 작용한다. CSR을 통해 애플리케이션은 상태를 유지하고, 사용자와의 상호작용을 보다 매끄럽게 처리할 수 있다. 이러한 방식은 특히 단일 페이지 애플리케이션(SPA)에서 효과적이며, 사용자에게 즉각적인 피드백을 제공하는 데 유리하다. 하지만 모든 웹 페이지에 CSR을 적용하는 것이 이상적인 선택은 아니다. 페이지의 내용이 자주 변경되지 않는 경우 서버사이드 렌더링(SSR)이 더 나은 성능을 제공할 수 있다. 또한, CSR은 서버에서 콘텐츠를 미리 렌더링하지 않기 때문에 검색 엔진 최적화(SEO)에 도전 과제가 발생할 수 있다. 검색 엔진은 JavaScript를 처리하는 데 제한이 있을 수 있어, 페이지의 내용이 크롤링되지 않을 위험이 존재한다. 따라서 CSR을 사용할 경우 이러한 성능과 SEO 측면을 고려하여 최적화 전략을 마련하는 것이 중요하다. 웹 개발자는 이러한 정보를 바탕으로 프로젝트의 요구 사항에 맞게 CSR과 SSR을 적절히 조화시켜 웹 성능을 극대화할 수 있다.
SEO와 클라이언트사이드 렌더링
CSR이 SEO에 미치는 영향
클라이언트사이드 렌더링(CSR)은 웹 애플리케이션의 사용자 인터페이스를 클라이언트 측에서 동적으로 생성하는 방식이다. 이 방식은 사용자 경험을 개선할 수 있지만, SEO에 미치는 영향이 주목받고 있다. 첫째, CSR은 검색 엔진 크롤러가 페이지의 내용을 효율적으로 인식하는 데 어려움을 겪을 수 있다. 크롤러는 JavaScript를 실행할 수 있지만, 이 과정에서 페이지의 모든 콘텐츠를 수집하지 못할 수 있다. 따라서 CSR을 적용한 웹 페이지는 검색 엔진 결과에서 가시성이 떨어질 위험이 있다. 둘째, CSR 방식으로 생성된 페이지는 초기 로딩 시 필요한 콘텐츠가 클라이언트 측에서 렌더링되므로, 페이지 로드 속도가 느려질 수 있다. 이는 사용자 이탈률을 증가시키고, 결과적으로 SEO에 부정적인 영향을 미칠 수 있다. 셋째, CSR 페이지에서 메타 태그와 같은 중요 요소의 처리가 복잡해질 수 있다. 일반적으로 메타 태그는 서버 측에서 렌더링되지만, CSR에서는 클라이언트 측에서 추가적으로 설정해야 하므로 SEO 최적화가 어렵다. 따라서 클라이언트사이드 렌더링(CSR)을 활용할 경우, 웹 개발자는 SEO를 고려한 최적화 전략을 수립해야 한다. 예를 들어, 서버 측에서 HTML 콘텐츠를 미리 렌더링하여 검색 엔진이 페이지 내용을 인식할 수 있도록 하는 하이드레이션 기법을 사용할 수 있다. 이러한 전략은 CSR을 사용할 때 발생할 수 있는 SEO 문제를 완화하는 데 기여할 수 있다.
CSR 페이지의 크롤링 최적화
클라이언트사이드 렌더링 (CSR) 방식으로 구축된 웹 페이지는 검색 엔진 크롤러가 콘텐츠를 효과적으로 이해하고 인덱싱하도록 최적화할 필요가 있다. CSR에서는 페이지가 클라이언트 측에서 렌더링되므로, 검색 엔진이 페이지의 내용을 감지하는 데 어려움이 있을 수 있다. 이를 해결하기 위해 몇 가지 최적화 전략이 필요하다. 첫째, CSR 페이지의 초기 로딩 시 필요한 데이터와 콘텐츠를 미리 로드하는 것이 중요하다. 이를 통해 검색 엔진 크롤러가 페이지를 빠르게 분석할 수 있도록 도와준다. 둘째, 서버사이드 렌더링 (SSR)과 결합하여 하이드레이션 기법을 사용하는 것도 효과적이다. 이 기법은 서버에서 HTML 콘텐츠를 미리 렌더링한 후 클라이언트에서 JavaScript를 통해 상호작용을 가능하게 한다. 셋째, 페이지 내의 중요 메타 태그와 같은 요소를 클라이언트 측에서 동적으로 생성하되, SEO 친화적으로 구성하는 것이 필요하다. 예를 들어, 다음과 같이 메타 태그를 설정할 수 있다. <head> <meta name=”description” content=”이 페이지의 설명입니다.”> <meta name=”keywords” content=”키워드1, 키워드2″> </head> 이렇게 하면 검색 엔진이 페이지의 주요 내용을 인식할 수 있도록 돕는다. 마지막으로, 페이지의 로딩 속도를 최적화하여 사용자 경험을 향상시키고, 이탈률을 줄이는 것도 중요하다. 이러한 최적화 전략을 통해 클라이언트사이드 렌더링 (CSR) 방식의 웹 페이지가 검색 엔진에서 더 나은 가시성을 가질 수 있도록 지원할 수 있다.
CSR과 메타 태그 처리
클라이언트사이드 렌더링 (CSR) 환경에서 메타 태그 처리는 웹 페이지의 SEO에 중요한 역할을 한다. CSR은 사용자 브라우저에서 JavaScript를 통해 콘텐츠를 동적으로 렌더링하는 방식이므로, 페이지 로드 시 서버에서 제공하는 HTML 문서에는 실제 콘텐츠가 포함되지 않는다. 이로 인해 검색 엔진이 페이지의 내용을 효과적으로 인식하는 데 어려움이 있을 수 있다. 따라서, 메타 태그를 적절히 구성하는 것이 필요하다. 웹 개발자는 페이지의 메타 태그를 클라이언트 측에서 동적으로 생성해야 하며, 이 과정에서 SEO 친화적인 방식을 고려해야 한다.예를 들어, 다음과 같이 메타 태그를 설정할 수 있다:<head><meta name=”description” content=”이 페이지의 설명입니다.”><meta name=”keywords” content=”키워드1, 키워드2″></head>위와 같은 방법으로 메타 태그를 설정하면 검색 엔진이 페이지의 주요 내용을 이해하기 쉬워진다. 특히, 메타 설명 태그는 검색 결과 페이지에서 사용자에게 제공되는 정보로, 클릭률에 영향을 미치는 중요한 요소이다. 따라서, 설명 내용은 간결하고 명확해야 하며, 페이지의 주제를 잘 반영해야 한다.또한, CSR 환경에서는 메타 태그 외에도 Open Graph 태그와 같은 소셜 미디어 메타 태그를 활용하여 콘텐츠 공유 시 나타나는 미리보기 정보를 최적화하는 것이 중요하다. 이렇게 함으로써 사용자가 소셜 미디어에서 링크를 클릭할 가능성을 높일 수 있다. 따라서, 클라이언트사이드 렌더링 방식의 웹 페이지에서 메타 태그 처리는 SEO와 사용자 경험을 모두 고려한 전략적 접근이 필요하다.
클라이언트사이드 렌더링 최적화 전략
성능 최적화를 위한 코드 분할
클라이언트사이드 렌더링 (CSR) 환경에서 성능 최적화를 위한 코드 분할은 웹 애플리케이션의 응답 속도를 향상시키는 중요한 기법 중 하나이다. 코드 분할은 전체 애플리케이션의 코드를 여러 개의 작은 청크로 나누어, 필요한 시점에만 해당 청크를 로드하는 방식이다. 이를 통해 초기 로딩 시간을 줄이고, 사용자 경험을 개선할 수 있다. 예를 들어, 웹 페이지가 처음 로드될 때 모든 자바스크립트 파일을 포함하는 대신, 사용자가 특정 기능을 요청할 때 관련된 스크립트만 로드하도록 설정할 수 있다. 이를 구현하기 위해 JavaScript의 동적 임포트 기능을 활용할 수 있으며, 아래와 같은 코드 예제를 통해 확인할 수 있다.function loadComponent() { import(‘./path/to/component.js’).then(module => { const component = module.default; // 컴포넌트를 DOM에 추가하는 로직 });}이와 같은 방식으로 코드 분할을 적용하면, 초기 로드 시 필요한 코드만 다운로드하게 되어 페이지 로딩 속도가 빨라진다. 또한, 사용자가 애플리케이션을 사용할 때 필요한 코드만 로드하기 때문에, 전체적인 성능과 반응성이 향상된다. 이러한 최적화 전략은 특히 대규모 애플리케이션에서 효과적이며, 사용자 이탈률을 감소시키고 전반적인 사용자 만족도를 높이는 데 기여한다. 코드 분할은 최적화된 로딩 속도를 통해 클라이언트사이드 렌더링 (CSR)의 장점을 극대화하는 방법으로 자리잡고 있다.
Lazy Loading 기법
Lazy Loading 기법은 클라이언트사이드 렌더링 (CSR)에서 웹 성능을 최적화하는 중요한 전략 중 하나이다. 이 기법은 사용자가 페이지를 스크롤하거나 특정 요소와 상호작용할 때만 필요한 리소스를 로드하여 초기 로딩 시간을 단축시키는 방식으로 작동한다. 예를 들어, 이미지나 비디오와 같은 미디어 파일을 사용자가 해당 콘텐츠에 도달하기 전까지 로드하지 않음으로써 불필요한 서버 요청을 줄이고, 네트워크 대역폭을 효율적으로 사용하게 된다. 이를 구현하기 위해 HTML의 ‘loading’ 속성을 활용하여 쉽게 Lazy Loading을 적용할 수 있다. 다음은 Lazy Loading을 적용한 이미지의 예시이다. 이와 같은 방식으로 설정하면, 브라우저는 해당 이미지가 뷰포트에 들어올 때만 이미지를 로드하게 된다. Lazy Loading 기법은 페이지의 초기 로딩을 가속화하고 사용자 경험을 개선하는 데 기여하며, 특히 콘텐츠가 많은 웹사이트에서 효과적이다. 또한, 이 기법은 데이터 전송량을 줄이므로 모바일 환경에서도 유리하게 작용한다. 이러한 이유로 Lazy Loading은 많은 웹 애플리케이션에서 필수적인 최적화 기법으로 자리잡고 있다.
캐싱 전략
클라이언트사이드 렌더링 (CSR)에서의 캐싱 전략은 웹 애플리케이션의 성능을 개선하고 사용자 경험을 향상시키는 중요한 요소이다. 캐싱은 서버에서 클라이언트로 전송되는 데이터의 복사본을 저장하여, 다음 요청 시 동일한 데이터를 다시 받아오는 대신 저장된 데이터를 활용하는 방식이다. 이를 통해 클라이언트사이드 렌더링 (CSR) 애플리케이션은 초기 로딩 시간을 단축시킬 수 있으며, 서버에 대한 요청 수를 줄여 서버 리소스를 효율적으로 사용할 수 있다. 다양한 캐싱 기법이 존재하며, 이 중에서도 가장 일반적인 방법은 브라우저 캐시와 CDN(Content Delivery Network) 캐시를 활용하는 것이다. 브라우저 캐시는 웹 페이지를 구성하는 파일과 자원을 사용자의 브라우저에 저장하여, 같은 페이지를 다시 방문할 때 빠르게 로드할 수 있도록 한다. 이를 위해 HTTP 헤더를 설정하여 캐시 유효 기간을 지정할 수 있다. 다음은 HTTP 캐시 설정의 예시이다. Cache-Control: max-age=3600와 같은 헤더를 사용하면 지정된 시간(초) 동안 해당 리소스를 캐싱하도록 브라우저에 지시할 수 있다. CDN 캐시는 전 세계 여러 서버에 데이터를 저장하여 사용자와 가장 가까운 위치에서 데이터를 제공하므로, 데이터 전송 시간을 크게 줄일 수 있다. 이러한 캐싱 전략은 클라이언트사이드 렌더링 (CSR) 애플리케이션에서 성능을 최적화하고, 사용자에게 더 나은 경험을 제공하는 데 필수적이다.
CSR에서의 사용자 경험 (UX) 향상
CSR의 사용자 인터페이스 디자인
클라이언트사이드 렌더링 (CSR)에서는 사용자 인터페이스 디자인이 사용자의 경험을 향상시키는 중요한 요소로 자리잡고 있다. CSR 방식에서는 웹 애플리케이션의 대부분이 클라이언트의 브라우저에서 렌더링되므로, UI 디자인은 사용자에게 즉각적인 피드백을 제공하는 데 필수적이다. 이는 사용자 인터페이스의 반응성과 직관성을 높이는 데 기여한다. 사용자가 웹 페이지와 상호작용할 때, CSR은 페이지의 일부만 업데이트할 수 있는 능력을 가지고 있어, 전체 페이지를 새로 고치는 것보다 더 매끄러운 사용자 경험을 제공한다. 이를 통해 사용자들은 보다 빠르게 정보를 얻고, 작업을 수행할 수 있다.UI 디자인에서 중요한 요소 중 하나는 접근성이다. 클라이언트사이드 렌더링 (CSR) 방식에서는 다양한 디바이스와 화면 크기에 대응할 수 있는 반응형 디자인을 구현하는 것이 가능하다. CSS 미디어 쿼리를 활용하여 화면 크기에 따라 레이아웃을 조정할 수 있으며, 이로 인해 모든 사용자에게 일관된 경험을 제공할 수 있다. 다음은 미디어 쿼리를 활용한 예시 코드이다:@media (max-width: 600px) { body { background-color: lightblue; }}이러한 디자인 접근법은 모바일 사용자와 데스크탑 사용자를 포함한 다양한 사용자 기반을 고려하여 최적의 경험을 제공한다. 또한, 클라이언트사이드 렌더링 (CSR)에서 인터랙티브 요소는 사용자와의 상호작용을 더욱 풍부하게 만들어 준다. 버튼, 드롭다운 메뉴, 모달 윈도우 등은 JavaScript를 통해 동적으로 생성되며, 이는 페이지의 재로드 없이도 다양한 기능을 사용할 수 있게 한다. 이러한 요소들은 사용자에게 즉각적인 피드백을 제공하고, 결과적으로 사용자 만족도를 높이는 데 기여한다. 사용자 인터페이스 디자인은 클라이언트사이드 렌더링 (CSR)의 성능과 효율성을 극대화하는 데 중요한 역할을 하며, 이는 최종 사용자에게 긍정적인 경험을 제공하는 데 필수적이다.
반응형 웹과 CSR
클라이언트사이드 렌더링 (CSR)은 반응형 웹 디자인과 밀접한 관계가 있다. 반응형 웹 디자인은 다양한 기기에서 사용자 경험을 최적화하기 위해 화면 크기에 맞춰 콘텐츠를 자동으로 조정하는 기법이다. 이는 사용자가 데스크탑, 태블릿, 스마트폰 등 다양한 기기를 사용할 때 일관된 경험을 제공하는 데 도움이 된다. CSR은 이러한 반응형 웹 디자인과 결합되어, 사용자가 웹 페이지를 처음 로드할 때 모든 필요한 리소스를 클라이언트 측에서 처리하고, 이후의 상호작용은 서버와의 추가 요청 없이 JavaScript를 통해 즉시 반영되도록 한다. 이렇게 하면 페이지의 로드 시간이 줄어들고, 사용자에게 더 매끄러운 경험을 제공할 수 있다. 예를 들어, CSS 미디어 쿼리를 활용하여 화면 크기에 따라 다른 스타일을 적용할 수 있다. 다음은 미디어 쿼리를 활용한 간단한 HTML 코드 예제이다:<style> @media (max-width: 600px) { body { background-color: lightblue; } }</style> 이러한 방식으로 다양한 화면 크기에 최적화된 디자인을 제공하는 것은 CSR에서 사용자 경험을 향상시키는 데 중요한 요소이다. 또한, CSR을 통해 인터랙티브한 요소를 쉽게 추가할 수 있으며, 이는 사용자와의 상호작용을 더욱 풍부하게 만들어 준다. 이러한 특성 덕분에 웹 애플리케이션은 더욱 유연하고 반응성이 뛰어난 경험을 제공할 수 있다. 결과적으로 클라이언트사이드 렌더링 (CSR)은 반응형 웹 디자인과 함께 사용자 경험을 극대화하는 데 중요한 역할을 한다.
CSR을 활용한 인터랙티브 요소
클라이언트사이드 렌더링 (CSR)을 활용한 인터랙티브 요소는 현대 웹 애플리케이션에서 사용자 경험을 향상시키는 중요한 요소이다. CSR은 사용자가 웹 페이지를 요청할 때 서버가 HTML 문서를 전송하는 대신, JavaScript를 통해 클라이언트 측에서 동적으로 콘텐츠를 생성하는 방식을 사용한다. 이러한 방식은 사용자와의 상호작용을 보다 원활하게 만들어 주며, 페이지 로드 후에 즉각적인 반응을 제공할 수 있게 한다. 예를 들어, 사용자가 버튼을 클릭했을 때, Ajax 요청을 통해 서버에서 데이터를 받아와 페이지를 업데이트하는 방식은 사용자에게 더 나은 경험을 제공한다. 다음은 버튼 클릭 시 데이터를 불러오는 간단한 HTML 및 JavaScript 코드 예제이다:<button id=’loadData’>데이터 불러오기</button><div id=’result’></div><script>document.getElementById(‘loadData’).onclick = function() { fetch(‘https://api.example.com/data’) .then(response => response.json()) .then(data => { document.getElementById(‘result’).innerHTML = JSON.stringify(data); });};</script>이와 같이 CSR은 비동기적으로 데이터를 받아와 사용자에게 실시간으로 정보를 제공하는 능력을 가지고 있다. 이러한 인터랙티브 요소는 사용자 참여를 유도하며, 사이트에 대한 몰입감을 높이는 역할을 한다. 또한, 클라이언트사이드 렌더링 (CSR)은 다양한 애니메이션과 전환 효과를 통해 시각적으로도 매력적인 환경을 제공할 수 있다. 이러한 점에서 CSR은 현대 웹 디자인에서 필수적인 요소로 자리잡고 있다.
자주 묻는 질문
클라이언트사이드 렌더링(CSR)이란 무엇인가요?
클라이언트사이드 렌더링(CSR)은 웹 페이지의 콘텐츠가 서버가 아닌 브라우저에서 JavaScript로 동적으로 생성되는 방식입니다. 이 방식은 특히 SPA(Single Page Application) 개발에 많이 사용됩니다.
CSR과 서버사이드 렌더링(SSR)의 차이점은 무엇인가요?
CSR은 브라우저에서 JavaScript로 콘텐츠를 생성하고, SSR은 서버에서 미리 생성된 HTML을 전달합니다. CSR은 인터랙티브한 사용자 경험을 제공하지만 초기 로딩이 느릴 수 있고, SSR은 빠른 초기 로딩을 제공하지만 페이지 전환 시 느려질 수 있습니다.
CSR이 SEO에 미치는 영향은 무엇인가요?
CSR은 JavaScript로 콘텐츠를 생성하기 때문에 검색 엔진이 콘텐츠를 크롤링하기 어려울 수 있습니다. 이로 인해 SEO에 부정적인 영향을 미칠 수 있으며, 최적화를 통해 이를 개선할 수 있습니다.
CSR의 성능을 최적화하는 방법은 무엇인가요?
CSR 성능을 최적화하는 방법에는 코드 분할, Lazy Loading, 브라우저 캐싱, CDN 활용 등이 있습니다. 이를 통해 초기 로딩 시간을 줄이고 빠른 페이지 전환을 구현할 수 있습니다.
CSR에서 코드 분할이 중요한 이유는 무엇인가요?
코드 분할은 전체 애플리케이션의 코드를 여러 청크로 나누어 필요할 때만 로드함으로써 초기 로딩 시간을 단축하고 성능을 개선하는 중요한 기법입니다.
CSR에서 Lazy Loading이란 무엇인가요?
Lazy Loading은 사용자가 콘텐츠에 접근할 때 필요한 리소스를 로드하는 방식으로, 초기 로딩 시간을 줄이고 성능을 향상시킵니다. 이미지나 비디오 같은 미디어 콘텐츠에 자주 사용됩니다.
CSR에서 SEO를 최적화하는 방법은 무엇인가요?
CSR에서 SEO를 최적화하기 위해서는 SSR과 결합한 하이드레이션 기법을 사용하거나 메타 태그를 동적으로 설정하여 검색 엔진이 페이지를 효과적으로 크롤링할 수 있도록 해야 합니다.
CSR이 사용자 경험(UX)에 미치는 영향은 무엇인가요?
CSR은 페이지 전환 시 빠른 반응성과 부드러운 인터랙션을 제공하여 사용자 경험을 향상시킵니다. 단, 초기 로딩 시간을 줄이기 위한 최적화가 필요합니다.
참고자료
- What is Client-side Rendering (CSR)? – Prismic
- Server Side Rendering vs Client Side … – WPWeb Infotech
- Client-side Rendering (CSR) vs. Server- …
- Client-Side Rendering and SEO: The Complete Guide
- Optimizing React Applications with Code Splitting and …
- What is lazy loading? – Cloudflare
- [개발지식] Client Side Rendering & Server Side … – 현수 세상