أطر JavaScript من الجيل التالي

كيف تقلّل قابلية الاستئناف في Qwik والتفاعلية دقيقة الحبيبات في SolidJS عمل بدء تشغيل JavaScript في المتصفح — ولماذا لا تضمن أي من الآليتين بمفردها قابلية الزحف أو الفهرسة أو Core Web Vitals.

نُشر أول مرة: 26 يونيو 2026 · آخر تحديث: 10 أغسطس 2026 · Advanced
اللغات

«الجيل التالي» تسمية تحريرية تُستخدم هنا لـ Qwik وSolidJS، وليست فئة موحّدة في منصة الويب. يستخدم Qwik قابلية الاستئناف — إذ يسلسل المستمعين وحدود المكوّنات والحالة داخل HTML أثناء SSR/SSG كي يستطيع المتصفح استئناف عمل محدد بدل إعادة تشغيل تمهيد ترطيب كامل. ولا يعني ذلك انعدام JavaScript: فما يزال Qwikloader (نص تمهيد صغير) يعمل عند التحميل، ويسجّل المستمعين، ويحمّل شيفرة المعالجات (QRLs) عند التفاعل تحميلًا كسولًا. يستخدم SolidJS التفاعلية دقيقة الحبيبات — فالإشارات وعدم وجود DOM افتراضي يعنيان تحديثات موجّهة إلى DOM من دون إعادة تصيير المكوّن — ومع ذلك يظل يستخدم الترطيب، لا الآلية نفسها التي تستخدمها قابلية الاستئناف. لا يضمن نموذج التفاعلية في أي من الإطارين ولا إطاره الشامل (QwikCity وSolidStart) محتوى HTML للمسار أو بياناته الوصفية أو رمز حالته أو نتائج Core Web Vitals المقاسة؛ فذلك يعتمد على وضع التصيير والتنفيذ اللذين تشحنهما فعليًا. يضع هذا المحور خريطة للآليتين ويوجّه إلى الشروحات المتعمقة المخصصة لهما.

Evidence for this claim Qwik documents resumability and fine-grained lazy loading as core execution strategies. Scope: Qwik architecture; real transferred and executed JavaScript depends on the application. Confidence: high · Verified: Qwik documentation: Resumability Evidence for this claim Solid uses fine-grained reactive primitives and supports server rendering through its framework tooling. Scope: Solid/SolidStart architecture; SEO and performance depend on rendering configuration and application code. Confidence: high · Verified: Solid documentation

الخلاصة — «أطر الجيل التالي» تجميع تحريري خاص بهذه المقالة لـ Qwik وSolidJS، وليس فئة موحّدة؛ فكلاهما يستهدف تكلفة تنفيذ JavaScript في المتصفح، ولكن بآليتين مختلفتين. يستخدم Qwik قابلية الاستئناف — يتوقف التطبيق على الخادم ويسلسل المستمعين وحدود المكوّنات والحالة داخل HTML، بحيث يستطيع المتصفح استئناف عمل محدد بدل إعادة تشغيل تمهيد ترطيب كامل؛ ومع ذلك يعمل نص تمهيد صغير (Qwikloader) عند التحميل ويحمّل شيفرة المعالج تحميلًا كسولًا عند التفاعل، لذلك لا يعني هذا حرفيًا انعدام JavaScript. يستخدم SolidJS التفاعلية دقيقة الحبيبات — الإشارات وعدم وجود DOM افتراضي، فتكون التحديثات جراحية الدقة — لكنه يظل يستخدم الترطيب (وليس قابلية الاستئناف؛ وهذه هي الخرافة التي يجب تصحيحها). وتختلف تفاعلية الإطار عن وضع التصيير في الإطار الشامل: يمكن لـ QwikCity وSolidStart إخراج HTML مصيّر على الخادم، لكن SolidStart يدعم أيضًا التصيير الخالص من جانب العميل، ولا يضم افتراضيًا مكتبة توجيه أو بيانات وصفية. تعتمد قابلية الزحف والفهرسة وCore Web Vitals المقاسة على وضع التصيير والتنفيذ اللذين تشحنهما فعليًا؛ فلا يضمنها إطار أو نموذج تفاعلية.

