كيفية استخدام إجراءات خادم Next.js

جاء الإصدار 13.4 من Next.js مزودًا بجهاز توجيه تطبيقات ثابت والقدرة على إجراء تغيير في البيانات من خلال إجراءات الخادم. هذه الميزة هي مغير مطلق للعبة لأنها تتيح لك إجراء طفرات البيانات بالكامل من مكونات الخادم. يجلب هذا مجموعة من الفوائد في مجالات مثل السرعة والأمان والأداء العام للتطبيق.

تعرف على إجراءات الخادم وكيفية استخدام هذه الميزة الجديدة في تطبيق Next.js.

ما هي إجراءات الخادم؟

تسمح لك إجراءات الخادم بكتابة وظائف من جانب الخادم لمرة واحدة جنبًا إلى جنب مع مكونات الخادم. هذا ضخم لأنك لم تعد بحاجة إلى كتابة مسارات API عند إرسال النماذج أو القيام بأي نوع آخر من تغيير البيانات ، بما في ذلك طفرات بيانات GraphQL.

يمكن أن يكون لديك وظائف تعمل على الخادم الخاص بك ، ويمكنك بعد ذلك الاتصال بها من مكونات العميل أو الخادم. هذه ميزة ألفا في Next.js 13.4 ، وهي مبنية على قمة إجراءات React. يؤدي استخدام إجراءات الخادم إلى تقليل JavaScript من جانب العميل ، ويمكن أن يساعدك في إنشاء نماذج محسّنة بشكل تدريجي.

مثال إجراءات الخادم

باستخدام إجراءات الخادم ، يمكنك إجراء طفرات داخل Next.js على الخادم. ألق نظرة على هذه الميزة الجديدة مع مثال على صفحة Next.js التي تعرض نموذجًا يسمح لك بإنشاء منشور.

فيما يلي الواردات:

يستورد وصلة من"التالي / الرابط"
يستورد يشكل مجموعه من"@ / المكونات / FormGroup"
يستورد {revalidateTag} من"التالي / ذاكرة التخزين المؤقت"
يستورد { إعادة توجيه } من"التالي / التنقل"

الآن للحصول على الكود لإنشاء المنشور. هذه الوظيفة هي عمل الخادم ؛ يتم تشغيله على الخادم ويرسل عنوان المنشور والجسم إلى واجهة برمجة التطبيقات (التي تنشئ المنشور في قاعدة البيانات):

غير متزامنوظيفةإنشاء(بيانات) {
"استخدام الخادم"
مقدار ثابت العنوان = data.get ("عنوان")
مقدار ثابت body = data.get ("جسم")
انتظر أحضر(" http://127.0.0.1/posts", {
 العنوان: {"نوع المحتوى": "التطبيق / json"},
 الطريقة: POST ،
 جسم: جسون.stringify ({title، body})
 })
 إعادة التحقق من العلامة ("دعامات")
 إعادة توجيه("/")
}

تحصل هذه الوظيفة على عنوان المنشور والجسم الذي يتم إرساله بعد ذلك إلى ملف /posts نقطة النهاية عبر طلب POST. ثم يفرض على ذاكرة التخزين المؤقت تحديث المحتوى المرتبط بعلامة "المشاركات" ، وإعادة التوجيه إلى الصفحة الرئيسية.

إليك نموذج لتجميع عنوان المنشور الجديد ونصه:

