react esi
1.0.0
React ESI هي مكتبة ذاكرة التخزين المؤقت القوية للغاية لتطبيقات Vanilla React و Next.js ، والتي يمكن أن تصنع تطبيقات ديناميكية للغاية بأسرع مواقع ثابتة.
يوفر طريقة مباشرة لتعزيز أداء التطبيق عن طريق تخزين أجزاء من صفحات من جانب الخادم في خوادم ذاكرة التخزين المؤقت Edge .
هذا يعني أنه بعد العرض الأول ، سيتم تقديم شظايا من صفحاتك في بضعة ميلي ثانية من الخوادم القريبة من المستخدمين النهائيين!
إنها طريقة فعالة للغاية لتحسين الأداء وكبار المسئولين الاقتصاديين في مواقع الويب الخاصة بك وتقليل تكاليف الاستضافة بشكل كبير واستهلاك الطاقة لهذه التطبيقات. ساعد الكوكب ، واستخدام React ESI!
نظرًا لأنه مبني على جانب الجانب الحافة يشمل (ESI) مواصفات W3C ، فإن React ESI يدعم معظم موفري ذاكرة التخزين المؤقت السحابية المعروفين بما في ذلك عمال CloudFlare و Akamai و Fastly. بالطبع ، يدعم React ESI أيضًا خادم ذاكرة التخزين المؤقت المصدر المفتوح المصدر الذي يمكنك استخدامه في البنية التحتية الخاصة بك مجانًا (مثال التكوين).
أيضًا ، يتيح React ESI مواصفات وقت مختلف للعيش (TTL) لكل مكون React وإنشاء HTML المقابل بشكل غير متزامن باستخدام عنوان URL آمن (موقّع). يجلب خادم ذاكرة التخزين المؤقت ويخزن في ذاكرة التخزين المؤقت جميع الأجزاء المطلوبة (HTML المقابلة لكل مكون React) ، وإنشاء الصفحة النهائية ويرسلها إلى المتصفح. يتيح React ESI أيضًا المكونات (إعادة) تقديم جانب العميل دون أي تكوين محدد.
مخطط من كتاب الورنيش
اكتشف رد فعل 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() لديه نفس توقيع مثل ond.js واحد. ومع ذلك ، فهو تنفيذ مستقل ومستقل تمامًا (لا تحتاج إلى next.js لاستخدامه).
لخدمة الشظايا ، يوفر React ESI وحدة تحكم جاهزة للاستخدام متوافقة مع Express ، تحقق من المثال الكامل.
بدلاً من ذلك ، إليك مثال كامل باستخدام خادم next.js:
يمكن تكوين React ESI باستخدام متغيرات البيئة:
REACT_ESI_SECRET : مفتاح سري يستخدم للتوقيع على عنوان URL الشظية (افتراضيًا لسلسلة عشوائية ، يوصى بشدة بتعيينه لمنع المشكلات عند إعادة تشغيل الخادم ، أو عند استخدام خوادم متعددة )REACT_ESI_PATH : لا ينبغي تعريض المسار الداخلي المستخدم لإنشاء الشظية بشكل علني (افتراضي: /_fragment ) <esi:include> لتمرير السمات إلى <esi:include> العنصر الذي تم إنشاؤه بواسطة React ESI ، تمرير دعامة لها الهيكل التالي إلى المخصص:
{
esi : {
attrs : {
alt : "Alternative text" ,
onerror : "continue"
}
}
} بشكل افتراضي ، لا تخدم معظم وكلاء ذاكرة التخزين المؤقت ، بما في ذلك الورنيش ، استجابة من ذاكرة التخزين المؤقت إذا كان الطلب يحتوي على ملف تعريف الارتباط. إذا قمت باختبار باستخدام localhost أو مجال محلي مماثل ، فقم بمسح جميع ملفات تعريف الارتباط الموجودة مسبقًا لهذا الأصل . إذا كانت ملفات تعريف الارتباط متوقعة (على سبيل المثال: Google Analytics أو AD Cookies) ، فيجب عليك تكوين وكيل ذاكرة التخزين المؤقت بشكل صحيح لتجاهلها. فيما يلي بعض الأمثلة للورنيش.
للسماح للتطبيق من جانب العميل بإعادة استخدام الدعائم التي تجلبها أو محسوبة من جانب الخادم ، تتفاعل مع حقن ESI <script> التي تحتوي عليها في شظايا ESI. بعد تجميع الصفحة بواسطة خادم ذاكرة التخزين المؤقت ، تنتهي علامات البرنامج النصي هذه مع HTML الشرعي. تتم إزالة هذه العلامات تلقائيًا من DOM قبل مرحلة التقديم.
React ESI يلعب بشكل جيد للغاية مع استراتيجيات ذاكرة التخزين المؤقت المتقدمة بما في ذلك:
جربهم!
نحن نحب Vue و Nuxt بقدر ما يكون React و Next ، لذلك نحن نقوم حاليًا بنقل React ESI لهذا النظام الأساسي. اتصل بنا إذا كنت تريد المساعدة!
تم إنشاؤها بواسطة Kévin Dunglas. برعاية Les-Tilleuls.coop.
