Next.js: التالي بدون خادم: اجعل تبعية "التالي" للمطور فقط ، وقدم "الخادم التالي" للإصدارات الأصغر وتمهيد أسرع

أوقات البدء الباردة التي نراها في Now 2.0 للواجهة الأمامية لدينا هي 1.5 ثانية ، لحجم صورة 80 ميغا بايت IIRC

يجب أن يكون من الممكن جعلها أقرب كثيرًا إلى 1s دون أي تغييرات على Node أو V8 أو أي من التبعيات التي يستغرق تقييمها البارد جزءًا كبيرًا من الوقت (مثل react و react-dom )

هذا رائع !! : س

واو هذا رائع.

بعض الأسئلة عن next-server .

1. هل سيكون خادمًا سريعًا خفيفًا؟
2. نعم ، هل ستكون قابلة للتكوين باستخدام المسارات السريعة و next-routes ؟

@ Nishchit14 لن تضيف express إذا كنت تحاول تقليل حجم الإصدار .

أنا متأكد من أن next-routes سيظل يعمل بشكل جيد.

إذن ما نتحدث عنه هنا هو استخراج الخادم الحالي في الحزمة الخاصة به. لذلك سيعمل بنفس الطريقة كما كان من قبل ، ولكن بدلاً من الاستيراد التالي ، يمكنك استيراد الخادم التالي.

هذا رائع! لقد قمت أنا وأشخاص آخرين ممن أعرفهم بتشغيل Next.js فوق AWS Lambda باستخدام scandium ( باستخدام هذا الدليل ) وكانت بعض المشكلات الرئيسية:

1) حجم العبوة. يمنحك Lambda حدًا صارمًا يبلغ 50 ميغابايت يمكن أن يكون من السهل الاقتراب منه باستخدام جميع أدوات التطوير المضمنة.

2) البداية الباردة. يعد الحصول على تمهيد سريع أمرًا في غاية الأهمية نظرًا لأن Lambda يمكنها أن تقرر تشغيل المزيد من الخوادم في أي وقت. تعيش الخوادم الحالية أيضًا بحد أقصى 4 ساعات تقريبًا ، لذا ستكون البداية الباردة مهمة طوال دورة حياة التطبيق بالكامل.

سعيد جدًا برؤية هذه المبادرة وسعداء بالمساعدة!

هذه فكرة رائعة ، لدينا نفس الشيء مع Nuxt.js ، وقد أطلقنا عليها اسم nuxt-start لأنه الأمر الذي تحتاجه لتشغيل nuxt start -> nuxt-start

بعد هذا عن كثب. كنقطة بيانات لما هو ممكن ، www.bustle.com هو تطبيق SSR preact على AWS Lambda مع أقل من 1 ثانية من البدايات الباردة. الملف المضغوط للإنتاج الذي تم نشره بالكامل هو 166 كيلو بايت. هذا هو كل رمز التطبيق والمكتبة. يستخدم Webpack في التجميع.

شكرا للمشاركةsouthpolesteve. هذا مثير للإعجاب. # الأهداف

تبدو حالة المستخدم مشابهة جدًا لـ micro و micro-dev .

لماذا لا تستخدم نفس التسمية؟ next و next-dev

أنا أعبث مع next.js وبدون خادم باستخدام هذا المثال ولدي فضول لمعرفة ما إذا كانت هناك أي طريقة لإنجاز تصميمات أصغر الآن. هل هناك قائمة بالوحدات node_modules التي لا نحتاجها مطلقًا في الإنتاج ويمكن استبعادها مع ملفات التكوين في حزمة مثل serverless أو repack-zip ؟

Enalmada أعمل على next.js مع العديد من الأقسام و material-ui واحد منهم ، لدي تطبيق كبير جدًا من حيث الحجم ولكن ملف zip المدمج الذي أقوم بتحميله إلى Lambda يبلغ 45 ميغا بايت تقريبًا. ما هي المقاسات التي تبحث عنها؟

albinekb لقد ألهمتني استجابة southpolesteve bustle.com التي تزيد عن 166 كيلو بايت وأتساءل عن مقدار "45 ميجابايت" الخاص بي الذي لا فائدة منه ويسهل إزالته إذا كنت أعرف للتو ما يجب وضعه في ملف استبعاد التوزيع باعتباره اختراقًا حتى تنتهي هذه التذكرة الممتازة .