السبب الجذري الذي يستهدفانه

افتح محور JavaScript SEO وستجد أن أنماط الفشل تتعلق بما إذا كان Google يستطيع رؤية محتواك. هذا سؤال عن وضع التصيير — SSR أو SSG أو CSR — ويدعم كل من QwikCity وSolidStart مخرجات مصيّرة على الخادم أو مولّدة ثابتًا، مع أن أيًا منهما لا يفرض ذلك: اختر CSR وستعود إلى SPA ذات غلاف فارغ بصرف النظر عن الإطار الأساسي. أما ما يغيّره Qwik وSolidJS فعليًا فهو النصف الآخر من القصة: تكلفة JavaScript الذي يعمل بعد وصول HTML.

في تطبيق نموذجي يجمع SSR والترطيب، يرسل الخادم HTML مكتملًا — وهذا ممتاز لأول تصيير ولبرامج الزحف — ثم ينزّل الإطار شيفرة مكوّناته ويعيد تنفيذها في المتصفح لربط معالجات الأحداث وإعادة بناء حالته الداخلية. وتمثل عملية الترطيب هذه حملًا زائدًا محضًا من منظور المستخدم: تبدو الصفحة جاهزة لكنها ليست تفاعلية، ويُحجب مسار التنفيذ الرئيسي. وهذا أكبر مساهم منفرد في ارتفاع Total Blocking Time (TBT) في المختبر وسوء Interaction to Next Paint (INP) في الميدان.

وُجد كل من Qwik وSolidJS لتقليص هذه العملية أو إزالتها. ويسلك كل منهما طريقًا مختلفًا.

Qwik: قابلية الاستئناف (بلا ترطيب — ولكن ليس بلا JavaScript أيضًا)

فكرة Qwik الأبرز هي قابلية الاستئناف، وQwik (حاليًا في إصدار v2 تجريبي) هو الإطار الذي أشير إلى نموذج تفاعليته هنا؛ أما QwikCity فهو طبقة الإطار الشامل المنفصلة الموضحة أدناه. يعمل الإطار على الخادم ويصيّر HTML ثم يسلسل كل ما يحتاجه التطبيق للمتابعة — الحالة ومستمعي الأحداث وشجرة المكوّنات وموضع التنفيذ — مباشرةً داخل HTML. وعند تحميل الصفحة في المتصفح، لا يعيد Qwik تشغيل مكوّناتك لإيقاظها؛ بل يستأنف من الموضع الذي توقف عنده الخادم بدل إعادة تشغيل تمهيد ترطيب كامل.

يختلف ذلك حقًا عن الترطيب، لكنه لا يعني انعدام JavaScript. فما يزال نص تمهيد صغير، Qwikloader (تذكر وثائق Qwik أن حجمه المصغّر يقارب 1kb وأن تنفيذه يستغرق أقل من 5ms على الهاتف)، يعمل عند كل تحميل للصفحة. وهو:

  • يسجّل مستمع أحداث عامًا واحدًا بدل ربط مستمع بكل عنصر تفاعلي،
  • ويقرأ السمات المسلسلة على نمط on:click="./chunk.js#handler_symbol" التي كتبها Qwik داخل HTML (وهي QRLs، أي محددات موارد Qwik)،
  • وعندما يقع حدث بالفعل، يحل QRL المطابق ويحمّل مقطع المعالج المحدد تحميلًا كسولًا قبل تشغيله.

