javascript

클라이언트 측 렌더링과 서버 측 렌더링

조회 240 (작성일 2019.10.13 17:11)
- 음성
- 목록

React 및 Angular와 같은 SPA (Single Page Application) 기술로 작업 할 때 CSR (Client Side Rendering) 및 SSR (Server Side Rendering)이라는 용어와 이들이 사이트 성능에 미치는 영향에 대해 들어 보셨을 것입니다.

CSR과 SSR의 실제 상태와 사이트 작동 방식을 어떻게 변경하는지 알아 봅니다.

https://dev.to/akhilaariyachandra/client-side-rendering-vs-server-side-rendering-2o4o

SPA 클라이언트측 렌더링 작동 방식

브라우저가 SPA 서버에 초기 요청을 하면 서버는 다음과 같은 HTML 파일을 반환합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />

    <title>Single Page Application</title>
  </head>
  <body>
    <--The "root" div will get content from the JS later -->
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

초기 HTML 및 CSS가 로드 된 후 브라우저는 JS 파일로 제공되는 나머지 응용 프로그램을 요청합니다. 이 JS가 로드 되고 구문 분석되는 동안 페이지가 비어 있습니다. JS 파일이 구문 분석되면 내용을 보고 숨길 수 없습니다.

Client Side Rendering Diagram

CSR (Client Side Rendering)의 이점은 다중 페이지 응용 프로그램과 달리 서버에서 더 이상 페이지를 로드 할 필요가 없기 때문에 페이지가 로드 되면 사이트 내의 모든 후속 탐색이 빠르다는 것입니다.

한 가지 단점은 사이트의 사용자가 첫 번째 렌더링 중에 화면에서 의미 있는 것을 볼 때까지 오래 기다려야 한다는 것입니다. 앱의 크기, 연결 속도 및 사이트에서 보는 장치의 성능 (특히 저가형 모바일 장치)에 따라 시간이 오래 걸릴 수 있습니다.

검색 엔진 최적화 (SEO)를 볼 때 또 다른 단점이 있습니다. 웹 크롤러는 JavaScript를 구문 분석하지 않고 컨텐츠를 로드 하지 않으므로 빈 페이지 만 표시 될 수 있습니다.

React 및 Angular와 같은 JavaScript 단일 페이지 응용 프로그램 프레임 워크는 기본적으로 클라이언트 쪽에서 렌더링 됩니다.

서버 측 렌더링 입력

서버측 렌더링을 사용하여 이러한 문제를 해결할 수 있습니다. SSR은 서버 자체에서 앱을 문자열 (HTML)로 렌더링 하여 브라우저로 보냅니다.

클라이언트에서 서버로 렌더링 하는 작업이 필요합니다. 따라서 브라우저가 초기 HTML 파일을 수신하면 전체 JS 파일을 다운로드하고 파싱 해야 CSR 사이트와 달리 사용자가 볼 수 있는 컨텐츠가 화면에 표시됩니다. JS 파일을 다운로드하고 구문 분석하면 사이트가 대화식이 됩니다.

Server Side Rendering Diagram

SSR만 사용하는 단점은 각 페이지를 렌더링하고 서버에서 가져와야 하기 때문에 사이트 내 탐색 속도가 느려진다는 것입니다. 또한 서버의 부하가 증가합니다.

필요에 따라 CSR과 SSR을 모두 사용하는 방법이 있습니까?

CSR은 앱을 더욱 빠르고 대화식으로 만들어줍니다. SSR은 사이트의 첫 렌더링 속도를 높이고 SEO를 개선 할 수 있습니다. 우리는 다른 하나와 완전히 협력하여 하나의 특징을 희생하지 않습니다. 대신 유니버설 웹 앱을 사용할 수 있습니다.

유니버설 웹 앱

Universal Web Apps는 클라이언트 측 렌더링과 서버 측 렌더링을 모두 결합합니다. Universal Web App에서는 초기 렌더링이 서버에서 수행되고 페이지가 로드 되면 클라이언트측 렌더링이 대신 됩니다. 이를 통해 앱에서 탐색 할 때 빠른 SEO와 빠른 렌더링 및 속도를 얻을 수 있습니다.

UWA를 신속하게 구축 할 수 있는 몇 가지 프레임 워크가 있습니다.