يصدّرتقصير NewPostForm () {
يعود (





"عنوان"> العنوان </label>
"نص" الاسم ="عنوان" معرف ="عنوان" />
 </FormGroup>
 </div>




"عنوان"> الجسم/label>
"text"  name = <span> "body" </span> id = <span> "body" </span>> <span> <span> <<span> منطقة النص  span> /> < / span> </span> <br> <<span> / FormGroup> </span> <br> <<span> / div> </span>   <p> <code> <div> <br> <button> حفظ <<span> / button> </span> <br> <<span> / div> </span> <br> <<span> / form> </span> <br> ) <br>} <br>    <p> يمكنك أن ترى أن النموذج لا يحتوي على أي منطق يتعلق بإنشاء المشاركة ، فقط إجراء نموذج: الوظيفة <strong> createPost () </strong>. تذكر أن وظيفة createPost لها التوجيه "use server" الذي يصرح بأن كل شيء في ذلك يجب تشغيل الوظيفة على الخادم.  p> </p>
<p> تعمل جميع التعليمات البرمجية على الخادم ، ولا يعرف العميل شيئًا حوله. هذا لأن النموذج هو مكون خادم ولا يوجد شيء يتم عرضه ديناميكيًا في ملف العميل.  p> </p>
<p> عند النقر فوق الزر <strong> حفظ  strong> ، يقوم Next.js باستدعاء <strong> createPost () </strong> وظيفة. يؤدي هذا إلى إرسال العنوان والجسم كبيانات نموذج ، والتي يتم نشرها في واجهة برمجة التطبيقات المحلية لحفظ المعلومات.  p> <h2 id="revalidating-the-post"> إعادة التحقق من المنشور  h2> </h2>
<p> يوجد أسفل وظيفة <strong> createPost () </strong> سطر التعليمات البرمجية التالي:  p> </p>
<pre> <code> revalidateTags (<span> "posts" </span>) < / code> </code></pre> <p> لفهم وظيفة هذه الوظيفة ، تخيل أن لديك صفحة منشورات. داخل مكون المشاركات ، يمكنك استدعاء وظيفة تسمى <strong> getPosts () </strong> للحصول على جميع المشاركات من قاعدة البيانات الخاصة بك وتقديمها للمستخدم ليراها:  p> </p>
<pre> <code> <span> تصدير  span> <span> افتراضي  span> <span> غير متزامن  span> <span> <span> وظيفة  span> <span> المشاركات  span> ()  span> {<br> <span> const </span> posts = <span> في انتظار  span> getPosts () </span></span></span></span></span></span></span></code> <p> <code> <span> إرجاع  span> (<br> <div> <br> {posts.map (<span> <span> post </span> = > </span> {<br> <postcard key="{post.id}" post></postcard> <br>})} <br> <<span> / div> </span> <br>) <br>} <br>    <p> ستبدو وظيفة <strong> getPosts () </strong> على النحو التالي:  p> </p>
<pre> <code> <span> غير متزامن  span> <span> <span> تعمل  span> <span> getPosts </span> () </span> {<br> <span> const </span> res = <span> تنتظر  span> جلب (<span> " https://127.0.0.1/posts? sort = title "</span> ، {<br> التالي: {<span> العلامات  span>: [<span>" المشاركات " span>] ، <span> إعادة التحقق  span>: <span> 3600 </span>} <br>}) </span></span></span></span></span></span></code> <p> <code> <span> إرجاع  span> res.json () <br>} <br>  code > </span></code></p> </pre> <p> تمرر هذه الوظيفة خيار <strong> التالي  strong> للجلب ، مما يسمح لك بتعيين فترة إعادة التحقق. بشكل افتراضي ، يتم تخزين كل طلب جلب فردي تقوم به داخل مكون الخادم مؤقتًا إلى الأبد. يعد تتبع ذاكرة التخزين المؤقت وتحديثها عند الضرورة جزءًا مهمًا من <span> جلب البيانات Next.js </span>. </strong></p> <p> يخبر الرمز أعلاه Next.js بتخزين بيانات <strong> المشاركات  strong> مؤقتًا لمدة تصل إلى ساعة واحدة (3600 ثانية). بعد ساعة ، تصبح البيانات قديمة ويقوم Next.js بتحديثها للحصول على أحدث البيانات من قاعدة البيانات.  p> <p> تذكر ذلك تستدعي وظيفة <strong> createPost () </strong> وظيفة <strong> revalidateTag ("posts") </strong> بمجرد انتهائها من بقية أعمالها. هذا يفرض على Next.js إعادة جلب تلك البيانات التي يجب أن تتضمن المشاركة الجديدة التي أنشأها التطبيق للتو.  p> </p>
<h2 id="proof-that-your-code-is-running-on-the-server"> إثبات أن الرمز الخاص بك يعمل على الخادم  h2> </h2>
<p> للتأكد من تشغيل جميع التعليمات البرمجية على الخادم ، يمكنك إضافة عبارة سجل وحدة التحكم التالية داخل ملف وظيفة <strong> createPost () </strong>: </p> <pre> <code> <span> وحدة التحكم  span> .log (<span> "قيد التشغيل على الخادم"  span>)  code > </span></span></code></pre> <p> بعد ذلك ، حاول إنشاء منشور جديد بالنقر فوق الزر إرسال. إذا كان الرمز الخاص بك يعمل على الخادم ، فستظهر رسالة السجل هذه على جهازك. ولكن إذا كان يعمل على العميل ، فسيظهر السجل في وحدة تحكم المتصفح.  p> </p>
<p> وهذا يجعل من الآمن وضع معلومات مثل المتغيرات البيئية واتصالات قاعدة البيانات وكلمات المرور على الخادم دون خوف من تعرضها لـ عميل. يمكنك بعد ذلك <span> قراءة السلاسل من ملف .env الخاص بك  span> في تطبيق Next.js. </span></p> <p> يمكنك ترغب في الاحتفاظ باستخدام إجراءات الخادم لإصدارات Next.js الأحدث من 13.4 ، خاصة في إنتاج. ولكن لا يزال من المثير حقًا معرفة إلى أين تذهب هذه الميزة لأنها تدفع باستمرار ما يمكنك القيام به عن طريق نقل المزيد والمزيد من الأشياء إلى الخادم. من المفترض أن تجعل كتابة تطبيقات العميل أسهل ، وأن تجعل عملية تطويرها أكثر إمتاعًا.  p> </p>
<h2 id="Learn-more-about-migrating-to-next-js"> مزيد من المعلومات حول الترحيل إلى Next .js </h2> <p> يستخدم العديد من مطوري الواجهة الأمامية React لتطوير واجهة المستخدم. ولكن بفضل ميزات مثل العرض من جانب الخادم وإنشاء موقع ثابت ، يقوم الكثير من هؤلاء المطورين بترحيل تطبيقاتهم لاستخدام Next.js. يعد هذا الترحيل مباشرًا جدًا نظرًا لأن React تشبه إلى حد كبير صيغة Next.js. </p> <p> يتطلب الأداء الإضافي وتعزيز الأمان الترحيل أكثر من ذلك. إن القدرة على الحصول على مكونات من جانب الخادم ، إلى جانب إجراءات الخادم الجديدة التي قمنا بتغطيتها للتو ، تجعل Next.js خيارًا أكثر أمانًا وأداءً مقارنةً بـ React العادي. بصفتك مطور React ، يجب أن تتعلم كيفية ترحيل تطبيقك إلى Next.js. </p> </strong></p>
</div> </span></code></p></pre></strong></p></button>
</div> </code></p></span></span>