albinekb نوصي بشدة بالنظر إلى استخدام حزمة الويب أو الطرد أو التجميع لتجميع JS الخاص بك من أجل lambda. ستوفر الحجم ، ولكن أيضًا وقت التمهيد لأن الوصول إلى نظام الملفات عبر العقدة العادية يكون بطيئًا جدًا.

إذا كنت تقوم بالنشر إلى ZEIT Now وتريد الاحتفاظ بصورتك صغيرة للأحذية الباردة السريعة ، فيمكنك استخدام أداة مثل Package Phobia للتحقق من حجم تبعية npm قبل تثبيتها (أو فقط تحقق من حجم التبعيات الحالية لقطع الانتفاخ).

يحتوي الملف التمهيدي أيضًا على العديد من الأدوات المماثلة لمساعدتك على محاربة سخام. تحقق من ذلك هنا: https://github.com/styfle/packagephobia

ألم يكن من المفترض أن يتم تناول هذا في الإصدار السابع القادم؟ :(

إذا كنت تقوم بالنشر إلى zeit الآن وتريد الاحتفاظ بصورتك صغيرة للأحذية الباردة السريعة ، فيمكنك استخدام أداة مثل Package Phobia

اللعنة عليك أنت: https://packagephobia.now.sh/result؟p=antd

Enalmada من المحتمل أن تبعيات antd هي المسؤولة ، وليس المكتبة نفسها. لقد كنت أبحث في ذلك من أجل https://packagephobia.now.sh/result؟p=٪40material-ui٪2Fcore. يأتي معظم الوزن من تبعية واحدة أو اثنتين.

ألم يكن من المفترض أن يتم تناول هذا في الإصدار السابع القادم؟ :(

لتوضيح ذلك ، يضع Next.js 7 الأساس لـ Serverless Next.js ، لقد أزلنا حوالي 5 مسارات ، ولم يتبق سوى مسارين مطلوبين حقًا للإنتاج.

هل سبق لأي شخص الحصول على next.js للعمل مع Rollup؟ أشعر وكأنني اقتربت جدًا ... تشغيل التراكمية على ملف توزيع 60 مترًا أدى إلى خفض الحجم إلى 6 أمتار. لسوء الحظ ، لن يتم بدء تشغيل ملف dist بالفعل وأعتقد أنه يرجع إلى تبعية دائرية واحدة في كود next.js وهو تحذير أثناء التجميع. إذا كان بإمكان شخص ما التفكير في إمكانية إزالة تبعية دائرية في رمز next.js ، فقد نكون قريبين جدًا من إنشاءات أصغر بكثير وإقلاع أسرع:
https://github.com/zeit/next.js/issues/5392

بعد هذا عن كثب. كنقطة بيانات لما هو ممكن ، www.bustle.com هو تطبيق SSR preact على AWS Lambda مع أقل من 1 ثانية من البدايات الباردة. الملف المضغوط للإنتاج الذي تم نشره بالكامل هو 166 كيلو بايت. هذا هو كل رمز التطبيق والمكتبة. يستخدم Webpack في التجميع.

southpolesteve ، هل ستتمكن من مشاركة أي شيء حول تهيئة حزمة حزمة الويب الخاصة بك؟

shauns لسوء الحظ ، لم أعد في

تضمين التغريدة من الجيد معرفة إمكانية وجودها في حزمة الويب على الأقل.

هل يمكننا الحصول على بعض الأخبار عن الخادم التالي؟ رأيت بعض الالتزامات في هذا الشهر قبل.

تحقق من فرع الكناري.

متى تخطط لإطلاق سراحه؟

لا يمكنني مشاركة جدول زمني في هذه المرحلة.

يبدو أن هذا قد يساعد في تخفيف هذا الخطأ:
https://spectrum.chat/zeit/general/unable-to-import-module-now-launcher-error~2662f0ba-4186-402f-b1db-2e3c43d8689a

هبطت للتو # 5927

timneutkens هل يجب أن أنقل next إلى devDependencies وأضيف next-server إلى تبعياتي أم أنك تفعل ذلك تلقائيًا عبر babel؟
https://github.com/zeit/next.js/blob/canary/packages/next/build/babel/plugins/next-to-next-server.ts

Skaronator إذا كنت تنفذ باستخدام # 5927 فهي ليست كذلك ، وفقًا للمواصفات ، .next/serverless/index.js تطلبها ( require('./.next/serverless/index.js') ) ثم تسميها render الطريقة:

const page = require('./.next/serverless/index.js')

page.render(req, res)

سيؤدي هذا إلى عرض الصفحة وإنهاء الاستجابة

هذا رائع!
أنا أحاول ذلك ولكن لدي بعض المشاكل في جعله يعمل على aws lambda. هل لدى أي شخص أي نصائح؟

أعتقد أننا لم نعد بحاجة إلى خادم سريع مخصص بعد الآن ، يمكننا فقط طلب ملف بدون خادم بناءً على المسار 🤔

تعديل
يبدو أن هذا يعمل ، ولكن يجب التعمق في معرفة كيفية تحسين خطوة الإنشاء:

const serverless = require("serverless-http");
const http = require('http');
const app = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => app.render(req, res))
app.prepare().then(() => {
    const handler = serverless(server, {
        binary: binaryMimeTypes
    });
    return handler(event, context, callback);
});

يبدو أنك تخلط بين "الخادم المخصص" و "بدون خادم" ، فإن واجهات برمجة التطبيقات الخاصة بهم منفصلة تمامًا ، ولا توجد طريقة .prepare خادم حيث لا يوجد شيء للتحضير ، فنحن نعرض الصفحة على الفور إلى html وننهي استجابة عند استدعاء render .

const serverless = require("serverless-http");
const http = require('http');
const page = require('./.next/serverless/index.js');
const server = new http.Server((req, res) => page.render(req, res))
const handler = serverless(server, {
  binary: binaryMimeTypes
});
handler(event, context, callback);

في الواقع ، وليس لدي أي فكرة عن سبب عمل الكود أعلاه (ربما كان مجرد ذاكرة تخزين مؤقت) ولكن أيا من الكود الخاص بي أو جزء الكود الخاص بك لا يعمل لأن serverless-http لا يبدو أنه يدعم http.Server و لا يمكنني إرجاع page.render(req, res) لأن كائن lambda event لا يمكنه استبدال العرض الضروري req param ..

أيضًا ، لا أرغب في استخدام express / koa / أيًا كان لأنه سيكسر الغرض الكامل من هذه الميزة الجديدة التالية .. ( serverless-http هو تابع مجاني لذا كان مناسبًا للاستخدام)

ليس لدي أفكار: /

ربما سيساعدك هذا على guillaumebreux https://github.com/zeit/now-builders/blob/master/packages/now-node-bridge/bridge.js

شكرا timneutkens ، أنا أقدر مساعدتك.
لكنها لا تعمل في الوقت الحالي ، لا يزال لدي هذا الخطأ: typeError: Parameter "url" must be a string, not undefined

سأتوقف عن تلويث هذا الخيط وسأستمر في الحفر وسأكتب مثالًا إذا وجدت حلاً في أي وقت 😄

أنا غير واضح بعض الشيء. يبدو هذا الموضوع وكأنه ينطبق على سيناريوهين: تطبيقات بدون خادم وخوادم مُجمعة مسبقًا تتضمن جميع حزم npm الضرورية من جانب الخادم والتي تم تجميعها معًا.

يبدو أن gif في التعليق الأول على هذا الموضوع يتعلق بالسيناريو الأخير ، وهو السيناريو الذي أهتم به. يبدو أنه يستخدم next-server والذي قد يكون أو لا يكون حزمة npm هذه - ليس لدي مستودع مرفق به ، ولم أتمكن من العثور على واحد عبر google أو بحث GitHub ، على الرغم من أن إحدى علامات الإصدار هي 8.0.0-canary.7 - علامة إصدار من التالي - لذلك أظن أنه الحزمة الصحيحة.

هل ما كتبته دقيق حتى الآن؟ إذا كان الأمر كذلك ، على الرغم من وجوده في كناري ، فهل هناك أي طريقة يمكنني من خلالها الوصول المبكر إليه؟

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

أحب أن تكون قادرة على انتاج خادم بنيت قبل لدرجة أنني لا تحتاج إلى تثبيت 200MB من node_modules ثم تنفق 2 دقيقة تجميع على بلدي الفقراء، والقليل إنتاج VM في كل مرة كنت دفع التحديث.

* يتم استخدام "prod" بشكل فضفاض ، حيث أن هذا المشروع ليس مهمًا أو مهنيًا بالكامل

بعد هذا عن كثب. كنقطة بيانات لما هو ممكن ، www.bustle.com هو تطبيق SSR preact على AWS Lambda مع أقل من 1 ثانية من البدايات الباردة. الملف المضغوط للإنتاج الذي تم نشره بالكامل هو 166 كيلو بايت. هذا هو كل رمز التطبيق والمكتبة. يستخدم Webpack في التجميع.

الهدف Next.js 8 الذي لا يحتوي على خادم له حجم مضغوط يبلغ 42 كيلوبايت افتراضيًا 😌

هذا رائع! نتطلع إلى هذا!

لدي نفس السؤال تمامًا مثلdfoverdx. أرغب في إنشاء خادم ، يتضمن أيضًا جميع وحدات_النود اللازمة للتشغيل. أنا أستخدم خادمًا مخصصًا مع express لذلك لا أتوقع أن يتم تضمين هذه التبعيات في الحزمة ، ولكن عليك الآن تثبيت _ all_ التبعيات على الخادم الخاص بك أيضًا (رد فعل ، التالي ، محاور ، ...).

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

استبدال قسم externals من تهيئة webpack كما يلي يتضمن معظم التبعيات

module.exports = {
  webpack: (config, { dev }) => {
    config.externals = [];
    return config;
  })
};

