반응 스냅을 사용하여 경로 사전 렌더링

서버 측 렌더링은 아니지만 React 사이트의 속도를 높이고 싶으신가요? 사전 렌더링을 사용해 보세요.

Houssein Djirdeh

react-snap은(는) 서드 파티입니다. 이 라이브러리는 사이트의 페이지를 정적 HTML 파일로 사전 렌더링합니다. 이렇게 하면 개선 첫 페인트 시간을 절약할 수 있습니다

다음은 사전 렌더링을 사용한 애플리케이션과 사용하지 않은 동일한 애플리케이션을 비교한 것입니다. 시뮬레이션된 3G 연결 및 모바일 기기에 로드된 결과:

<ph type="x-smartling-placeholder">
</ph> 병렬 로드 비교. 사전 렌더링을 사용한 버전은 4.2초 더 빠르게 로드됩니다.

이것이 왜 유용할까요?

대규모 단일 페이지 애플리케이션의 가장 큰 성능 문제는 사용자는 사이트를 구성하는 JavaScript 번들이 완료될 때까지 기다려야 함 다운로드할 수 있어야 합니다. 번들이 클수록 더 오래 기다려야 합니다

이 문제를 해결하기 위해 많은 개발자가 서버를 부팅하는 것이 아니라 브라우저에서 부팅하기만 하면 됩니다. 각 전체 HTML이 서버에서 생성되어 브라우저의 첫 번째 페인트 시간은 줄지만 속도가 느려지는 단점이 있습니다. 첫 바이트까지의 시간입니다.

사전 렌더링은 서버보다 덜 복잡한 별도의 기술입니다. 더 나은 렌더링을 위해 애플리케이션입니다. 헤드리스 브라우저 또는 사용자 인터페이스가 없는 브라우저가 사용됩니다. 을 사용하여 빌드 시간 중에 모든 경로의 정적 HTML 파일을 생성합니다. 이러한 파일 필요한 자바스크립트 번들과 함께 제공될 수 있습니다. 애플리케이션입니다.

리액션-스냅

react-snap는 Puppeteer를 사용하여 다음을 수행합니다. 애플리케이션에 다양한 경로의 사전 렌더링된 HTML 파일을 만듭니다. 받는사람 시작하려면 개발 종속 항목으로 설치합니다.

npm install --save-dev react-snap

그런 다음 package.json에 postbuild 스크립트를 추가합니다.

"scripts": {
  //...
  "postbuild": "react-snap"
}

이렇게 하면 새 빌드가 실행될 때마다 react-snap 명령어가 자동으로 실행됩니다. 애플리케이션 수 (npm build).

마지막으로 해야 할 일은 애플리케이션이 부팅되는 방식을 변경하는 것입니다. src/index.js 파일을 다음과 같이 변경합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

ReactDOM.render만 사용하여 루트 React 요소를 렌더링하는 대신 DOM에 직접 삽입하면 하위 노드가 이미 있는지 확인합니다. HTML 콘텐츠가 사전 렌더링되었는지 (또는 HTML 페이지에서 렌더링되었는지) 있습니다. 이 경우 이벤트를 첨부하는 데 ReactDOM.hydrate가 대신 사용됩니다. 리스너가 이미 생성한 HTML에 대한 리스너를 다시 생성합니다.

이제 애플리케이션을 빌드하면 크롤링되어야 합니다. HTML 페이로드가 어떻게 생겼는지 살펴보고 예를 들어 HTML 요청의 URL을 클릭한 다음 미리보기를 Chrome DevTools 내의 탭으로 이동합니다.

전후 비교입니다. 애프터 샷은 콘텐츠가 렌더링되었음을 보여줍니다.

스타일이 지정되지 않은 콘텐츠 플래시

정적 HTML이 이제 거의 즉시 렌더링되지만 여전히 기본적으로 스타일이 지정되지 않은 경우 '스타일이 지정되지 않은 이미지가 깜박이는 현상이 발생할 수 있음' 콘텐츠" (FOUC). 이는 CSS-in-JS를 사용하는 경우 특히 두드러질 수 있습니다. JavaScript 번들이 선택자를 생성해야 하므로 모든 스타일에 적용됩니다.

이를 방지하기 위해 중요한 CSS 또는 초기 페이지를 렌더링하는 데 필요하며 <head>에 직접 인라인할 수 있습니다. HTML 문서로 이동합니다. react-snap는 후드, minimalcss를 사용하여 중요한 CSS입니다. 이 작업은 package.json 파일에서 다음을 실행합니다.

"reactSnap": {
  "inlineCss": true
}

이제 Chrome DevTools의 응답 미리보기를 살펴보면 중요한 CSS 인라인과 함께 스타일이 지정된 페이지가 표시됩니다.

전후 비교입니다. 애프터 샷에서는 콘텐츠가 렌더링되고 중요한 인라인 CSS로 인해 스타일이 지정되었음을 보여줍니다.

결론

애플리케이션에서 서버 측 렌더링 경로가 아닌 경우 다음을 사용합니다. react-snap: 사용자에게 정적 HTML을 사전 렌더링합니다.

  1. 개발 종속 항목으로 설치하고 기본값으로만 시작합니다. 설정을 변경할 수 있습니다.
  2. 실험용 inlineCss 옵션을 사용하여 작동하는 경우 중요한 CSS를 인라인 처리 생성합니다.
  3. 경로 내의 구성요소 수준에서 코드 분할을 사용하는 경우 사용자에게 로드 상태를 사전 렌더링하지 않도록 주의하세요. 이 react-snap 리드미 더 자세히 살펴보겠습니다