react esi
1.0.0
O React ESI é uma biblioteca de cache super poderosa para aplicativos de baunilha React e Next.js, que podem criar aplicativos altamente dinâmicos tão rápidos quanto os sites estáticos.
Ele fornece uma maneira direta de aumentar o desempenho do seu aplicativo, armazenando fragmentos de páginas renderizadas do lado do servidor nos servidores de cache do Edge .
Isso significa que, após a primeira renderização, os fragmentos de suas páginas serão servidos em alguns milissegundos por servidores próximos aos usuários finais!
É uma maneira muito eficiente de melhorar o desempenho e o SEO de seus sites e reduzir drasticamente os custos de hospedagem e o consumo de energia desses aplicativos. Ajude o planeta, use o React ESI!
Como é construído sobre o lado da borda, inclui a especificação W3C (ESI), o React Si-Si suporta a maioria dos conhecidos provedores de cache em nuvem, incluindo Cloudflare Workers, Akamai e Fundamente. Obviamente, o React ESI também suporta o servidor de cache de varish de código aberto que você pode usar em sua própria infraestrutura gratuitamente (exemplo de configuração).
Além disso, o React ESI permite a especificação de tempo diferente para viver (TTL) por componente React e gera o HTML correspondente assíncrono usando um URL seguro (assinado). O servidor de cache busca e armazena no cache todos os fragmentos necessários (o HTML correspondente a todos os componentes do React), cria a página final e a envia para o navegador. O REACT ESI também permite que os componentes (renderizem renderizar o lado do cliente sem nenhuma configuração específica.
Esquema do livro de verniz
Descubra reaja ESI em profundidade com esta apresentação
Usando NPM:
$ npm install react-esi
Ou usando fios:
$ yarn add react-esi
Ou usando o PNPM:
$ pnpm add react-esi
O React ESI fornece um componente conveniente de ordem superior que será:
O React ESI chama automaticamente um método static async chamado getInitialProps() para preencher os adereços iniciais do componente. Fado do servidor, esse método pode acessar a solicitação e resposta HTTP, por exemplo, para definir o cabeçalho Cache-Control ou algumas tags de cache.
Esses adereços retornados pelo getInitialProps() também serão injetados no HTML gerado pelo servidor (em uma tag <script> ). Fado do cliente O componente reutilizará os adereços provenientes do servidor (o método não será chamado de segunda vez). Se o método não tiver sido chamado de servidor, ele será chamado de lado do cliente na primeira vez que o componente for montado.
// 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
) ;
} ) ;
}
} Os adereços iniciais devem ser serializáveis usando JSON.stringify() . Cuidado com Map , Set e Symbol !
Nota: Para conveniência, getInitialProps() tem a mesma assinatura que a próxima.js uma. No entanto, é uma implementação totalmente independente e independente (você não precisa do próximo.js para usá -lo).
Para servir os fragmentos, o React ESI fornece um controlador pronto para uso compatível com o Express, confira o exemplo completo.
Como alternativa, aqui está um exemplo completo usando um servidor Next.js:
O REACT ESI pode ser configurado usando variáveis de ambiente:
REACT_ESI_SECRET : uma chave secreta usada para assinar o URL do fragmento (padrão para uma string aleatória, é altamente recomendável defini -la para evitar problemas quando o servidor reiniciar ou usar vários servidores )REACT_ESI_PATH : O caminho interno usado para gerar o fragmento não deve ser exposto publicamente (padrão: /_fragment ) <esi:include> Para passar atributos para o elemento <esi:include> gerado por react ESI, passe um suporte com a seguinte estrutura para o hoc:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} Por padrão, a maioria dos proxies de cache, incluindo verniz, nunca serve uma resposta do cache se a solicitação contiver um cookie. Se você testar usando localhost ou um domínio local semelhante, limpe todos os cookies pré-existentes para esta origem . Se os cookies forem esperados (por exemplo: Google Analytics ou cookies de anúncios), você deverá configurar corretamente o proxy do seu cache para ignorá -los. Aqui estão alguns exemplos para verniz.
Para permitir que o aplicativo do lado do cliente reutilize os adereços buscados ou calculados no lado do servidor, reaja as tags de injeção de ESI <script> que os contêm nos fragmentos ESI. Após a montagem da página pelo servidor de cache, essas tags de script acabam misturadas com o HTML legítimo. Essas tags são removidas automaticamente do DOM antes da fase de renderização.
O React ESI joga muito bem com estratégias avançadas de cache, incluindo:
Experimente!
Adoramos o Vue e o NUXT tanto quanto o React e, em seguida, por isso estamos atualmente portando o React ESI para esta plataforma. Entre em contato conosco se quiser ajudar!
Criado por Kévin Dunglas. Patrocinado por les-tilleuls.coop.