لكن رد فعل و رد فعل دوم لا تزال مطلوبة على الخادم. لا يمكنني معرفة كيفية تضمين هؤلاء أيضًا ...

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

لماذا لا يتم وضع حزمة بدون خادم أيضًا في الحزمة التالية؟

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

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

ElvenMonky تنتظر شيئًا كهذا منذ عام ، لكن لم تتمكن من العثور على أي شيء حول هذا في المستندات أو الأمثلة.

timneutkens هل يمكنك التحقق من ذلك؟

إذا كان الأمر كذلك ، فقد أجرب مثل هذا الإعداد ، وأرسل PR للمستندات / الأمثلة.

لاحظ أنه منذ اليوم الثامن ، يمكنك طلب "الخادم التالي" بدلاً من "التالي" في server.js ، ولن تفقد سوى إعادة التحميل أثناء التطوير المحلي من خلال القيام بذلك

للأسف هذا لا يعمل.

أولاً ، يتم حظر تشغيل الإنشاء بدون خادم مع هدف الخادم بشكل نشط بالرسالة التالية: "لا يمكن بدء تشغيل الخادم عندما لا يكون الهدف خادمًا. https://err.sh/zeit/next.js/next-start-serverless "

بعد ذلك ، إذا قررت القيام ببناء عادي ، فإن ملفات الإنشاء تشير إلى أشياء من حزمة next مباشرة (مثل next/router في ملف _app.js المترجم لجانب الخادم). هذا يعني أن العناصر next و webpack يجب أن تكون قيد الإنتاج على أي حال.

