react esi
1.0.0
React ESI는 Vanilla React 및 Next.js 응용 프로그램을위한 매우 강력한 캐시 라이브러리로 정적 사이트만큼 빠르게 동적 인 응용 프로그램을 만들 수 있습니다.
Edge 캐시 서버 에 서버 측 렌더링 페이지 조각을 저장하여 응용 프로그램의 성능을 향상시키는 간단한 방법을 제공합니다.
첫 번째 렌더링 후에는 페이지 조각이 최종 사용자와 가까운 서버에 의해 몇 밀리 초 안에 제공 될 것임을 의미합니다!
웹 사이트의 성능 및 SEO를 개선하고 호스팅 비용과 이러한 응용 프로그램의 에너지 소비를 크게 줄이는 매우 효율적인 방법입니다. 지구를 도와주고, 반응 ESI를 사용하십시오!
ESI (Edge Side)가 포함 된 (ESI) W3C 사양 위에 구축되었으므로 Cloudflare Workers, Akamai 및 Fastly를 포함한 잘 알려진 클라우드 캐시 제공 업체의 대부분을 지원합니다. 물론 React ESI는 자신의 인프라에서 무료로 사용할 수있는 오픈 소스 바니시 캐시 서버도 지원합니다 (구성 예).
또한, React ESI를 사용하면 React 구성 요소당 다른 시간 (TTL)을 사양하고 안전한 (서명 된) URL을 사용하여 해당 HTML을 비동기로 생성합니다. 캐시 서버는 캐시에 필요한 모든 조각 (모든 React 구성 요소에 해당하는 HTML)을 캐시하고 저장하고 최종 페이지를 빌드하여 브라우저로 보냅니다. React ESI는 또한 구성 요소가 특정 구성없이 클라이언트 측을 렌더링 할 수 있도록합니다.
바니시 북의 스키마
이 프레젠테이션으로 React ESI를 깊이 발견하십시오
NPM 사용 :
$ npm install react-esi
또는 원사 사용 :
$ yarn add react-esi
또는 PNPM 사용 :
$ pnpm add react-esi
React ESI는 다음과 같은 편리한 고차 구성 요소를 제공합니다.
반응 ESI는 getInitialProps() 라는 static async 메소드를 자동으로 호출하여 구성 요소의 초기 소품을 채 웁니다. 서버 측에서는이 메소드가 HTTP 요청 및 응답에 액세스하여 Cache-Control 헤더 또는 일부 캐시 태그를 설정할 수 있습니다.
getInitialProps() 에 의해 반환 된이 소품은 서버 측 생성 HTML ( <script> 태그)에 주입됩니다. 클라이언트 측 구성 요소는 서버에서 오는 소품을 재사용합니다 (이 메소드는 두 번째로 호출되지 않음). 이 메소드를 서버 측 호출되지 않은 경우 구성 요소가 처음 장착 된 경우 클라이언트 측이라고합니다.
// pages/App.jsx
import withESI from "react-esi/lib/withESI" ;
import MyFragment from "../components/MyFragment" ;
const MyFragmentESI = withESI ( MyFragment , "MyFragment" ) ;
// The second parameter is an unique ID identifying this fragment.
// If you use different instances of the same component, use a different ID per instance.
export const App = ( ) => (
< div >
< h1 > React ESI demo app </ h1 >
< MyFragmentESI greeting = "Hello!" />
</ div >
) ; // components/MyFragment.jsx
import React from "react" ;
export default class MyFragment extends React . Component {
render ( ) {
return (
< section >
< h1 > A fragment that can have its own TTL </ h1 >
< div > { this . props . greeting /* access to the props as usual */ } </ div >
< div > { this . props . dataFromAnAPI } </ div >
</ section >
) ;
}
static async getInitialProps ( { props , res } ) {
return new Promise ( ( resolve ) => {
if ( res ) {
// Set a TTL for this fragment
res . set ( "Cache-Control" , "s-maxage=60, max-age=30" ) ;
}
// Simulate a delay (call to a remote service such as a web API)
setTimeout (
( ) =>
resolve ( {
... props , // Props coming from index.js, passed through the internal URL
dataFromAnAPI : "Hello there" ,
} ) ,
2000
) ;
} ) ;
}
} 초기 소품은 JSON.stringify() 사용하여 직렬화 할 수 있어야합니다 . Map , Set 및 Symbol 조심하십시오!
참고 : 편의를 위해 getInitialProps() 다음 .js와 동일한 서명을 가지고 있습니다. 그러나 완전히 독립적이고 독립형 구현입니다 (다음에 사용하려면 JS가 필요하지 않음).
파편을 제공하기 위해 React ESI는 Express와 호환되는 즉시 사용 가능한 컨트롤러를 제공합니다. 전체 예제를 확인하십시오.
또는 다음은 Next.js 서버를 사용하는 전체 예입니다.
반응 ESI는 환경 변수를 사용하여 구성 할 수 있습니다.
REACT_ESI_SECRET : 파편 URL에 서명하는 데 사용되는 비밀 키 (임의 문자열의 기본값은 서버가 다시 시작될 때 또는 여러 서버를 사용할 때 문제를 방지하기 위해 설정하는 것이 좋습니다 )REACT_ESI_PATH : 조각을 생성하는 데 사용되는 내부 경로는 공개적으로 노출되어서는 안됩니다 (Default : /_fragment ) <esi:include> element에 전달합니다 <esi:include> reft esi에 의해 생성 된 요소에 속성을 전달하려면 다음 구조를 가진 소품을 HOC에 전달하십시오.
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} 기본적으로 바니시를 포함한 대부분의 캐시 프록시는 요청에 쿠키가 포함 된 경우 캐시의 응답을 제공하지 않습니다. localhost 또는 유사한 로컬 도메인을 사용하여 테스트하는 경우이 기원에 대해 기존 쿠키를 모두 지우십시오 . 쿠키가 예상되는 경우 (예 : Google 웹 로그 분석 또는 광고 쿠키) 캐시 프록시를 올바르게 구성하여 무시해야합니다. Varnish의 몇 가지 예는 다음과 같습니다.
클라이언트 측 앱이 페치 또는 계산 된 서버 쪽을 재사용 할 수 있도록 ESI 조각에 포함 된 ESI 인젝트 <script> 태그를 반응합니다. 캐시 서버가 페이지를 조립 한 후이 스크립트 태그는 합법적 인 HTML과 혼합됩니다. 이 태그는 렌더링 단계 전에 DOM에서 자동으로 제거됩니다.
React ESI는 다음을 포함한 고급 캐시 전략에서 매우 잘 수행됩니다.
그들에게 시도해보세요!
우리는 반응과 다음에 Vue와 Nuxt를 좋아하므로 현재이 플랫폼의 React ESI를 포팅하고 있습니다. 도와주고 싶다면 저희에게 연락하십시오!
Kévin Dunglas에 의해 만들어졌습니다. les-tilleuls.coop가 후원합니다.
