الوثائق/وسائط

الجزر والترطيب

التعريف

الجزيرة هي مكون عميل - React، Vue، Svelte، Solid أو Preact - تم استيرادها إلى صفحة .nexy. يعرض الخادم HTML الخاص به؛ يجعل المتصفح هذا المكون تفاعليًا. تبقى بقية الصفحة بتنسيق HTML.

الجزر موجودة في وضع الخادم. في وضع العميل، المكونات هي الصفحات: راجع CSR.

كيف يعمل

---from "@/components/Counter.tsx" import Counter---<h1>Static heading</h1><Counter directive="client:visible" />

---from "@/components/Counter.tsx" import Counter---<h1>Static heading</h1><Counter directive="client:visible" />

يعرض Nexy المكون في وقت الإنشاء، ويخزن HTML الخاص به، ويضعه داخل الصفحة. تحمل استجابة الصفحة HTML بالإضافة إلى الدعائم كسمة JSON. في المتصفح، يقوم وقت تشغيل الجزيرة بتحميل المكون ويتولى الحاوية.

directive يقرر متى أن يحدث ذلك. وبدون ذلك، ترطب الجزيرة بمجرد أن يصبح وقت تشغيلها جاهزًا.

تقديم دورة الحياة

1. عند الإنشاء، يتم تقديم كل مكون عميل إلى HTML وكتابته تحت __nexy__/client/static/.
2. يعرض الطلب صفحة .nexy؛ يتم إدراج HTML الخاص بالجزيرة بدلاً من العلامة.
3. تحمل الاستجابة HTML والدعائم والتوجيه كسمات.
4. في المتصفح، يقوم وقت التشغيل بجدولة عملية الترطيب وفقًا للتوجيهات.
5. يستبدل الترطيب HTML الثابت بالمكون المباشر؛ بقية الصفحة لم تمس.

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

متى تستخدم

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

التكوين

<Chart directive="client:media" media="(min-width: 768px)" />

client:media يستقر على (min-width: 768px) عند غياب media، ويرطب مرة واحدة. في المتصفح الذي لا يحتوي على IntersectionObserver، يعود client:visible إلى وضع الخمول.

يتم استهلاك directive و media بواسطة Nexy: ولا يتم تمريرهما إلى المكون الخاص بك.

مثال

import { useState } from "react" export default function Counter({ start = 0 }: { start?: number }) {  const [count, setCount] = useState(start)  return <button onClick={() => setCount(count + 1)}>{count}</button>}

---from "@/components/Counter.tsx" import Counter---<h1>Count</h1><Counter start=3 directive="client:idle" />

---from "@/components/Counter.tsx" import Counter---<h1>Count</h1><Counter start=3 directive="client:idle" />

القيود

• client:only لا يرطب أبدًا. إنه مقبول، لكن وقت التشغيل يتخطى ذلك، لذلك يظل HTML الخاص بالخادم خاملًا. استخدم مسار العميل (CSR) عندما لا يمكن عرض أحد المكونات على الخادم.
• client:manual ليس له مشغل عام. يتم تخطيه أيضًا تلقائيًا، ويكون المقبض الذي يستأنفه داخليًا.
• يجب أن تكون الدعائم JSON. وهي متسلسلة مع json.dumps؛ يتم إسقاط القيمة التي لا يمكن إجراء تسلسل لها، وتستقبل الجزيرة {} - بصمت.
• الجزيرة ليست مكون عميل ذو حالة مشتركة. لا تشترك الجزيرتان في الحالة بدون آلية تضيفها بنفسك.
• لا يتم إعادة عرض الجزيرة بواسطة الخادم. HTML الخاص بها هو لقطة البناء، بالإضافة إلى ما يفعله المكون بمجرد ترطيبه.
• صفحة الجزر هي صفحة CSR مقنعة. إذا كانت كل كتلة تحتاج إلى التحدث مع بعضها البعض، فاختر وضع العميل بدلاً من ذلك.

الخطوات التالية

• التصيير: الأوضاع الأربعة
• المكونات: كيف تستورد صفحة .nexy واحدًا
• React ، Vue ، Svelte ، Solid ، Preact

انسخ الصفحة بصيغة Markdown حرِّر على GitHub