تضمين التغريدة

لاحظ أنه منذ اليوم الثامن ، يمكنك طلب "الخادم التالي" بدلاً من "التالي" في server.js ، ولن تفقد سوى إعادة التحميل أثناء التطوير المحلي من خلال القيام بذلك.

التالي هو القيام بذلك داخليًا كبرنامج Babel Plugin كما ترون هنا:
https://github.com/zeit/next.js/blob/709850154754278d2fc86b987eebe1b3f0565255/packages/next/build/babel/plugins/commonjs.ts#L5 -L32

sheerun كما ذكرت أيضًا في # 7011 ، يمكنك التخلص من التبعية next/router التي لم يتم حلها عن طريق تحويل الوحدة النمطية next باستخدام next-transpile-modules plugin.

لقد قمت بتشكيل وتعديل مثال للخادم السريع المخصص لتوضيح الحل: https://github.com/ElvenMonky/next.js/tree/custom-next-server-express/examples/custom-server-express

ملاحظة: ما زلت متحمسًا حقًا بشأن # 5927 بغض النظر عن أن تطبيقي يتطلب كل شيء مدرج في TODO ، ناهيك عن المسارات الديناميكية وخدمة المحتوى الثابت.
الخبر السار هو أن الحل أعلاه يبدو أنه يعمل بشكل جيد مع https://www.npmjs.com/package/next-serverless إعداد الخادم المخصص ، مما يجعل من الممكن النشر التالي على سبيل المثال في AWS Lambda دون قيود سالفة الذكر.

