( توضيح )

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

بدأنا في استخدام نهج يتم فيه تقديم قالب صفحة فارغ ، ويتم تحميل جميع البيانات تدريجيًا بواسطة Ajax. كانت الصفحات سعيدة للجميع. لم ندرك ما قمنا به لأنفسنا ، نظرًا لأن المسؤولية الاجتماعية للشركات تؤثر سلبًا على تحسين أداء محرك البحث وأدائه على أجهزة الجوال. ولكن سمعت مرة أخرى عن دعم SSR مع أطر JS.

وماذا يحدث التاريخ يعيد نفسه؟

ما هي مبادئ تشغيل SSR؟

1. العرض المسبق. في أبسط الحالات ، يتم إنشاء ملفات N HTML ، والتي يتم وضعها على الخادم وإعادتها كما هي - أي ، يتم إرجاع ثابت ، لا نقوم بإنشاء أي شيء أثناء الطلب.



2. كما في حالة JSP ، يقوم الخادم بإنشاء HTML كامل مع كل المحتوى وإعادته إلى العميل. ولكن ، من أجل عدم إنشاء صفحة لكل طلب (قد يكون هناك مليون منهم وسيخضع خادمنا) ، دعنا نضيف ذاكرة تخزين مؤقت للخادم الوكيل. على سبيل المثال ، الورنيش.



متى يمكن تطبيق كل من هذه الطرق:

1. متى يكون من المنطقي إنشاء مجموعة من ملفات HTML؟ من الواضح ، عندما تتغير البيانات على الموقع أقل بقليل من عدمه. على سبيل المثال ، موقع الشركة على الإنترنت الخاص بمحل إصلاح الأحذية ، الذي هو قاب قوسين أو أدنى (نعم ، هذا العم الذي يغير الكعب في كشك 2x2 متر ، أراد أيضًا موقع الشركة الإلكتروني - وبالطبع مع صفحة مهمة الشركة). بالنسبة لمثل هذا الموقع ، لن تضطر إلى الإزعاج حتى مع الأطر ، SSRs والصفارات الأخرى ، ولكن هذا مثال كروي. ماذا لو كان لدينا مدونة تحتوي على مشاركات 1k؟ في بعض الأحيان نقوم بتحديثها ، وأحيانًا نضيف أخرى جديدة. إنشاء ملفات ثابتة 1k + ... هناك خطأ ما. وإذا قمنا بتغيير المنشور ، فإننا نحتاج إلى إعادة إنشاء ملف معين. همم ...

2. وهنا الطريقة الثانية تناسبنا. حيث ننشئ أول مرة على الطاير ، ثم نخزن الاستجابة في خدمة الوكيل. يمكن أن يكون وقت التخزين المؤقت ساعة / ساعتين / يوم - أيا كان. إذا كان لدينا 10000 مكالمة في الساعة لكل مشاركة (لا يصدق ، أليس كذلك؟) ، فعندئذٍ سيصل الطلب الأول فقط إلى الخادم. وسيتلقى الباقون نسخة مخبأة ردًا ، ومن المرجح أن يعيش خادمنا. في حالة تحديث مشاركة ، نحتاج فقط إلى إعادة تعيين السجل المخزن مؤقتًا بحيث تنشئ الصفحة التالية صفحة فعلية.

من الأقوال إلى الأفعال:

مرحبا العالم الريبو.

0) توليد العالم مرحبا

لبداية سريعة ، أعد مجتمع Nuxt قوالب أساسية ، يمكنك تثبيت أي منها باستخدام الأمر:

$ vue init <template-name> <project-name> 

بشكل افتراضي ، يتم اقتراح النموذج الذي تم بدء تشغيله ، وسنتناوله على سبيل المثال. على الرغم من أننا في تطبيق حقيقي اخترنا قالب صريح. دعنا نسمي المشروع مباشرة:

 $ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn #  npm install,    $ yarn dev 

حسنًا ، لقد أنشأنا عالمًا مرحبًا. من خلال عنوان url ، يمكنك رؤية الصفحة التي تم إنشاؤها:
1) Webpack و Linting

قام Nuxt خارج الصندوق بتكوين حزم الويب مع دعم ES6 (محمل babel) ومكونات Vue أحادية الملف (محمل vue) ، بالإضافة إلى SCSS و JSX والمزيد.

إذا لم تكن هذه القدرات كافية ، فيمكن توسيع تكوين حزمة الويب. نذهب إلى nuxt.config.js ، وفي build.extend لدينا القدرة على تعديل التكوين.

على سبيل المثال ، سوف نضيف بطانة النمط عن طريق القياس مع طباعة الكود - وهي نقطة مهمة ، في رأينا ، للحفاظ على قاعدة كود موحدة. هذه عادة جيدة ستساعد على تجنب العديد من المزالق.

مثال على امتداد التهيئة (توصيل ملف تهيئة للخادمة بناءً على متغير البيئة):

 config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) ) 

يمكن عرض التغييرات الأخرى في الريبو عن طريق العلامة ، ستساعدنا هذه التغييرات في الحفاظ على الأنماط.

ومثال لملف تهيئة linter: نستخدم Standard JS ، كحل مقبول بشكل عام في Vue / Nuxt:

 ... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], … 

2) للحصول على مثال للعمل مع البيانات ، سنستخدم واجهة برمجة التطبيقات هذه :

قم بتوصيل Axios كمكوِّن إضافي ، أنشئ ملفًا جديدًا في دليل الإضافات:

 import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` } export default axios.create(options) 

ومثال على الاستخدام:

 import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } } 

آخر اللفت بالعلامة .

أرقام التنزيل:

1) SSR + الورنيش

الطلب الأول:



ثانيًا:



2) لا- ssr



الطلب الثاني من فاستلي



وصلت صفحة فارغة بسرعة ، ولكن استغرق إنشاء المحتوى عليها ثانيتين.

الخلاصة

ما هي النتيجة؟ اكتشفنا كيفية الحصول على تطبيق SSR لبدء التشغيل تم تكوينه بشكل بسيط. وأضافوا Linting للحفاظ على نمط الشفرة منذ بداية حياة المشروع ، كما حددوا البنية العامة. يمكنك كتابة googol الخاص بك.