클라이언트 측 렌더링과 서버 측 렌더링
4914 단어 reactjavascript
PS - This was originally posted on my blog. Check it out if you want learn more about React and JavaScript!
React 및 Angular과 같은 SPA(Single Page Application) 기술로 작업할 때 클라이언트 측 렌더링(CSR) 및 서버 측 렌더링(SSR)이라는 용어와 이들이 사이트의 성능에 어떤 영향을 미칠 수 있는지 들어보셨을 것입니다. CSR과 SSR이 실제로 무엇인지, 사이트 작동 방식을 어떻게 바꾸는지 알아봅시다.
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 파일이 구문 분석되면 콘텐츠를 볼 수 있고 처리할 수 없습니다.
CSR(클라이언트 측 렌더링)의 장점은 페이지가 일단 로드되면 다중 페이지 응용 프로그램과 달리 서버에서 더 이상 페이지를 로드할 필요가 없기 때문에 사이트 내의 모든 후속 탐색이 빨라진다는 것입니다.
한 가지 단점은 사이트 사용자가 첫 번째 렌더링 중에 화면에서 의미 있는 것을 볼 때까지 오랜 시간을 기다려야 한다는 것입니다. 앱의 크기, 연결 속도, 사이트 OS가 표시되는 장치의 성능(특히 저사양 모바일 장치)에 따라 시간이 오래 걸릴 수 있습니다.
검색 엔진 최적화(SEO)를 볼 때 또 다른 단점이 있습니다. 웹 크롤러는 JavaScript를 구문 분석하고 콘텐츠를 로드하지 않을 수 있으므로 빈 페이지만 표시될 수 있습니다.
React 및 Angular과 같은 JavaScript 단일 페이지 응용 프로그램 프레임워크는 기본적으로 클라이언트 측에서 렌더링됩니다.
서버 사이드 렌더링 시작
서버 사이드 렌더링을 사용하여 이러한 문제를 해결할 수 있습니다. SSR은 서버 자체에서 앱을 문자열(HTML)로 렌더링하고 브라우저로 전송합니다. 이것은 클라이언트에서 서버로 렌더링 작업을 수행합니다. 따라서 브라우저가 초기 HTML 파일을 수신하면 의미 있는 내용을 화면에 표시하기 전에 전체 JS 파일을 다운로드하고 구문 분석해야 하는 CSR 사이트와 달리 사용자가 볼 수 있는 콘텐츠가 있습니다. JS 파일이 다운로드되고 구문 분석되면 사이트는 대화형이 됩니다.
SSR만 사용하는 단점은 각 페이지를 렌더링하고 서버에서 가져와야 하기 때문에 사이트 내 탐색 속도가 느려진다는 것입니다. 이것은 또한 서버의 부하를 증가시킵니다.
필요에 따라 CSR과 SSR을 모두 사용할 수 있는 방법이 있나요?
CSR은 앱을 더 빠르고 대화식으로 만듭니다. SSR은 사이트의 첫 번째 렌더링 속도를 높이고 SEO를 개선할 수 있습니다. 우리는 다른 것과 완전히 결합하여 하나의 기능을 희생하지 않습니다. 대신 Universal Web App을 사용할 수 있습니다.
유니버설 웹 앱
Universal Web Apps는 클라이언트 측 렌더링과 서버 측 렌더링의 장점을 결합합니다. Universal Web App에서 초기 렌더링은 서버에서 수행되며 페이지가 로드되면 클라이언트 측 렌더링이 인계됩니다. 이렇게 하면 앱에서 탐색할 때 우수한 SEO, 빠른 첫 번째 렌더링 및 속도를 얻을 수 있습니다.
UWA를 빠르게 구축할 수 있는 몇 가지 프레임워크가 있습니다.
<!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>
서버 사이드 렌더링을 사용하여 이러한 문제를 해결할 수 있습니다. SSR은 서버 자체에서 앱을 문자열(HTML)로 렌더링하고 브라우저로 전송합니다. 이것은 클라이언트에서 서버로 렌더링 작업을 수행합니다. 따라서 브라우저가 초기 HTML 파일을 수신하면 의미 있는 내용을 화면에 표시하기 전에 전체 JS 파일을 다운로드하고 구문 분석해야 하는 CSR 사이트와 달리 사용자가 볼 수 있는 콘텐츠가 있습니다. JS 파일이 다운로드되고 구문 분석되면 사이트는 대화형이 됩니다.
SSR만 사용하는 단점은 각 페이지를 렌더링하고 서버에서 가져와야 하기 때문에 사이트 내 탐색 속도가 느려진다는 것입니다. 이것은 또한 서버의 부하를 증가시킵니다.
필요에 따라 CSR과 SSR을 모두 사용할 수 있는 방법이 있나요?
CSR은 앱을 더 빠르고 대화식으로 만듭니다. SSR은 사이트의 첫 번째 렌더링 속도를 높이고 SEO를 개선할 수 있습니다. 우리는 다른 것과 완전히 결합하여 하나의 기능을 희생하지 않습니다. 대신 Universal Web App을 사용할 수 있습니다.
유니버설 웹 앱
Universal Web Apps는 클라이언트 측 렌더링과 서버 측 렌더링의 장점을 결합합니다. Universal Web App에서 초기 렌더링은 서버에서 수행되며 페이지가 로드되면 클라이언트 측 렌더링이 인계됩니다. 이렇게 하면 앱에서 탐색할 때 우수한 SEO, 빠른 첫 번째 렌더링 및 속도를 얻을 수 있습니다.
UWA를 빠르게 구축할 수 있는 몇 가지 프레임워크가 있습니다.
Universal Web Apps는 클라이언트 측 렌더링과 서버 측 렌더링의 장점을 결합합니다. Universal Web App에서 초기 렌더링은 서버에서 수행되며 페이지가 로드되면 클라이언트 측 렌더링이 인계됩니다. 이렇게 하면 앱에서 탐색할 때 우수한 SEO, 빠른 첫 번째 렌더링 및 속도를 얻을 수 있습니다.
UWA를 빠르게 구축할 수 있는 몇 가지 프레임워크가 있습니다.
Next.js - 범용 웹 앱을 구축하기 위한 프레임워크React
Nuxt.js - 범용 웹 앱을 구축하기 위한 프레임워크Vue.js
결론
Server Side Rendering 및 Client Side Rendering에 대해 학습하는 데 도움이 되었기를 바랍니다. 게시물이나 기타 의견을 개선할 수 있는 방법에 대한 제안 사항이 있으면 아래에 남겨주세요. 😊
Reference
이 문제에 관하여(클라이언트 측 렌더링과 서버 측 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/akhilaariyachandra/client-side-rendering-vs-server-side-rendering-2o4o
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(클라이언트 측 렌더링과 서버 측 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/akhilaariyachandra/client-side-rendering-vs-server-side-rendering-2o4o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
