react esi
1.0.0
React ESIは、Vanilla ReactおよびNext.JSアプリケーションの非常に強力なキャッシュライブラリであり、静的サイトと同じくらい速く動的なアプリケーションを作成できます。
エッジキャッシュサーバーにサーバー側のレンダリングされたページのフラグメントを保存することにより、アプリケーションのパフォーマンスを向上させる簡単な方法を提供します。
つまり、最初のレンダリングの後、ページのフラグメントは、エンドユーザーの近くのサーバーによって数ミリ秒で提供されることを意味します！
これは、ウェブサイトのパフォーマンスとSEOを改善し、ホスティングコストとこれらのアプリケーションのエネルギー消費の両方を劇的に削減するための非常に効率的な方法です。惑星を助け、React ESIを使用してください！
エッジ側の上部に構築されているため、esi）W3C仕様にはReact ESIは、Cloudflareワーカー、アカマイ、速さを含む有名なクラウドキャッシュプロバイダーのほとんどをネイティブにサポートします。もちろん、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は、次のようになる便利な高次コンポーネントを提供します。
React ESIはgetInitialProps()という名前のstatic asyncメソッドを自動的に呼び出して、コンポーネントの初期小道具に登録します。サーバー側では、このメソッドは、たとえば、HTTP要求と応答にアクセスして、 Cache-Controlヘッダーまたはいくつかのキャッシュタグを設定できます。
getInitialProps()によって返されたこれらの小道具は、サーバー側で生成されたHTML（ <script>タグ）にも注入されます。クライアント側コンポーネントは、サーバーから来るプロップを再利用します（この方法は2回目とは呼ばれません）。メソッドがサーバー側と呼ばれていない場合、コンポーネントが最初にマウントされるときにクライアント側と呼ばれます。
// 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()次の署名と同じ署名を持っています。ただし、それは完全に独立したスタンドアロンの実装です（next.jsはそれを使用する必要はありません）。
フラグメントを提供するために、React ESIはExpressと互換性のあるすぐに使用できるコントローラーを提供します。完全な例をご覧ください。
または、next.jsサーバーを使用した完全な例を次に示します。
React ESIは、環境変数を使用して構成できます。
REACT_ESI_SECRET ：フラグメントURLに署名するために使用されるシークレットキー（デフォルトのランダムな文字列には、サーバーが再起動したとき、または複数のサーバーを使用するときに問題を防ぐために設定することを強くお勧めします）REACT_ESI_PATH ：フラグメントを生成するために使用される内部パスは、公開されないでください（デフォルト： /_fragment ） <esi:include>要素に渡す属性を<esi:include> react esiによって生成された要素を含めるには、次の構造を持つプロップをHOCに渡します。
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} デフォルトでは、ワニスを含むほとんどのキャッシュプロキシは、リクエストにCookieが含まれている場合、キャッシュからの応答を提供しません。 localhostまたは同様のローカルドメインを使用してテストする場合は、この起源についてすべての既存のCookieをクリアします。 Cookieが予想される場合（例：Googleアナリティクスまたは広告Cookie）、キャッシュプロキシを適切に構成して無視する必要があります。ワニスの例をいくつか紹介します。
クライアント側のアプリがフェッチされたサーバー側または計算されたプロップを再利用できるようにするには、ESIフラグメントにそれらを含むESI注入<script>タグを反応させます。キャッシュサーバーによるページの組み立て後、これらのスクリプトタグは正当なHTMLと混合されます。これらのタグは、レンダリングフェーズの前にDOMから自動的に削除されます。
React ESIは、以下を含む高度なキャッシュ戦略で非常によく機能します
試してみてください！
私たちはVueとNuxtがReactとNextと同様に大好きなので、現在、このプラットフォームにReact ESIを移植しています。助けたい場合はお問い合わせください！
ケビン・ダングラスによって作成されました。 Les-Tilleuls.Coopがスポンサー。