النتائج العملية:

  • JavaScript عند البدء صغير وثابت تقريبًا، لا معدوم. لا تنمو تكلفة Qwikloader نفسه مع حجم تطبيقك، ولا تعمل عملية ترطيب للتطبيق كاملًا؛ لكن Qwikloader نفسه JavaScript حقيقي يُنفّذ. لا تصف ذلك بأنه «لا JavaScript عند التحميل»، بل «تمهيد صغير ثابت الحجم بدل عملية ترطيب تتوسع مع حجم التطبيق».
  • تحميل كسول حتى مستوى المعالج. لا تُحمّل شيفرة التطبيق إلا عند وقوع تفاعل فعلي، وهذا ما يقصده مؤلفو Qwik بعبارة «HTML أولًا».
  • QwikCity هو الإطار الشامل لـ Qwik — التوجيه القائم على الملفات، ومحمّلات البيانات، والإجراءات، ونقاط النهاية — أي طبقة الحزمة الكاملة التي تنتج HTML قابلًا للاستئناف ومصيّرًا على الخادم أو ثابتًا. ولا تحدد قابلية الاستئناف في Qwik بمفردها رمز حالة المسار أو بياناته الوصفية أو حتى ما إذا كان مصيّرًا على الخادم؛ بل يحدد ذلك إعداد التوجيه والتصيير في QwikCity.

أين تتعطل قابلية الاستئناف عمليًا؟

لقابلية الاستئناف قيود حقيقية يجدر معرفتها قبل الاعتماد عليها (وفق وثائق Qwik الحالية للتسلسل والحالة):

  • حدود التسلسل. لا تستطيع الشيفرة داخل حد $(...) التقاط إلا قيم قابلة للتسلسل — القيم الأولية، والبيانات القابلة للتسلسل المرتبطة بـ const، وبعض الأنواع المدمجة التي يعرف Qwik كيف يسلسلها (ومنها الوعود). ينجح مثيل لفئة مخصصة أو قيمة أخرى غير مدعومة في التحليل الثابت، لكنه يفشل وقت التشغيل عندما يحاول Qwik تسلسله؛ وهو نمط فشل يظل صامتًا حتى الشحن ويستحق الاختبار.
  • لا تنجو قيم noSerialize() من الاستئناف. تتحول أي قيمة موسومة صراحةً بأنها غير قابلة للتسلسل إلى undefined بعد أن يستأنف العميل من حالة SSR/SSG، ويجب إعادة تهيئتها على العميل، عادةً داخل useVisibleTask$().
  • useVisibleTask$ مخرج متعجل يعمل في المتصفح فقط. تسميه وثائق Qwik نفسها حلًا أخيرًا: فهو يعمل في المتصفح فقط بعد التصيير الأولي، و*“eagerly executes code on the client”* (ترجمة) «ينفّذ الشيفرة بشغف على العميل» — ويكون افتراضيًا مشروطًا بالظهور عبر مراقب تقاطع، لكنه يعمل فور التحميل إذا ضبطت { strategy: 'document-ready' }. ويعيد الإفراط في استخدامه إدخال تكلفة البدء التي صُممت قابلية الاستئناف لتجنبها.

بالنسبة إلى تحسين محركات البحث تحديدًا: إن تضمين مخرجات خادم مسار QwikCity لمحتواك وروابط <a href> في HTML الأولي مسألة وضع تصيير وتوجيه، وليست شيئًا تضمنه قابلية الاستئناف وحدها؛ افحص الاستجابة الفعلية لا اختيار الإطار فحسب. راجع الزحف لمعرفة ما يحتاجه Google هناك. وتكمن الفائدة الواقعية لآلية قابلية الاستئناف في جانب وقت التشغيل: قدر أقل من JavaScript عند البدء يحجب مسار التنفيذ الرئيسي، وهو عامل في Core Web Vitals — وليس ضمانًا لقيمة INP أو TBT بعينها.

SolidJS: التفاعلية دقيقة الحبيبات (ترطيب أذكى — وليست قابلية الاستئناف)

