दस्तावेज़फ़ाइल-आधारित
लेआउट
एक लेआउट प्रत्येक पृष्ठ को उसकी निर्देशिका के नीचे लपेटता है। लेआउट नेस्ट: पेज अपनी निर्देशिका के लेआउट के अंदर प्रस्तुत होता है, जो मूल निर्देशिका के लेआउट के अंदर रूट लेआउट तक प्रस्तुत होता है।
प्रत्येक लेआउट फ़ाइल प्रकार में एक पृष्ठ होता है:
| फ़ाइल | मोड | HTML दस्तावेज़ का स्वामी है | पृष्ठ |
|---|---|---|---|
layout.nexy |
सर्वर (useCSR = False) |
हां, मूल में | लेआउट.नेक्सी |
layout.tsx |
ग्राहक (useCSR = True) |
हाँ, मूल में (React, Solid, Preact) | React, Solid, Preact |
layout.vue |
क्लाइंट | हां, मूल में | लेआउट.व्यू |
layout.svelte |
क्लाइंट | हां, मूल में | लेआउट.स्वेल्टे |
एक प्रोजेक्ट एक परिवार का उपयोग करता है। layout.nexy और layout.tsx एक ही प्रोजेक्ट में नहीं रह सकते: सर्वर मोड में .nexy लेआउट होते हैं और क्लाइंट मोड में फ्रेमवर्क लेआउट होते हैं। सर्वर मोड और क्लाइंट मोड देखें।
ब्राउज़र दस्तावेज़ को कैसे संभालता है
क्लाइंट मोड में नेक्सी नोड में रूट लेआउट प्रस्तुत करता है, इसलिए पहली प्रतिक्रिया एक संपूर्ण दस्तावेज़ है। फिर ब्राउज़र इसे दो तरीकों में से एक में ले लेता है:
| फ्रेमवर्क | टेकओवर | इसका क्या मतलब है |
|---|---|---|
| React, Solid | पूरे दस्तावेज़ का हाइड्रेशन | सर्वर HTML का पुन: उपयोग किया जाता है जैसा कि यह है |
| Preact, Vue, Svelte | बॉडी टेकओवर | फ्रेमवर्क पेज बॉडी बनाता है और सर्वर द्वारा भेजे गए के लिए इसे स्वैप करता है |
Preact, Vue और Svelte पूरे दस्तावेज़ को हाइड्रेट नहीं कर सकते: Preact का hydrate एक दूसरा <html> तत्व बनाता है, Vue का कंपाइलर क्लाइंट टेम्पलेट से <script> को हटा देता है, और Svelte ब्राउज़र में <html>, <head> या <body> नहीं बना सकता। तो उनके लिए <html>, <head> और <body> विशेषताएँ वे हैं जो सर्वर ने भेजी हैं, और केवल बॉडी ब्राउज़र द्वारा बनाई गई है। व्यवहार में:
- शीर्षक, मेटा टैग, फ़ॉन्ट और थीम स्क्रिप्ट को रूट लेआउट में रखें: वे सर्वर द्वारा प्रस्तुत किए जाते हैं और वैसे ही बने रहते हैं।
<html>,<head>या<body>(उदाहरण के लिए एक प्रतिक्रियाशील वर्ग) पर एक बाइंडिंग सर्वर द्वारा लागू की जाती है लेकिन ब्राउज़र में अपडेट नहीं होती है। उन्हें किसी स्क्रिप्ट से बदलें, जैसा थीम स्क्रिप्ट करती है।- ब्राउज़र सर्वर मार्कअप का पुन: उपयोग करने के बजाय बॉडी को स्क्रैच से प्रस्तुत करता है, इसलिए बॉडी को पहले रेंडर के समान कार्य में एक बार बदल दिया जाता है।
मूल लेआउट
मूल लेआउट src/routes/layout.<ext> है। इसे nx new द्वारा बनाया गया है और यह एकमात्र स्थान है जो <!DOCTYPE html>, <html>, <head> और <body> (प्रत्येक ढांचा और .nexy) लिखता है। पेज और नेस्टेड लेआउट उन्हें कभी नहीं दोहराते।
dashboard/index इसे root layout > dashboard layout > page के रूप में प्रस्तुत करता है।
रूट समूह
कोष्ठक में एक निर्देशिका का यूआरएल बदले बिना अपना स्वयं का लेआउट हो सकता है:
दृढ़ता
क्लाइंट मोड में एक लेआउट माउंटेड रहता है जबकि उपयोगकर्ता इसे साझा करने वाले पृष्ठों के बीच नेविगेट करता है: इसका DOM, स्थिति और स्क्रॉल स्थिति रखी जाती है। सर्वर मोड में प्रत्येक नेविगेशन एक नया दस्तावेज़ है।