react esi
1.0.0
React ESI adalah perpustakaan cache yang super kuat untuk aplikasi Vanilla React dan Next.js, yang dapat membuat aplikasi yang sangat dinamis secepat situs statis.
Ini memberikan cara langsung untuk meningkatkan kinerja aplikasi Anda dengan menyimpan fragmen halaman yang diserahkan sisi server di server cache tepi .
Ini berarti bahwa setelah rendering pertama, fragmen halaman Anda akan disajikan dalam beberapa milidetik oleh server yang dekat dengan pengguna akhir Anda!
Ini adalah cara yang sangat efisien untuk meningkatkan kinerja dan SEO situs web Anda dan untuk secara dramatis mengurangi biaya hosting Anda dan konsumsi energi dari aplikasi ini. Bantu planet ini, gunakan reaksi ESI!
Karena dibangun di atas sisi tepi termasuk spesifikasi W3C (ESI), React ESI secara asli mendukung sebagian besar penyedia cache cloud terkenal termasuk pekerja Cloudflare, Akamai dan dengan cepat. Tentu saja, React ESI juga mendukung server Cache Varnish Open Source yang dapat Anda gunakan dalam infrastruktur Anda sendiri secara gratis (contoh konfigurasi).
Juga, React ESI memungkinkan spesifikasi waktu yang berbeda untuk hidup (TTL) per komponen reaksi dan menghasilkan HTML yang sesuai secara asinkron menggunakan URL yang aman (ditandatangani). Server cache mengambil dan menyimpan dalam cache semua fragmen yang diperlukan (HTML yang sesuai dengan setiap komponen React), membangun halaman terakhir dan mengirimkannya ke browser. React ESI juga memungkinkan komponen untuk (re-re) membuat sisi klien tanpa konfigurasi spesifik.
Skema dari buku pernis
Temukan reaksi esi secara mendalam dengan presentasi ini
Menggunakan NPM:
$ npm install react-esi
Atau menggunakan benang:
$ yarn add react-esi
Atau menggunakan PNPM:
$ pnpm add react-esi
React ESI memberikan komponen urutan tinggi yang nyaman yang akan:
React ESI secara otomatis memanggil metode static async bernama getInitialProps() untuk mengisi alat peraga awal komponen. Sisi server, metode ini dapat mengakses permintaan dan respons HTTP, misalnya, untuk mengatur header Cache-Control , atau beberapa tag cache.
Alat peraga ini dikembalikan oleh getInitialProps() juga akan disuntikkan di html yang dihasilkan sisi server (dalam tag <script> ). Sisi klien Komponen akan menggunakan kembali alat peraga yang berasal dari server (metode ini tidak akan disebut kedua kalinya). Jika metode ini belum disebut sisi server, maka itu akan disebut sisi klien saat pertama kali komponen dipasang.
// 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
) ;
} ) ;
}
} Alat peraga awal harus dapat diserialisasi menggunakan JSON.stringify() . Waspadalah Map , Set , dan Symbol !
Catatan: Untuk kenyamanan, getInitialProps() memiliki tanda tangan yang sama dengan yang berikutnya.js satu. Namun, ini adalah implementasi yang benar -benar mandiri dan mandiri (Anda tidak perlu Next.js untuk menggunakannya).
Untuk melayani fragmen, React ESI memberikan pengontrol siap pakai yang kompatibel dengan Express, lihat contoh lengkapnya.
Atau, berikut adalah contoh lengkap menggunakan server Next.js:
React ESI dapat dikonfigurasi menggunakan variabel lingkungan:
REACT_ESI_SECRET : Kunci rahasia yang digunakan untuk menandatangani URL fragmen (default ke string acak, sangat disarankan untuk mengaturnya untuk mencegah masalah saat server restart, atau saat menggunakan beberapa server )REACT_ESI_PATH : jalur internal yang digunakan untuk menghasilkan fragmen, tidak boleh diekspos secara publik (default: /_fragment ) <esi:include> elemen Untuk meneruskan atribut ke <esi:include> elemen yang dihasilkan oleh reaksi ESI, lulus prop yang memiliki struktur berikut ke hoc:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} Secara default, sebagian besar proksi cache, termasuk pernis, tidak pernah melayani tanggapan dari cache jika permintaan berisi cookie. Jika Anda menguji menggunakan localhost atau domain lokal serupa, hapus semua cookie yang sudah ada sebelumnya untuk asal ini . Jika cookie diharapkan (misalnya: Google Analytics atau Cookie Iklan), maka Anda harus mengkonfigurasi dengan benar proxy cache Anda untuk mengabaikannya. Berikut adalah beberapa contoh untuk pernis.
Untuk memungkinkan aplikasi sisi klien untuk menggunakan kembali alat peraga yang diambil atau dihitung sisi server, reaksi ESI menyuntikkan <script> tag yang mengandungnya dalam fragmen ESI. Setelah perakitan halaman oleh server cache, tag skrip ini akhirnya dicampur dengan HTML yang sah. Tag ini secara otomatis dihapus dari DOM sebelum fase rendering.
React ESI bermain sangat baik dengan strategi cache canggih termasuk:
Cobalah mereka!
Kami menyukai Vue dan Nuxt sebanyak bereaksi dan berikutnya, jadi saat ini kami porting reaksi ESI untuk platform ini. Hubungi kami jika Anda ingin membantu!
Dibuat oleh Kévin Dunglas. Disponsori oleh les-tilleuls.coop.
