클라이언트측 렌더링(CSR)

클라이언트측 렌더링(CSR)은 대화형 및 동적 애플리케이션을 만드는 데 사용되는 최신 웹 개발의 일반적인 기술입니다. 이 기술을 사용하면 서버에서 페이지를 렌더링하는 책임을 제거하고 이를 클라이언트 측으로 가져와 서버가 가장 중요한 것인 비즈니스 규칙을 처리하도록 합니다. 이러한 분리를 통해 더욱 유연하고 동적인 사용자 경험을 제공하고 새로운 유형의 애플리케이션을 생성할 수 있게 되었습니다. 장점은 다양하지만 동시에 이 기술을 채택할 가치가 있는지 여부를 각 프로젝트에서 평가해야 하는 장점도 있습니다.

클라이언트측 렌더링(CSR)이란 무엇인가요?

클라이언트 측 렌더링 또는 CSR은 클라이언트 측(브라우저)에서 인터페이스 렌더링이 발생하는 동적 애플리케이션 개발 기술입니다. 이는 서버가 페이지 렌더링을 담당하고 모든 콘텐츠가 이미 조합된 HTML 파일을 클라이언트에 반환하는 이 기술이 대중화되기 전에 수행된 방식과 다릅니다.

CSR을 사용하면 페이지 렌더링 역할을 브라우저(클라이언트)에 전달합니다. 서버는 내부적으로 Javascript 파일에 대한 링크가 포함된 기본 HTML 파일을 보냅니다. 이 HTML을 수신하면 브라우저는 페이지 콘텐츠 렌더링을 담당하는 참조 Javascript 파일을 다운로드합니다. CRS의 장점은 Javascript 파일이 로드되면 서버에 대한 새로운 요청에 의존하지 않고 콘텐츠를 동적으로 업데이트할 수 있다는 것입니다. 사용자의 브라우징 경험을 더욱 유연하게 만듭니다. CSR은 일반적으로 단일 페이지 애플리케이션(SPA)과 같이 실시간 상호 작용이나 매우 동적인 콘텐츠가 필요한 애플리케이션에 사용됩니다. SEO가 필요 없는 내부 페이지, 대시보드 또는 시스템을 위한 솔루션입니다.

클라이언트측 렌더링은 어떻게 작동하나요?

클라이언트측 렌더링을 사용하는 렌더링 흐름의 예는 다음과 같습니다.

1. 사용자가 내부적으로 서버에 요청을 보내는 웹 페이지에 액세스합니다.
   

2. 서버는 요청을 수신하고 실제로 JavaScript 및 CSS 파일에 대한 링크만 포함된 기본 HTML을 전송하여 응답합니다.
   

3. 브라우저는 이 HTML을 다운로드하고 완료되면 HTML에서 참조된 JavaScript 및 CSS 파일을 다운로드하라는 새 요청을 보냅니다.
   

4. 다운로드된 JavaScript 파일이 실행되고 페이지 렌더링 프로세스가 수행됩니다.
   

5. 이 시점부터 JavaScript는 전체 애플리케이션과 사용자 상호 작용을 제어하여 서버에 대한 새로운 요청 없이 페이지 콘텐츠를 동적으로 업데이트합니다.

클라이언트측 렌더링의 장점

• 속도: 초기 로드 후 서버에 여러 요청을 할 필요가 없으므로 CSR 내 페이지 간 탐색이 매우 빠릅니다.
• 사용자 경험: CSR 사용은 이해하기 쉽고 성능이 뛰어나 기본 애플리케이션과 유사한 경험을 제공합니다.
• 관심사항 분리: CSR은 프론트엔드와 백엔드를 분리하여 프론트엔드를 JS로 완전히 관리하고 백엔드는 데이터와 비즈니스 로직만 관리하도록 합니다.

클라이언트측 렌더링의 단점

• 높은 JS 로드: 대규모 애플리케이션에서는 JS 파일이 매우 무거워질 수 있으며, 이는 특히 초기 애플리케이션 로드 시 사용자 경험에 해를 끼칠 수 있습니다.
• SEO 문제: 페이지 콘텐츠가 클라이언트 측에서 렌더링되므로 검색 엔진은 렌더링된 HTML이 필요하고 CSR이 있는 애플리케이션에서는 HTML이 실제로 비어 있기 때문에 콘텐츠를 색인화하는 데 어려움을 겪습니다. 이는 랜딩 페이지, 전자상거래
등 SEO에 의존하는 애플리케이션에는 단점이 될 수 있습니다.
• 클라이언트에 따라 다름: 애플리케이션이 클라이언트 측에서 실행되기 때문에 애플리케이션에 포함된 리소스의 양에 따라 달라지며, 이는 기기에 리소스가 거의 없는 경우 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 또한 기기에서 JavaScript 실행이 비활성화된 경우 애플리케이션이 작동하지 않습니다.

결론

이 기사에서는 CSR 활용에 관한 주요 중요 사항을 제시하고 기본 사항과 장점 및 단점을 제시합니다. CSR 흐름을 통해 우리는 CSR 라이프사이클의 주요 단계를 알고 있습니다. 클라이언트 측에서 완전히 실행되는 애플리케이션을 제공하는 데 있어 JavaScript의 중요성을 알 수 있습니다. 사용자 경험과 관련된 CSR의 이점에도 불구하고 이 렌더링 기술에는 높은 JavaScript 로드 및 SEO 관련 문제와 관련된 몇 가지 단점이 있다는 것이 분명합니다.

CSR의 한계를 극복하기 위해 정적 사이트 생성(SSG) 및 서버 측 렌더링(SSR)과 같은 솔루션을 보유하고 있습니다. SSG에서는 빌드 기간 동안 페이지가 정적으로 생성되어 HTML이 클라이언트에 전달될 준비가 됩니다. 그리고 SSR의 경우 서버 측에서 렌더링이 이루어지며 서버 측에서는 이미 클라이언트에 렌더링된 HTML로 응답합니다.

위 내용은 클라이언트측 렌더링(CSR)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!