react esi
1.0.0
React ESI es una biblioteca de caché súper poderosa para las aplicaciones de Vanilla React y Next.js, que pueden hacer aplicaciones altamente dinámicas tan rápido como los sitios estáticos.
Proporciona una forma directa de aumentar el rendimiento de su aplicación almacenando fragmentos de páginas renderizadas del lado del servidor en servidores de caché de borde .
¡Significa que después de la primera representación, fragmentos de sus páginas serán atendidos en unos pocos milisegundos por servidores cercanos a sus usuarios finales!
Es una forma muy eficiente de mejorar el rendimiento y el SEO de sus sitios web y reducir drásticamente tanto los costos de alojamiento como el consumo de energía de estas aplicaciones. ¡Ayuda al planeta, usa React ESI!
Debido a que se construye en la parte superior del lado del borde incluye (ESI) la especificación W3C, React es compatible con la mayoría de los proveedores de caché de nubes conocidos, incluidos los trabajadores de Cloudflare, Akamai y rápidamente. Por supuesto, React ESI también admite el servidor de caché de barniz de código abierto que puede usar en su propia infraestructura de forma gratuita (ejemplo de configuración).
Además, React ESI permite la especificación de un tiempo diferente para vivir (TTL) por componente React y genera la HTML correspondiente de manera asincrónica utilizando una URL segura (firmada). El servidor de caché obtiene y almacena en el caché todos los fragmentos necesarios (el HTML correspondiente a cada componente React), construye la página final y la envía al navegador. React ESI también permite que los componentes (re) renderizan el lado del cliente sin ninguna configuración específica.
Esquema del libro de barniz
Descubra React ESi en profundidad con esta presentación
Usando NPM:
$ npm install react-esi
O usar hilo:
$ yarn add react-esi
O usando PNPM:
$ pnpm add react-esi
React ESI proporciona un componente conveniente de orden superior que:
React ESI llama automáticamente un método static async llamado getInitialProps() para completar los accesorios iniciales del componente. Sirador, este método puede acceder a la solicitud y respuesta HTTP, por ejemplo, para establecer el encabezado Cache-Control o algunas etiquetas de caché.
Estos accesorios devueltos por getInitialProps() también se inyectarán en el HTML generado por el lado del servidor (en una etiqueta <script> ). Side Cliente El componente reutilizará los accesorios provenientes del servidor (el método no se llamará por segunda vez). Si el método no se ha llamado al lado del servidor, se llamará del lado del cliente la primera vez que se monta el componente.
// 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
) ;
} ) ;
}
} Los accesorios iniciales deben ser serializables usando JSON.stringify() . ¡Cuidado con Map , Set y Symbol !
Nota: Por conveniencia, getInitialProps() tiene la misma firma que la siguiente. Sin embargo, es una implementación totalmente independiente y independiente (no necesita Next.js para usarlo).
Para servir a los fragmentos, React ESI proporciona un controlador listo para usar compatible con Express, consulte el ejemplo completo.
Alternativamente, aquí hay un ejemplo completo usando un servidor Next.js:
React ESI se puede configurar utilizando variables de entorno:
REACT_ESI_SECRET : una clave secreta utilizada para firmar la URL del fragmento (predeterminada en una cadena aleatoria, se recomienda establecerla para evitar problemas cuando el servidor se reinicia, o cuando usa múltiples servidores )REACT_ESI_PATH : la ruta interna utilizada para generar el fragmento, no debe expuestos públicamente (predeterminado: /_fragment ) <esi:include> elemento Para pasar atributos al <esi:include> elemento generado por React ESI, pase un PROP que tenga la siguiente estructura al HOC:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} Por defecto, la mayoría de los proxies de caché, incluido el barniz, nunca cumplen una respuesta del caché si la solicitud contiene una cookie. Si prueba el uso de localhost o un dominio local similar, borre todas las cookies preexistentes para este origen . Si se esperan las cookies (por ejemplo, Google Analytics o AD Cookies), entonces debe configurar correctamente su proxy de caché para ignorarlas. Aquí hay algunos ejemplos para barniz.
Para permitir que la aplicación del lado del cliente reutilice los accesorios obtenidos o calculados del lado del servidor, React ESI inyecta las etiquetas <script> que los contienen en los fragmentos ESI. Después del ensamblaje de la página por el servidor de caché, estas etiquetas de script terminan mezcladas con el HTML legítimo. Estas etiquetas se eliminan automáticamente del DOM antes de la fase de representación.
React ESI juega muy bien con estrategias avanzadas de caché que incluyen:
¡Pruébalos!
Nos encanta Vue y Nuxt tanto como React y Siguiente, por lo que actualmente estamos portando React ESI para esta plataforma. ¡Contáctenos si desea ayudar!
Creado por Kévin Dunglas. Patrocinado por Les-Tilleuls.coop.