يعالج SolidJS التكلفة نفسها من زاوية مختلفة، ومع التحفظ نفسه المذكور أعلاه: Solid، أي محرك التفاعلية، منفصل عن SolidStart، أي الإطار الشامل. وتتمثل فكرة Solid الأساسية في تفاعلية دقيقة الحبيبات مبنية على الإشارات، ومن دون DOM افتراضي.

  • إشارات، لا إعادة تصيير. في React، يؤدي تغير الحالة إلى إعادة تشغيل دالة المكوّن ومقارنة DOM افتراضي لمعرفة ما تغير. أما في Solid فتعمل دالة المكوّن مرة واحدة؛ وتتتبع الإشارات (أزواج getter/setter المنشأة باستخدام createSignal) والمشتركون (مثل createEffect) التبعيات مباشرةً، ولذلك عندما تتغير إشارة لا يعاد تشغيل إلا الشيفرة المشتركة فيها فعلًا — لا إعادة تنفيذ للمكوّن ولا مقارنة لـ DOM افتراضي. وهذا سبب وجود Solid باستمرار عند قمة معايير أداء الأطر أو قريبًا منها (حزمة js-framework-benchmark) في أعباء العمل كثيفة التحديث؛ راجع المعيار مباشرةً للأرقام الحالية بدل تثبيت ادعاء رقمي هنا، لأن النتائج تتغير بين إصدارات الأطر.
  • ما يزال يستخدم الترطيب — SolidJS ليس إطار قابلية استئناف. ينتج مصيّر الخادم HTML ثم يرطّبه العميل؛ وهذه آلية مختلفة عن قابلية الاستئناف في Qwik وليست نوعًا منها. وتعني التفاعلية دقيقة الحبيبات وغياب DOM الافتراضي أن عملية الترطيب في Solid تعيد بناء عمل أقل من إطار VDOM نموذجي، لكن القول إن «الترطيب أرخص هنا» بيان على مستوى الآلية لا رقم ثابت؛ فما تزال تكلفة الترطيب الفعلية تعتمد على مقدار الشيفرة التفاعلية التي يشحنها المسار. لا تصف SolidJS بأنه «قابل للاستئناف».
  • SolidStart هو الإطار الشامل لـ Solid — التوجيه ودوال الخادم وإعدادات النشر المسبقة، أي نظير QwikCity / Next.js لدى Solid. تسرد وثائق SolidStart الحالية (v1.0، موسومة بأنها تجريبية وآخر تحديث لها 2026-04-28) ثلاثة أوضاع تصيير تختارها لكل تطبيق: التصيير من جانب العميل (CSR) والتصيير من جانب الخادم (SSR — متزامن أو غير متزامن أو متدفق) وتوليد الموقع الثابت (SSG). تعمل التفاعلية دقيقة الحبيبات في Solid بالطريقة نفسها بصرف النظر عن الوضع الذي تختاره؛ ووضع التصيير هو ما يحدد أصلًا ما إذا كان HTML الأولي للمسار يحتوي على محتواك. وتنص وثائق SolidStart صراحةً على أنه لا يضم مكتبة توجيه أو بيانات وصفية افتراضيًا — بل تضيفها بنفسك، ولذلك لا تصبح إدارة البيانات الوصفية تلقائية لمجرد استخدام SolidStart.

بالنسبة إلى تحسين محركات البحث: يعتمد وصول محتوى مسار SolidStart وروابطه إلى HTML الأولي على أي من أوضاع التصيير الثلاثة يستخدمه؛ ينتج CSR وحده غلافًا فارغًا مثل أي SPA، تمامًا كما يحدث عند اختيار CSR في أي مكان آخر. أما SSR أو SSG فيضعان المحتوى داخل HTML بالطريقة التي يتطلبها JavaScript SEO. وفائدة CWV هنا على مستوى الآلية: يقلل وقت التشغيل الأصغر والتحديث دقيق الحبيبات العمل الذي يحتاجه الترطيب، لكنه لا يحدد بمفرده قيمة TBT أو INP بعينها.

الفرق بصياغة واضحة

