react esi
1.0.0
React ESI ist eine super leistungsstarke Cache -Bibliothek für Vanilla React und Next.JS -Anwendungen, die hochdynamische Anwendungen so schnell wie statische Stellen erstellen kann.
Es bietet eine einfache Möglichkeit, die Leistung Ihrer Anwendung zu steigern, indem Fragmente von serverseitigen Seiten auf Rand-Cache-Servern gespeichert werden.
Dies bedeutet, dass nach dem ersten Rendering Fragmente Ihrer Seiten in einigen Millisekunden von Servern in der Nähe Ihrer Endbenutzer serviert werden!
Dies ist eine sehr effiziente Möglichkeit, die Leistung und die SEO Ihrer Websites zu verbessern und sowohl Ihre Hosting -Kosten als auch den Energieverbrauch dieser Anwendungen drastisch zu senken. Helfen Sie dem Planeten, verwenden Sie React ESI!
Da es auf der Randseite basiert, enthält die W3C-Spezifikation (ESI), die die meisten der bekannten Cloud-Cache-Anbieter, darunter Cloudflare-Mitarbeiter, Akamai und schnell, nativ. React ESI unterstützt natürlich auch den Open -Source -Varnish -Cache -Server, den Sie in Ihrer eigenen Infrastruktur kostenlos verwenden können (Beispiel für Konfiguration).
Außerdem ermöglicht React ESI die Spezifikation verschiedener Zeit für Live (TTL) pro React -Komponente und erzeugt die entsprechende HTML -asynchron unter Verwendung einer sicheren (signierten) URL. Der Cache -Server holt und speichert im Cache alle benötigten Fragmente (die HTML, die jeder React -Komponente entspricht), erstellt die letzte Seite und sendet sie an den Browser. React ESI ermöglicht es auch Komponenten, die Client-Seite ohne spezifische Konfiguration (neu) zu rendern.
Schema aus dem Lackbuch
Entdecken Sie mit dieser Präsentation eingehend Reaktionen ESI
Verwenden von NPM:
$ npm install react-esi
Oder mit Garn:
$ yarn add react-esi
Oder mit PNPM:
$ pnpm add react-esi
React ESI bietet eine bequeme Komponente höherer Ordnung, die:
React ESI ruft automatisch eine static async Methode mit dem Namen getInitialProps() auf, um die anfänglichen Requisiten der Komponente zu bevölkern. Serverseitig kann diese Methode auf die HTTP-Anforderung und -Ronaktion zugreifen, um den Cache-Control Header oder einige Cache-Tags zu setzen.
Diese von getInitialProps() zurückgegebenen Requisiten werden auch in die serverseitige HTML (in einem <script> -Tag) injiziert. Client-side Die Komponente wird die vom Server stammenden Requisiten wiederverwenden (die Methode wird nicht als zweites Mal bezeichnet). Wenn die Methode nicht als serverseitig bezeichnet wurde, wird sie als Client-Seite bezeichnet, wenn die Komponente zum ersten Mal montiert wird.
// 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
) ;
} ) ;
}
} Die anfänglichen Requisiten müssen mit JSON.stringify() serialisierbar sein. Achten Sie auf Map , Set und Symbol !
HINWEIS: getInitialProps() hat die gleiche Signatur wie das nächste. Es handelt sich jedoch um eine völlig unabhängige und eigenständige Implementierung (Sie benötigen nicht als Nächste, um sie zu verwenden).
Um die Fragmente zu dienen, bietet React ESI einen mit Express kompatibelen Controller-Controller. Schauen Sie sich das vollständige Beispiel an.
Alternativ finden Sie hier ein vollständiges Beispiel mit einem nächsten.js -Server:
React ESI kann mithilfe von Umgebungsvariablen konfiguriert werden:
REACT_ESI_SECRET : Eine geheime Taste, mit der die Fragment -URL unter Vertrag genommen wird (Standard für eine zufällige Zeichenfolge, wird dringend empfohlen, sie festzulegen, um Probleme beim Neustart des Servers oder bei Verwendung mehrerer Server zu verhindern ).REACT_ESI_PATH : Der interne Pfad, der zum Generieren des Fragments verwendet wird, sollte nicht öffentlich aufgedeckt werden (Standard: /_fragment ) <esi:include> Element einschließen Um Attribute an das <esi:include> von React ESI erzeugte Elemente, die eine Prop mit der folgenden Struktur an die HOC übergeben:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} Standardmäßig servieren die meisten Cache -Proxys, einschließlich Lack, niemals eine Antwort aus dem Cache, wenn die Anforderung ein Cookie enthält. Wenn Sie mit localhost oder einer ähnlichen lokalen Domäne testen, löschen Sie alle bereits bestehenden Kekse für diesen Ursprung . Wenn die Cookies erwartet werden (z. B.: Google Analytics oder AD Cookies), müssen Sie Ihren Cache -Proxy ordnungsgemäß konfigurieren, um sie zu ignorieren. Hier sind einige Beispiele für Lack.
Um die clientseitige App zu ermöglichen, die <script> oder berechneten serverseitigen Requisiten wiederzuverwenden. Nach der Zusammenstellung der Seite durch den Cache -Server werden diese Skript -Tags mit dem legitiden HTML gemischt. Diese Tags werden vor der Rendering -Phase automatisch aus dem DOM entfernt.
React ESI spielt sehr gut mit fortgeschrittenen Cache -Strategien, darunter:
Probieren Sie es aus!
Wir lieben Vue und Nuxt genauso wie React und als nächstes. Wir portieren derzeit React ESI für diese Plattform. Kontaktieren Sie uns, wenn Sie helfen möchten!
Erstellt von Kévin Dunglas. Gesponsert von les-tilleuls.coop.
