दस्तावेज़/मोड

द्वीप और जलयोजन

परिभाषा

एक द्वीप एक ग्राहक घटक है - React, Vue, Svelte, Solid या Preact - एक .nexy पृष्ठ में आयात किया जाता है। सर्वर अपना HTML प्रस्तुत करता है; ब्राउज़र उस एक घटक को इंटरैक्टिव बनाता है। पृष्ठ का शेष भाग HTML ही रहता है।

द्वीप सर्वर मोड में मौजूद हैं। क्लाइंट मोड में घटक पृष्ठ हैं: सीएसआर देखें।

यह कैसे काम करता है

---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" />

नेक्सी निर्माण के समय घटक को प्रस्तुत करता है, उसका 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 का उपभोग नेक्सी द्वारा किया जाता है: वे आपके घटक तक नहीं पहुंचते हैं।

उदाहरण

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 निष्क्रिय रहता है। जब कोई घटक सर्वर पर प्रस्तुत नहीं हो सकता तो क्लाइंट रूट (सीएसआर) का उपयोग करें।
• client:manual का कोई सार्वजनिक ट्रिगर नहीं है। इसे स्वचालित रूप से छोड़ दिया जाता है, और इसे फिर से शुरू करने वाला हैंडल आंतरिक है।
• प्रॉप्स JSON होने चाहिए। उन्हें json.dumps के साथ क्रमबद्ध किया गया है; एक मान जिसे क्रमबद्ध नहीं किया जा सकता, हटा दिया जाता है, और द्वीप को {} प्राप्त होता है - चुपचाप।
• एक द्वीप साझा राज्य वाला ग्राहक घटक नहीं है। आपके द्वारा स्वयं जोड़े गए तंत्र के बिना दो द्वीप राज्य साझा नहीं करते हैं।
• द्वीप को सर्वर द्वारा दोबारा प्रस्तुत नहीं किया गया है। इसका HTML बिल्ड स्नैपशॉट है, साथ ही हाइड्रेटेड होने के बाद घटक जो कुछ भी करता है।
• द्वीपों का एक पृष्ठ प्रच्छन्न रूप से एक सीएसआर पृष्ठ है। यदि प्रत्येक ब्लॉक को एक-दूसरे से बात करने की आवश्यकता है, तो इसके बजाय क्लाइंट मोड चुनें।

अगले चरण

• रेंडरिंग: चार मोड
• घटक: कैसे एक .nexy पृष्ठ एक को आयात करता है
• React, Vue, Svelte, Solid, Preact

पृष्ठ को Markdown के रूप में कॉपी करें GitHub पर संपादित करें