هذا هو عمود الدقة الفقري للموضوع كله، لذا كن محددًا:

  • Qwik = قابلية الاستئناف. لا تمهيد ترطيب. يعمل نص تمهيد صغير ثابت الحجم تقريبًا (Qwikloader) عند التحميل، وتُحمّل شيفرة التطبيق تحميلًا كسولًا عند التفاعل. ويستأنف من حالة الخادم المسلسلة.
  • SolidJS = تفاعلية دقيقة الحبيبات + ترطيب. لا DOM افتراضي، وإشارات تتبع التبعيات، لكنه يستخدم الترطيب. وهو ليس قابلية الاستئناف.

يقلل كلاهما عمل JavaScript في المتصفح مقارنةً بتطبيق نموذجي يجمع VDOM والترطيب الكامل، لكن بآليتين مختلفتين، ولا يلغي أي منهما JavaScript في المتصفح كليًا. والخلط بين «قابلية الاستئناف» و«انعدام JavaScript»، أو اعتبار SolidJS قابلًا للاستئناف، هما الخطآن الأكثر شيوعًا في هذا الاقتران.

حد مقارنة مجاور: جزر Astro

يجدر ذكرها لأنها تظهر في النقاشات نفسها: تمثل بنية الجزر في Astro آلية ثالثة، وليست نوعًا من أي من الآليتين أعلاه. يشحن Astro افتراضيًا HTML عاديًا مصيّرًا على الخادم، ويتيح لك اختيار مكوّنات محددة لترطيبها على العميل («جزر») عبر توجيهات العميل؛ لذلك لا يشحن معظم الصفحة JavaScript خاصًا بالمكوّنات أصلًا. وهذا حد مقارنة مفيد لسؤال «ما مقدار الصفحة الذي يجب أن يكون تفاعليًا؟»، لكنه ليس قابلية الاستئناف (Qwik) ولا ترطيبًا بتفاعلية دقيقة الحبيبات (Solid)؛ بل ترطيب جزئي لصفحة ثابتة في ما عدا ذلك. وتفرّق وثائق Qwik نفسها صراحةً بين قابلية الاستئناف والترطيب الجزئي لهذا السبب.

Evidence for this claim Astro islands can provide a useful comparison boundary because they opt selected components into client execution, but islands/partial hydration are not the same mechanism as Qwik resumability or Solid fine-grained reactivity. Scope: comparison boundary Confidence: high · Verified: Islands architecture

كيف يقارنان بالأطر الراسخة؟

ReactVueAngularSolidJSQwik
نموذج التفاعليةVDOM + إعادة تصييرVDOM + تفاعليةZone.js / إشارات (v16+)إشارات، بلا VDOMإشارات، بلا VDOM
عمل المتصفح عند التحميل (SSR)ترطيبترطيبترطيبترطيب (إعادة بناء أقل)استئناف (تمهيد Qwikloader، بلا ترطيب كامل)
تكلفة JavaScript عند البدءتتوسع مع التطبيقتتوسع مع التطبيقتتوسع مع التطبيقتتوسع مع السطح التفاعلي للتطبيقتمهيد صغير؛ شيفرة التطبيق تُحمّل كسولًا عند التفاعل
المحتوى في HTML الخادمي/الثابتيعتمد على وضع التصيير (Next/Remix)يعتمد على وضع التصيير (Nuxt)يعتمد على وضع التصيير (@angular/ssr)يعتمد على وضع التصيير (SolidStart: CSR/SSR/SSG)يعتمد على وضع التصيير (QwikCity)
الإطار الشاملNext.js / RemixNuxtAngular SSRSolidStartQwikCity

ليست الأطر الراسخة سيئة لتحسين محركات البحث افتراضيًا؛ فمع وضع التصيير الصحيح تضع أطرها الشاملة جميعًا المحتوى داخل HTML، وهذا ما تحتاجه برامج الزحف (وتلك هي قصة JavaScript SEO كلها)، وينطبق الأمر نفسه على SolidStart وQwikCity. ما يختلف بين الأعمدة أعلاه هو الآلية وراء تكلفة بدء التشغيل في المتصفح، لا نتيجة مضمونة؛ قِس TBT/INP على مساراتك الفعلية بدل افتراض أن اختيار الإطار يحسم الأمر.

