react-snap ✨🧙💨으로 React 사라지는 행위 수행

React에서 프런트엔드를 구축한 다음 서버 없이 자바스크립트 흔적 없이 HTML로 컴파일 및 배포할 수 있다고 말하면 어떻게 될까요?



와하하하!

모든 정적 비대화형 페이지에 대해 매우 쉽게 수행할 수 있습니다. 방법은 다음과 같습니다!

SSR & 리액트스냅 👏

서버측 렌더링(SSR)은 새로운 개념이 아닙니다. 웹 사이트, 특히 트래픽이 많은 웹 사이트는 페이지 로드 성능을 최적화하기 위해 수년 동안 이 작업을 수행해 왔습니다. 빠른 읽기 경험이 가장 중요했기 때문에 GMG/The Onion에 있을 때 이것은 항상 최전선에 있었습니다.

React-land의 SSR은 일반적으로 다음과 같은 작업을 의미합니다(react-snapreadme에서 가져옴):

import { hydrate, render } from "react-dom";

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}

서버는 초기render를 수행한 다음 클라이언트가 이를 감지하고 그냥 할 수 있습니다hydrate. 그러나 때때로 나는 원하지 않고hydrate 대신 나를 거기에 있게 한 코드를 완전히 포기하는 것을 선호합니다.

운 좋게도 "제로 구성 프레임워크에 구애받지 않는 정적 사전 렌더링"도구가 이를 지원합니다! react-snap은 puppeteer(헤드리스 Chrome)를 사용하여 페이지를 가상으로 렌더링한 다음 몇 가지 추가 최적화를 수행합니다.

빌드 스크립트(이름에도 불구하고 React뿐만 아니라)가 있는 모든 프로젝트에 패키지를 추가하고 postbuild 스크립트로 추가하면 다음과 같이 활성화됩니다.

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

그리고 이것은 우리에게 절반의 길을 가져다줍니다. 이를 무자산으로 만들려면 몇 가지 다른 항목flags도 필요합니다.

"reactSnap": {
  "inlineCss": true,
  "removeBlobs": true,
  "removeScriptTags": true,
  "removeStyleTags": true
}

Note: inlineCss is still an experimental feature and doesn't currently work because of a service worker issue. There's a patched version that includes a fix.

이제 build 를 실행한 후 react-snap 및 minimalcss는 가상 DOM을 실제 DOM으로 바꾸고 모든 자산을 제거한 다음 평범한 기존 HTML을 반환합니다!

이것이 멋진 이유 🔮

실제 서버 없이도 SSR의 장점을 제공합니다.

클라이언트는 HTML 마크업을 구문 분석하고 완료할 수 있습니다. 스크립트 시간, 자산 로드 등이 없음

스타일이 인라인되므로 스타일시트 호스팅에 대해 걱정할 필요가 없습니다.

또는 올바르게 링크합니다.

원하는 CSS-in-JS 라이브러리를 사용하십시오. 클라이언트에 로드되지 않습니다.

모든 어려운 작업은 한 번만 수행됩니다.

기존 SSR을 사용한 캐싱도 이 작업을 수행할 수 있지만 변경 시 캐시 무효화에 대해 걱정해야 합니다.

앱 SEO도 무료로 제공합니다.

웹 크롤러는 멋진 React 번들에 신경 쓰지 않고 그들이 볼 수 있는 HTML 마크업만 신경씁니다.

개는 없고 콧물만 있습니다.

모든 사용 사례에 해당되지 않음

분명히 이 접근 방식은 페이지에서 상호 작용이 필요할 때 무너집니다. 그러나 이것은 정적인 읽기 전용 페이지(예: 블로그 기사)를 렌더링하고 다른 부풀림이 필요하지 않을 때 빛을 발합니다.


이것을 CI와 함께 적용한 프로젝트를 공유할 또 다른 게시물을 기대해주세요!