قد تكون وظيفة Edge مفهومًا صغيرًا ومُحددًا جيدًا ، ولكن يمكنك استخدامها لمجموعة واسعة من الأغراض.
Next.js هو إطار عمل شائع ومفتوح المصدر لتطوير تطبيقات React المقدمة من جانب الخادم. بفضل سهولة الاستخدام والقدرة على التكيف ، يمكنك استخدامه لإنشاء تطبيقات ويب معقدة.
تعد وظائف Edge واحدة من أكثر ميزات Next.js إثارة. تعرف على وظائف Edge وخمس طرق لاستخدامها في Next.js.
ما هي وظائف الحافة؟
تتيح لك ميزة وظائف Edge القوية في Next.js تشغيل وظائف مخصصة بدون خادم بالقرب من المستخدم النهائي على شبكة الحافة. هذا يعني أن الكود يعمل على الخوادم الموجودة جغرافيًا بالقرب من العميل ، مما يؤدي إلى أداء أسرع وأكثر في تطبيقات الويب.
يمكن لوظائف Edge تغيير الطلب أو الاستجابة وجلب البيانات والمصادقة والمزيد.
تعمل وظائف الحافة على الفور. نظرًا لأنها تقلل الوقت الذي يستغرقه تحميل البيانات وعرض الصفحات ، يمكنك استخدام وظائف Edge لتحسين أداء الويب وتجربة المستخدم.
تحتاج الأدوات الحديثة والجيل القادم حوسبة الحافة لأنه أكثر موثوقية وأمانًا من حوسبة سحابية وتعزز وظائف الحافة. بالإضافة إلى ذلك ، فهي أكثر قدرة ومرونة من الحوسبة وحدها على الجهاز.
فيما يلي بعض الطرق التي يمكنك من خلالها استخدام وظائف Edge في Next.js.
1. التوجيه الديناميكي
إحدى الطرق التي يمكنك من خلالها استخدام وظائف Edge في Next.js هي التوجيه الديناميكي. يمكنك تحديد وإدارة المسارات المخصصة بناءً على البيانات الديناميكية ، مثل معلمات الاستعلام أو رؤوس الطلبات.
يعد هذا أمرًا ذا قيمة لإنشاء تطبيقات ويب أكثر قابلية للتكيف وديناميكية تتعامل مع الطلبات المختلفة.
يمكنك استخدام وظائف Edge في Next.js لتنفيذ التوجيه الديناميكي بالطريقة التالية:
// صفحات / api / [slug] .js
يصدّرتقصيروظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {slug} = req.query ؛
لو (سبيكة 'عن') {
res.status (200).يرسل("هذه هي صفحة حول!");
} آخرلو (سبيكة 'اتصال') {
res.status (200).يرسل("هذه هي صفحة الاتصال!");
} آخر {
res.status (404).يرسل('الصفحة غير موجودة.');
}
}
يوضح هذا المثال محتويات ملف باسم [slug.js] في ال الصفحات / api دليل لتحديد مسار مخصص مع البيانات الديناميكية. يتم بعد ذلك إزالة حدود الارتفاع التقريبي من استعلام الطلب باستخدام مطلوب استعلام، والذي يتيح لك التعامل مع الطلبات التي تستند بقوة إلى قيمة سبيكة.
على سبيل المثال ، إذا ذهب المستخدم إلى http://example.com/api/about, سيتم تعيين معلمة slug على عن. ال معالج ستعمل الوظيفة على تشغيل كتلة التعليمات البرمجية المناسبة وستظهر الرسالة "هذه هي صفحة حول!"
إذا كان العميل يزور http://example.com/api/contact, معالج سيعيد الرسالة "هذه هي صفحة الاتصال!"
باستخدام وظائف Edge للتوجيه الديناميكي ، يمكن للمطورين إنشاء تطبيقات ويب أكثر قابلية للتكيف وديناميكية يمكنها التعامل مع الطلبات المختلفة بناءً على البيانات المتغيرة.
2. جلب البيانات
في Next.js ، إحدى حالات الاستخدام الشائعة لوظائف Edge هي جلب البيانات. يمكنك تقليل الحمل على الخادم وتعزيز أداء تطبيق الويب بجلب البيانات إلى الحافة.
يمكن أن تقوم وظائف Edge في Next.js بجلب البيانات ، كما هو موضح في هذا المثال:
// الصفحات / api / users / [id] .jsيصدّرتقصيرغير متزامنوظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {id} = req.query ؛// إحضار بيانات المستخدم من واجهة برمجة تطبيقات تابعة لجهة خارجية
مقدار ثابت استجابة = انتظر أحضر(` https://api.example.com/users/$ {id}`);
مقدار ثابت المستخدم = انتظر response.json () ؛
// إرجاع بيانات المستخدم
res.status (200) .json (مستخدم) ؛
}
يحدد هذا المثال نقطة نهاية API التي تستخدم الامتداد بطاقة تعريف معلمة الاستعلام لاسترداد بيانات المستخدم من واجهة برمجة تطبيقات تابعة لجهة خارجية. باستخدام أحضر الطريقة ، يمكنك إرسال طلب إلى واجهة برمجة التطبيقات (API) ثم انتظار الرد بكلمة الانتظار.
يقوم الرمز بعد ذلك باستخراج معلومات JSON عن طريق الاتصال response.json () ويخزنها في متغير. أخيرًا ، يستخدم ملحق json طريقة الاستجابة لتنسيق بيانات الاستجابة بتنسيق JSON.
يعد جلب بيانات وظيفة الحافة تقنية قوية تسمح لك بجلب البيانات عند الحافة ، مما يقلل من تحميل الخادم ويحسن أداء تطبيقات الويب.
يمكنك أيضًا تقليل الخمول في الطلب ومنح العملاء صفحات أسرع وأكثر استجابة عن طريق الحصول على معلومات من واجهة برمجة خارجية على الحافة.
3. تستخدم في المصادقة
من خلال تطبيق قواعد التحكم في الوصول على الحافة ، يمكنك تحسين أمان تطبيق الويب وتقليل مخاطر الوصول غير المصرح به إلى البيانات الحساسة.
كمثال ، ضع في اعتبارك وظيفة تتحقق من حالة مصادقة العميل وترددها مرة أخرى في الاستجابة. في ما يلي مخطط للتحقق يتضمن إمكانات Edge في Next.js:
// الصفحات / api / auth.js
يصدّرتقصير (مطلوب ، الدقة) => {
مقدار ثابت {isAuthenticated} = req.cookies ،
لو (موثق) {
res.status (200) .json ({ رسالة: "تمت المصادقة عليك" });
} آخر {
res.status (401) .json ({ رسالة: "لم تتم مصادقتك" });
}
}
في هذا الرسم التوضيحي ، تقوم وظيفة Edge بفحص ملف تعريف الارتباط بحثًا عن رمز المصادقة ، وإذا تم العثور عليه ، فإنها تنشئ استجابة JSON بمعلومات المستخدم.
4. اختبار A / B
هناك طريقة أخرى يمكنك من خلالها استخدام وظائف Edge في Next.js وهي تحسين أداء تطبيق الويب باستخدام اختبار A / B. يمكنك مقارنة الإصدارات المختلفة من موقع ويب أو تطبيق باستخدام اختبار A / B لتحديد أيها يعمل بشكل أفضل.
فيما يلي توضيح لكيفية استخدام وظائف Edge في Next.js لإجراء اختبار A / B:
// صفحات / api / abtest.js
مقدار ثابت المتغيرات = ["variantA", "البديل ب"];يصدّرتقصيروظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت {userId} = req.query ؛// إنشاء متغير عشوائي للمستخدم
مقدار ثابت variantIndex = رياضيات.أرضية(رياضيات.random () * variants.length) ؛
مقدار ثابت variant = المتغيرات [variantIndex] ؛// قم بتخزين المتغير في ملف تعريف ارتباط
res.setHeader ("تعيين ملف تعريف الارتباط", "البديل =$ {variant}; الحد الأقصى للعمر = 604800 ؛ ``);
// تقديم المتغير المقابل
لو (متغير "variantA") {
res.status (200).يرسل("مرحبًا بك في البديل أ!");
} آخر {
res.status (200).يرسل("مرحبًا بك في البديل ب!");
}
}
يوضح هذا الرمز نقطة نهاية واجهة API التي تُجري اختبار A / B لنوعين فريدين لصفحة الموقع. يستخدم Math.random () طريقة لإنشاء متغير عشوائي للمستخدم وتخزينه في ملف تعريف ارتباط بامتداد res.setHeader طريقة. يسمح هذا للشفرة بالتأكد من أن العميل يرى نفس الاختلاف في الزيارات المستقبلية.
يستخدم الرمز بعد ذلك الامتداد البديل قيمة ملف تعريف الارتباط لعرض المتغير المناسب. يعرض رسالة تشير إلى المتغير الذي حددته.
باستخدام وظائف Edge ، يمكن للمطورين استخدام أداة قوية تسمى اختبار A / B لمقارنة إصدارات مختلفة من تطبيق أو صفحة ويب لمعرفة أيها يعمل بشكل أفضل. يمكنك جمع البيانات حول سلوك المستخدم وتحسين أداء تطبيق الويب وتجربة المستخدم من خلال التعيين العشوائي للمستخدمين لمختلف المتغيرات.
5. استجابات التخزين المؤقت
يعد تخزين التفاعلات طريقة أخرى يمكنك من خلالها استخدام إمكانات Edge في Next.js لتبسيط تنفيذ الويب. يسمح لنا بالاحتفاظ بردود الفعل لفترة زمنية معينة لتقليل عدد الطلبات المقدمة إلى الخادم والعمل على سرعة تطبيق الويب.
فيما يلي توضيح لكيفية تنفيذ تخزين التفاعل باستخدام إمكانيات الحافة في Next.js:
// صفحات / api / data.js
مقدار ثابت البيانات = { اسم: 'فلان الفلاني', عمر: 30 };يصدّرتقصيروظيفةمعالج(مطلوب ، الدقة) {
// تعيين رؤوس الاستجابة لتمكين التخزين المؤقت
res.setHeader ("التحكم في ذاكرة التخزين المؤقت", 's-maxage = 10، stale-while-revalidate');
// إرجاع البيانات
res.status (200) .json (بيانات) ؛
}
يحدد هذا المثال نقطة نهاية API التي تعرض استجابة JSON مع بعض البيانات.
قمنا بتعيين رؤوس التفاعل باستخدام res.setHeader تقنية لتمكين الحجز لمدة 10 ثوانٍ باستخدام ملف s- ماكس العمر الحدود. يشير هذا إلى أن CDN يمكنها تخزين الاستجابة مؤقتًا لمدة تصل إلى عشر ثوانٍ قبل طلب التحديث.
نستخدم أيضًا ملف التي لا معنى لها أثناء إعادة التحقق المعلمة للسماح لـ CDN بتقديم استجابة مخزنة مؤقتًا انتهت صلاحيتها أثناء إجراء رد جديد في الخلفية. حتى إذا انتهت صلاحية الاستجابة المخزنة مؤقتًا ، فسيقوم CDN بإنشاء استجابة جديدة وستقوم دائمًا بإرسال استجابة.
يعد التخزين المؤقت لاستجابة وظائف Edge طريقة ممتازة لتسريع تطبيق الويب وتقليل عدد الطلبات إلى الخادم. يمكنك أن تضمن للمستخدمين مواقع ويب أسرع وأكثر استجابة عن طريق تخزين الاستجابات مؤقتًا لوقت محدد مسبقًا.
وظائف الحافة هي ميزة قوية بشكل لا يصدق لـ Next.js
يعد دعم Next.js لوظائف Edge ميزة جذابة تتيح لك تشغيل وظائف مخصصة بدون خادم أقرب إلى المستخدم النهائي على شبكة الحافة.
هناك عدة طرق يمكنك من خلالها استخدام وظائف Edge لتحسين تطبيقات الويب: اختبار A / B ، والتخزين المؤقت للاستجابة ، والتوجيه الديناميكي ، وجلب البيانات ، والمصادقة.
يمكن أن يؤدي استخدام إمكانات Edge في بنيتك إلى تحسين تجربة عملائك وينتج عنه تطبيقات ويب أسرع وأكثر استجابة.