وهناك تحفظ يستحق الصراحة: تتجه React وVue وAngular كلها نحو الإشارات والترطيب الأخف أيضًا (إشارات Angular وReact Server Components ووضع Vapor في Vue). تتغير تفاصيل الإصدارات وخرائط الطريق بسرعة تجعل أي لقطة هنا قديمة؛ راجع الوثائق الحالية لكل إطار قبل الاستشهاد بإمكانات محددة.

التحقق من كل ذلك على مساراتك

لا تتعامل مع سمعة الإطار بوصفها جوابًا لمسار محدد. افحص، لكل مسار:

  • رمز الحالة وHTML الأولي — اجلب عنوان URL مباشرةً (لا عبر DOM الذي صيّره المتصفح) وتأكد من وجود محتواك وروابطك وبياناتك الوصفية بالفعل.
  • المخرجات المتدفقة، إذا كان وضع التصيير يتدفق — تأكد من وصول المحتوى كاملًا، لا مجرد غلاف مع حالة تحميل.
  • البيانات الوصفية والروابط — العنوان والوصف الوصفي وcanonical وأهداف <a href>، إذ لا تدير قابلية الاستئناف ولا التفاعلية دقيقة الحبيبات هذه الأمور نيابةً عنك.
  • حجم الحالة المسلسلة (Qwik) — تضخّم الحالة المسلسلة الكبيرة حمولة HTML رغم أنها تتجنب تمهيد الترطيب.
  • JavaScript الخاص بالمحمّل/وقت التشغيل والمنفّذ فعليًا في البداية — قِس ما يفعله Qwikloader أو وقت تشغيل Solid عند التحميل، لا ما تدعيه الوثائق فقط.
  • الطلبات المسبقة وتلك التي يطلقها التفاعل — راقب لوحة الشبكة لمعرفة ما يُحمّل عند النقر في مقابل ما حُمّل مقدمًا.
  • المهام التي تعمل في المتصفح فقط (useVisibleTask$ وما يعادلها) — تأكد من أنها لا تعمل بشغف عند كل تحميل.
  • السلوك عند فشل JavaScript أو حجبه — هل يتدهور المسار بأمان إلى شيء قابل للاستخدام أم يتعطل بالكامل؟
  • مخرجات ممثلة كما تصيّرها برامج الزحف — استخدم أداة URL Inspection في Search Console أو مصيّرًا مكافئًا، لا View Source وحده، لأن بعض المحتوى لا يظهر إلا بعد التصيير.

هذا هو انضباط التحقق نفسه الذي يحتاجه أي موقع مصيّر بـ JavaScript؛ راجع التصيير لفهم كيفية تعامل مسار Google مع ذلك عمومًا.

إلى أين تنتقل بعد ذلك؟

لكل إطار شرح متعمق مخصص:

  • Qwik SEO — قابلية الاستئناف عمليًا، وتوجيه QwikCity وSSR، وضبط البيانات الوصفية، ونمط useDocumentHead، وحدود التحميل الكسول، وكيف تظهر قابلية الاستئناف في CWV الميدانية.
  • SolidJS SEO — الإشارات والتفاعلية دقيقة الحبيبات، وSSR والتدفق في SolidStart، ولماذا ليس قابلًا للاستئناف، وإدارة الوسوم الوصفية، وسياق معايير الأداء.

يندرج كلاهما تحت مجموعة JavaScript SEO إلى جانب الأدلة الخاصة بـ React وVue وAngular وNext.js وNuxt وSvelte وAstro. ولجانب المقاييس راجع Core Web Vitals؛ ولكيفية رؤية Google للمحتوى المصيّر راجع التصيير.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.