لاحظ أنه منذ اليوم الثامن ، يمكنك طلب "الخادم التالي" بدلاً من "التالي" في server.js ، ولن تفقد سوى إعادة التحميل أثناء التطوير المحلي من خلال القيام بذلك.

لقد كنت أستخدم هذه النصيحة ، لكن للأسف لا يمكنني استخدام تهيئة وقت التشغيل لأن ذلك يتطلب next/config الذي يتطلب next .

لا أعرف لماذا لكن require('next/config') استخدم للعمل في الإنتاج بدون تثبيت next في وحدات_العقد مع الإصدار التالي 8.0.3 ولكن لا يعمل مع الإصدار التالي 8.1.0

هل من الممكن نقل التالي / config إلى حزمة مختلفة ، مثل next-runtime-config ؟
أو next-runtime-vars (تجنب استخدام المصطلح config لتجنب الالتباس مع next.config.js).

اسمحوا لي أن أعرف إذا كان مقبولاً ، سأقوم بإنشاء علاقات عامة.

مرحبا جميعا! تم تنفيذ هذه المشكلة منذ Next.js 8 ، ولا تزال موجودة في Next.js 9. سأغلق هذا على أنه مكتمل. 😌

آسف لقد ارتبكت مع هذه المشكلة: https://github.com/zeit/next.js/issues/7011
لم أتحقق من الهدف: "بدون خادم"

يمكن استبدال بعض "next/*" بـ "next-server/*" ، مثل:

• التالي / config -> next-server / config
• التالي / amp -> next-server / amp
• التالي / الديناميكي -> الخادم التالي / الديناميكي
• التالي / الثوابت -> الخادم التالي / الثوابت
• التالي / الرأس -> الخادم التالي / الرأس

ولكن هناك عدد قليل لا يوجد دعم لمثل هذا التحسين الذي ذكره OP لهذه المشكلة.

• التالي / جهاز التوجيه -> next-server / dist / lib / router / router (ربما)؟ (يجب أن يكون فارغًا أو يجب أن يظهر خطأ إذا تم استخدامه على الخادم)
• التالي / الارتباط؟

ليست هناك حاجة لأنها مضمنة حتى في الخادم (AKAIK)

• التالي / التطبيق
• التالي / المستند
  

مرحبا جميعا! تم تنفيذ هذه المشكلة منذ Next.js 8 ، ولا تزال موجودة في Next.js 9. سأغلق هذا على أنه مكتمل.

مرحبًا Timer - هل تشير إلى الهدف غير الخاضع للخدمة ، أو استبدال "التالي" بـ "الخادم التالي"؟

إذا استبدلنا الخادم التالي بالخادم التالي ، فلن يغير ذلك حجم مجلد node_modules ما لم يتم تحديث تبعيات pack.json أيضًا.

هل يوجد مثال على أي من النهجين المتاح؟ مع عدم وجود خادم ، يتم نشر حالة الاستخدام الخاصة بي في AWS Lambda.

النهج الموضح في الإصدار الأولي تطور إلى الهدف serverless ، نوصيك باستخدام ذلك.

timneutkens serverless target لا يمكنه ولا يمكنه حل المشكلات مع الخادم المخصص ، الذي يستخدم المسارات الديناميكية. # 5927 ليس حلاً للعديد من تطبيقات الأعمال في العالم الحقيقي كما في حالتي ، حيث يتعين علينا استخدام الصفحات التي تم إنشاؤها ديناميكيًا وبادئة الأصول و _app المخصص و _document و _err: بشكل أساسي كل ما هو مذكور في قائمة TODO.
يمنحنا next-server حلاً جزئيًا للنشر في الإنتاج بدون تطوير غريب فقط التبعيات ، مثل webpack و babel. يمكن القيام بذلك مع بعض المتسللين والرقص الخشبي الذي نناقشه هنا.

كان لدي انطباع بأنك تفهم هذا الاختلاف وكنت آمل في رؤية حل أكثر قوة يومًا ما للمشكلة الأولية كما وصفها rauchg