react esi
1.0.0
React ESI est une bibliothèque de cache super puissante pour Vanilla React et Next.js Applications, qui peuvent rendre les applications très dynamiques aussi rapidement que les sites statiques.
Il fournit un moyen simple de renforcer les performances de votre application en stockant des fragments de pages rendues côté serveur dans des serveurs de cache Edge .
Cela signifie qu'après le premier rendu, les fragments de vos pages seront servis en quelques millisecondes par des serveurs proches de vos utilisateurs finaux!
C'est un moyen très efficace d'améliorer les performances et le référencement de vos sites Web et de réduire considérablement vos coûts d'hébergement et la consommation d'énergie de ces applications. Aidez la planète, utilisez React ESI!
Parce qu'il est construit sur le côté du bord comprend (ESI) W3C spécification, React ESI prend en charge la plupart des fournisseurs de cache de cloud bien connus, y compris les travailleurs de CloudFlare, Akamai et rapidement. Bien sûr, React ESI prend également en charge le serveur de cache Varnish open source que vous pouvez utiliser gratuitement dans votre propre infrastructure (exemple de configuration).
De plus, React ESI permet la spécification de différents temps de vivre (TTL) par composant REACT et génère le HTML correspondant de manière asynchrone à l'aide d'une URL sécurisée (signée). Le serveur de cache récupère et stocke dans le cache tous les fragments nécessaires (le HTML correspondant à chaque composant React), construit la page finale et l'envoie au navigateur. React ESI permet également aux composants de (re-) render le côté client sans aucune configuration spécifique.
Schéma du livre de vernis
Découvrez React ESI en profondeur avec cette présentation
Utilisation de NPM:
$ npm install react-esi
Ou en utilisant du fil:
$ yarn add react-esi
Ou en utilisant PNPM:
$ pnpm add react-esi
React ESI fournit un composant d'ordre supérieur pratique qui sera:
React ESI appelle automatiquement une méthode static async nommée getInitialProps() pour remplir les accessoires initiaux du composant. Côté serveur, cette méthode peut accéder à la demande et à la réponse HTTP, par exemple, pour définir l'en-tête Cache-Control ou certaines balises de cache.
Ces accessoires renvoyés par getInitialProps() seront également injectés dans le HTML généré côté serveur (dans une balise <script> ). Côté client Le composant réutilisera les accessoires provenant du serveur (la méthode ne sera pas appelée deuxième fois). Si la méthode n'a pas été appelée côté serveur, elle sera appelée côté client la première fois que le composant est monté.
// 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
) ;
} ) ;
}
} Les accessoires initiaux doivent être sérialisables à l'aide de JSON.stringify() . Méfiez-vous Map , Set et Symbol !
Remarque: Pour plus de commodité, getInitialProps() a la même signature que celle suivante.js. Cependant, c'est une implémentation totalement indépendante et autonome (vous n'avez pas besoin de next.js pour l'utiliser).
Pour servir les fragments, React ESI fournit un contrôleur prêt à l'emploi compatible avec Express, consultez l'exemple complet.
Alternativement, voici un exemple complet utilisant un serveur Next.js:
React ESI peut être configuré à l'aide de variables d'environnement:
REACT_ESI_SECRET : une clé secrète utilisée pour signer l'URL du fragment (par défaut à une chaîne aléatoire, il est fortement recommandé de le définir pour éviter les problèmes lorsque le serveur redémarre ou lors de l'utilisation de plusieurs serveurs )REACT_ESI_PATH : le chemin interne utilisé pour générer le fragment ne doit pas être exposé publiquement (par défaut: /_fragment ) <esi:include> Pour passer des attributs à l'élément <esi:include> généré par React ESI, passez un accessoire ayant la structure suivante au hoc:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} Par défaut, la plupart des proxys de cache, y compris le vernis, ne servent jamais de réponse du cache si la demande contient un cookie. Si vous testez à l'aide localhost ou d'un domaine local similaire, effacez tous les cookies préexistants pour cette origine . Si les cookies sont attendus (par exemple: Google Analytics ou Cookies AD), vous devez configurer correctement votre proxy de cache pour les ignorer. Voici quelques exemples de vernis.
Pour permettre à l'application côté client de réutiliser les accessoires réapprovisés ou calculés côté serveur, React ESI Injects <script> les contenant dans les fragments ESI. Après l'assemblage de la page par le serveur de cache, ces balises de script se terminent avec le HTML légitime. Ces balises sont automatiquement supprimées du DOM avant la phase de rendu.
React ESI joue très bien avec des stratégies de cache avancées, notamment:
Essayez-les!
Nous aimons Vue et Nuxt autant que React et Next, donc nous portons actuellement React ESI pour cette plate-forme. Contactez-nous si vous souhaitez aider!
Créé par Kévin Dunglas. Parrainé par Les-Tilleuls.coop.
