inlineCss
الاستخدام
دعم تجريبي لتضمين CSS في <head>. عند تفعيل هذه الميزة، سيتم استبدال جميع علامات <link> التي ننشئها عادةً بعلامات <style> مُنشأة.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
inlineCss: true,
},
}
export default nextConfig/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
inlineCss: true,
},
}
module.exports = nextConfigالمقايضات
متى تستخدم CSS المضمن
يمكن أن يكون تضمين CSS مفيدًا في عدة سيناريوهات:
-
الزوار لأول مرة: نظرًا لأن ملفات CSS تعتبر موارد معيقة للعرض (render-blocking)، فإن التضمين يلغي تأخير التحميل الأولي الذي يواجهه الزوار لأول مرة، مما يحسن أداء تحميل الصفحة.
-
مقاييس الأداء: من خلال إزالة طلبات الشبكة الإضافية لملفات CSS، يمكن للتضمين تحسين المقاييس الرئيسية مثل First Contentful Paint (FCP) وLargest Contentful Paint (LCP) بشكل ملحوظ.
-
الاتصالات البطيئة: للمستخدمين على شبكات بطيئة حيث تضيف كل طلب زمن انتقال كبير، يمكن أن يوفر تضمين CSS دفعة ملحوظة في الأداء عن طريق تقليل جولات الشبكة.
-
حزم CSS الذرية (مثل Tailwind): مع أطر العمل التي تعتمد على الأدوات المساعدة أولاً مثل Tailwind CSS، غالبًا ما يكون حجم الأنماط المطلوبة للصفحة O(1) نسبة إلى تعقيد التصميم. هذا يجعل التضمين خيارًا جذابًا لأن مجموعة الأنماط الكاملة للصفحة الحالية خفيفة الوزن ولا تنمو مع حجم الصفحة. يضمن تضمين أنماط Tailwind حمولة صغيرة ويلغي الحاجة إلى طلبات شبكة إضافية، مما يمكن أن يعزز الأداء بشكل أكبر.
متى لا تستخدم CSS المضمن
بينما يوفر تضمين CSS فوائد كبيرة للأداء، هناك سيناريوهات قد لا يكون فيها الخيار الأفضل:
-
حزم CSS الكبيرة: إذا كانت حزمة CSS كبيرة جدًا، فقد يزيد تضمينها حجم HTML بشكل كبير، مما يؤدي إلى إبطاء Time to First Byte (TTFB) وأداء أسوأ محتمل للمستخدمين ذوي الاتصالات البطيئة.
-
CSS الديناميكي أو الخاص بالصفحة: للتطبيقات ذات الأنماط الديناميكية للغاية أو الصفحات التي تستخدم مجموعات مختلفة من CSS، قد يؤدي التضمين إلى التكرار والانتفاخ، حيث قد تحتاج CSS الكاملة لجميع الصفحات إلى تضمينها بشكل متكرر.
-
تخزين المتصفح: في الحالات التي يعود فيها الزوار بشكل متكرر إلى موقعك، تسمح ملفات CSS الخارجية للمتصفحات بتخزين الأنماط بكفاءة، مما يقلل نقل البيانات للزيارات اللاحقة. يلغي تضمين CSS هذه الفائدة.
قم بتقييم هذه المقايضات بعناية، وفكر في الجمع بين التضمين واستراتيجيات أخرى، مثل استخراج CSS الحرج أو نهج هجين، للحصول على أفضل النتائج المخصصة لاحتياجات موقعك.
من الجيد معرفة:
هذه الميزة حاليا تجريبية ولها بعض القيود المعروفة:
- يتم تطبيق تضمين CSS عالميًا ولا يمكن تكوينه على أساس كل صفحة
- يتم تكرار الأنماط أثناء تحميل الصفحة الأولي - مرة داخل علامات
<style>لـ SSR ومرة في حمولة RSC- عند التنقل إلى الصفحات التي تم عرضها بشكل ثابت، ستستخدم الأنماط علامات
<link>بدلاً من CSS المضمن لتجنب التكرار- هذه الميزة غير متاحة في وضع التطوير وتعمل فقط في إصدارات الإنتاج