दस्तावेज़फ़ाइल पृष्ठों के मोड

सीएसआर (क्लाइंट-साइड रेंडरिंग)

परिभाषा

सीएसआर ब्राउज़र को नेविगेशन सौंपता है: पहले दस्तावेज़ के बाद, पृष्ठों के बीच जाने से अब सर्वर से HTML की मांग नहीं होती है। नेक्सी में यह एक प्रोजेक्ट निर्णय है, न कि एक पेज - useCSR = True पूरे एप्लिकेशन को क्लाइंट-रूटेड कर देता है।

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

nexyconfig.py

from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()    useCSR = True

फिर प्रोजेक्ट का आकार बदल जाता है:

	सर्वर मोड (`False`)	क्लाइंट मोड (`True`)
मार्ग	`.nexy`, `.md`, `.mdx`	`.tsx`, `.jsx`, `.vue`, `.svelte`
दस्तावेज़	`layout.nexy`	जड़ `layout.tsx` / `.vue` / `.svelte` का स्वामी है `<html>`, `<head>`, `<body>`
ग्राहक घटक	एक पृष्ठ के अंदर द्वीप	पन्ने स्वयं
`.nexy` के अंतर्गत `src/routes/`	पृष्ठ प्रारूप	`nx dev`, `nx start` और `nx build` से पहले अस्वीकृत
नेविगेशन	प्रति लिंक एक पूर्ण अनुरोध	क्लाइंट राउटर

.md और .mdx वैध रहते हैं: नेक्सी उन्हें क्लाइंट लेआउट के अंदर सर्वर पर प्रस्तुत करता है, और क्लाइंट राउटर वहां से काम संभाल लेता है। .py हैंडलर मार्गों के बगल में बैठते हैं और उन्हें FastAPI द्वारा सेवा दी जाती है।

जीवनचक्र का प्रतिपादन

अनुरोध फ़ाइल-आधारित राउटर तक पहुंचता है, जो मिलान मार्ग और उसके लेआउट ढूंढता है।
रूट लेआउट नोड में संपूर्ण दस्तावेज़ प्रस्तुत करता है - पहली प्रतिक्रिया में पहले से ही वास्तविक <html> होता है, खाली शेल नहीं।
नेक्सी क्लाइंट संपत्तियों और पेज के JSON विवरण को </body> से पहले इंजेक्ट करता है।
ब्राउज़र उस दस्तावेज़ को हाइड्रेट करता है. नेस्टेड लेआउट तब से अपनी स्थिति बनाए रखते हैं।
किसी अन्य रूट का लिंक क्लाइंट राउटर द्वारा नियंत्रित किया जाता है: कोई दस्तावेज़ अनुरोध नहीं, पृष्ठ ब्राउज़र में प्रस्तुत किया जाता है।

विकास में दस्तावेज़ को Vite डेव सर्वर द्वारा मांग पर प्रस्तुत किया जाता है। उत्पादन में इसे निर्माण के समय एक बार प्रस्तुत किया जाता है: एक स्थैतिक मार्ग को अपना दस्तावेज़ मिलता है, एक गतिशील मार्ग को प्रति घोषित स्थैतिक पैरामीटर या एक शेल मिलता है - एक खाली पृष्ठ के चारों ओर लेआउट - जब यह कोई भी घोषित नहीं करता है।

कब उपयोग करें

डैशबोर्ड, संपादक, कुछ भी जो एक एप्लिकेशन की तरह व्यवहार करता है।
शीर्ष पर क्लाइंट एप्लिकेशन के साथ एक Python एपीआई।
एक ऐसा पेज जहां हर बातचीत स्थानीय होगी और एक राउंड ट्रिप का एहसास होगा।

विन्यास

सेटिंग	मूल्य
`useFF`	आवश्यक: `useCSR` क्लाइंट फ्रेमवर्क के बिना अस्वीकार कर दिया जाता है
`useCSR`	`True`
`useRouter`	बंद रहना चाहिए: मॉड्यूलर राउटर क्लाइंट मोड में अस्वीकार कर दिया गया है

_ या . से शुरू होने वाली फ़ाइलों और फ़ोल्डरों को इन जांचों द्वारा अनदेखा कर दिया जाता है।

उदाहरण

src/routes/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <head><title>My app</title></head>      <body>{children}</body>    </html>  )}

src/routes/index.tsx

export default function Home() {  return <h1>Home</h1>}

सीमाएँ

संपूर्ण प्रोजेक्ट। आप एक सीएसआर पेज को सर्वर-मोड प्रोजेक्ट में नहीं मिला सकते हैं: एप्लिकेशन के लिए मोड चुनें, फिर सर्वर-मोड पेज के इंटरैक्टिव भागों के लिए द्वीप का उपयोग करें।
कोई .nexy मार्ग नहीं। आपने .nexy में जो कुछ भी लिखा है, उसे एक रूपरेखा घटक बनना होगा।
सर्वर डेटा एंडपॉइंट से होकर गुजरता है। एक क्लाइंट रूट रेंडर समय पर डेटाबेस को नहीं पढ़ सकता है; यह एक .py हैंडलर या एक एक्शन को कॉल करता है।
एक गतिशील मार्ग को एक घोषित स्थैतिक पैरामीटर की आवश्यकता होती है, या यह एक शेल से शुरू होता है। पृष्ठ से getStaticParams() निर्यात करें - Next.js नाम getStaticPaths और generateStaticParams भी स्वीकार किए जाते हैं - प्रति मान एक दस्तावेज़ रखने के लिए। इसके बिना, शेल में लेआउट होते हैं न कि पेज: ब्राउज़र चलने के बाद पेज दिखाई देता है।
सीएसआर कोई खाली पृष्ठ नहीं है, और एसपीए भी नहीं है। पहला दस्तावेज़ सर्वर द्वारा प्रस्तुत किया जाता है; यह नेविगेशन है जो ब्राउज़र में होता है।

अगले चरण

सर्वर मोड और क्लाइंट मोड: जाँच और अस्वीकृत फ़ाइलें
लेआउट: दस्तावेज़ का स्वामी कौन सी फ़ाइल है
एसएसआर: डिफ़ॉल्ट, पेज दर पेज
फ्रंटएंड: डेव सर्वर और क्लाइंट बिल्ड

GitHub पर संपादित करें