react esi
1.0.0
React ESI - это очень мощная библиотека кэша для приложений Vanilla React и Next.js, которая может сделать очень динамические приложения так быстро, как статические сайты.
Он обеспечивает простой способ повышения производительности вашего приложения, сохраняя фрагменты визуализированных страниц на стороне сервера на серверах кэша .
Это означает, что после первого рендеринга фрагменты ваших страниц будут подаваться в несколько миллисекунд на серверах, близких к вашим конечным пользователям!
Это очень эффективный способ улучшить производительность и SEO ваших веб -сайтов и значительно сократить как ваши расходы на хостинг, так и энергопотребление этих приложений. Помогите планете, используйте React ESI!
Поскольку он построен на вершине края, включает в себя (ESI) спецификацию W3C, React ESI, наказывающим, поддерживает большинство известных поставщиков облачных кэша, включая работников CloudFlare, Akamai и Fortly. Конечно, React ESI также поддерживает сервер ваша с открытым исходным кодом, который вы можете бесплатно использовать в своей собственной инфраструктуре (пример конфигурации).
Кроме того, React ESI позволяет спецификации различного времени для жизни (TTL) на компонент React и генерирует соответствующий HTML -асинхронно, используя безопасный (подписанный) URL. Кэш -сервер приносит и хранит в кэше все необходимые фрагменты (HTML, соответствующий каждому компоненту React), строит окончательную страницу и отправляет ее в браузер. React ESI также позволяет компонентам (повторно) рендеринг на стороне клиента без какой-либо конкретной конфигурации.
Схема из книги лака
Откройте для себя глубоко React ESI с этой презентацией
Используя NPM:
$ npm install react-esi
Или используя пряжу:
$ yarn add react-esi
Или используя PNPM:
$ pnpm add react-esi
React ESI предоставляет удобный компонент более высокого порядка, который будет:
React ESI автоматически вызывает static async метод с именем getInitialProps() для заполнения начальных реквизитов компонента. Серверная сторона, этот метод может получить доступ к HTTP-запросу и ответу, например, для установки заголовка Cache-Control или некоторых тегов кэша.
Эти реквизиты, возвращаемые getInitialProps() также будут вводиться в серверную сгенерированную HTML (в теге <script> ). На стороне клиента компонент повторно использует реквизиты, поступающие с сервера (метод не будет называться во второй раз). Если метод не был назван на стороне сервера, то он будет называться клиентской стороной при первом установке компонента.
// 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() имеет такую же подпись, как и следующая. Тем не менее, это полностью независимая и автономная реализация (вам не нужно следующее. 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 Analytics или Ad Cookie), то вы должны правильно настроить свой кэш -прокси, чтобы игнорировать их. Вот несколько примеров для лака.
Чтобы позволить приложению на стороне клиента повторно использовать репутация, извлеченные или вычисленные на стороне сервера, React ESI Injects <script> теги, содержащие их в фрагментах ESI. После сборки страницы сервером Cache эти теги сценария в конечном итоге смешаны с законным HTML. Эти теги автоматически удаляются из DOM до фазы рендеринга.
React ESI очень хорошо играет с передовыми стратегиями кэша, включая:
Попробуйте!
Мы любим Vue и Nuxt так же, как React и Next, поэтому мы в настоящее время переносим React ESI для этой платформы. Свяжитесь с нами, если хотите помочь!
Создан Кевином Дангласом. Спонсируется Les-tilleuls.coop.
