React의 ssr 프로젝트는 무엇인가요?

반응에서 ssr은 "Server Side Rendering"의 약어입니다. 이는 서버 측 렌더링을 의미합니다. ssr은 동일한 구성 요소를 서버 측 HTML 문자열로 렌더링하고 이를 브라우저에 전송하여 이러한 정적 태그를 완전히 활성화합니다. 클라이언트의 대화형 애플리케이션.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React의 SSR 프로젝트란 무엇인가요?

SSR: Server Side Rendering

클라이언트가 서버에 요청을 보내고, 서버는 클라이언트에서 데이터와 HTML의 스플라이싱을 완료합니다. 표시되기만 하면 됩니다.

현재 많은 프런트엔드 프로젝트는 단일 페이지 애플리케이션입니다. 좋은 사용자 경험과 프런트엔드와 백엔드의 분리를 위해 우리는 독립적인 클라이언트 프로그램을 별도로 만들 것입니다. 이제 클라이언트 애플리케이션을 구축하기 위한 성숙한 프레임워크가 많이 있으며, 이를 직접 사용하고 프로젝트의 요구 사항에 맞게 수정할 수도 있습니다. 물론 우리 자신의 필요에 따라 구축할 수도 있습니다.

기본적으로 구성 요소는 브라우저에서 출력되어 DOM을 생성하고 DOM을 작동하여 사용자 상호 작용을 달성할 수 있습니다. 그러나 때로는 동일한 구성 요소를 서버측 HTML 문자열로 렌더링하고 이를 브라우저에 직접 보낸 다음 최종적으로 이러한 정적 마크업을 클라이언트의 완전한 대화형 애플리케이션으로 "활성화"하는 것이 가능합니다. 이것이 서버측 렌더링입니다. .

SSR을 사용하는 이유

기존 SPA(단일 페이지 애플리케이션)와 비교할 때 서버 측 렌더링(SSR)의 장점은 주로 다음과 같습니다.

검색 엔진 크롤러 크롤링으로 인해 더 나은 SEO 가져오기 도구를 사용하면 다음을 수행할 수 있습니다. 완전히 렌더링된 페이지를 직접 확인하세요.

단일 페이지 애플리케이션의 페이지는 ajax를 통해 데이터를 요청하고 페이지를 동적으로 생성합니다. 그러나 검색 엔진 크롤러는 JS에서 생성된 콘텐츠를 크롤링할 수 없기 때문에 단일 페이지 애플리케이션 프로젝트를 만날 때 아무것도 크롤링할 수 없으며 이는 SEO에 도움이 되지 않습니다. , SSR은 서버 측에서 페이지를 생성하여 클라이언트에 전송하고 전체 페이지가 표시되므로 정보, 연락처 페이지 등과 같은 페이지에 대한 SEO에 더 편리합니다.

첫 화면에서 흰 화면이 나오는 문제를 해결해보세요. 느린 네트워크 상태 또는 느린 장치의 경우 서버 렌더링 마크업을 표시하기 전에 모든 JavaScript의 다운로드 및 실행이 완료될 때까지 기다릴 필요가 없으므로 사용자는 완전히 렌더링된 페이지를 더 빨리 볼 수 있습니다. 종종 더 나은 사용자 경험을 제공합니다.

단일 페이지 애플리케이션을 처음 로드할 때 애플리케이션을 시작하기 전에 패키지된(requirejs 또는 webpack 패키지된) js를 브라우저로 전송해야 하는데 이 작업은 약간 느립니다. 웹 페이지가 서버 측에서 사전 렌더링되어 브라우저로 직접 전송되는 경우 사용자는 완전히 렌더링된 페이지를 더 빨리 볼 수 있으므로 일반적으로 더 나은 사용자 경험을 얻을 수 있습니다.

SSR 워크플로

위 그림에서 볼 수 있듯이 서버는 HTML 코드만 생성하고 프런트 엔드는 서버에서 HTML로 사용할 main.js 복사본을 생성합니다. 이것이 React SSR이 작동하는 방식입니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 React의 ssr 프로젝트는 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!