دستاویزاتفائل کے صفحات کے طریقوں

CSR (کلائنٹ سائیڈ رینڈرنگ)

تعریف

سی ایس آر براؤزر کو نیویگیشن دے دیتا ہے: پہلی دستاویز کے بعد، صفحات کے درمیان منتقل ہونے سے سرور سے ایچ ٹی ایم ایل کا مطالبہ نہیں ہوتا ہے۔ Nexy میں یہ ایک پروجیکٹ کا فیصلہ ہے، ایک صفحہ نہیں - 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 درست رہتے ہیں: Nexy انہیں کلائنٹ لے آؤٹ کے اندر سرور پر رینڈر کرتا ہے، اور کلائنٹ راؤٹر وہاں سے سنبھال لیتا ہے۔ .py ہینڈلر راستوں کے پاس بیٹھتے ہیں اور FastAPI کے ذریعہ خدمت کی جاتی ہے۔

رینڈرنگ لائف سائیکل

درخواست فائل پر مبنی روٹر تک پہنچتی ہے، جو مماثل روٹ اور اس کے لے آؤٹ کو تلاش کرتا ہے۔
روٹ لے آؤٹ نوڈ میں پوری دستاویز کو پیش کرتا ہے - پہلا جواب پہلے سے ہی اصلی <html> رکھتا ہے، خالی خول نہیں۔
Nexy کلائنٹ کے اثاثوں کو انجیکشن کرتا ہے اور </body> سے پہلے صفحہ کی JSON تفصیل۔
براؤزر اس دستاویز کو ہائیڈریٹ کرتا ہے۔ نیسٹڈ لے آؤٹ تب سے اپنی حالت برقرار رکھتے ہیں۔
کسی دوسرے راستے کا لنک کلائنٹ روٹر کے ذریعہ سنبھالا جاتا ہے: کوئی دستاویز کی درخواست نہیں، صفحہ براؤزر میں پیش کیا جاتا ہے۔

ڈویلپمنٹ میں دستاویز کو Vite دیو سرور کی مانگ پر پیش کیا جاتا ہے۔ پروڈکشن میں یہ تعمیر کے وقت ایک بار پیش کیا جاتا ہے: ایک جامد راستہ اپنا دستاویز حاصل کرتا ہے، ایک متحرک راستے کو ایک اعلان کردہ جامد پیرم، یا ایک شیل ملتا ہے - خالی صفحے کے ارد گرد کی ترتیب - جب یہ کسی کا اعلان نہیں کرتا ہے۔

کب استعمال کرنا ہے۔

ڈیش بورڈز، ایڈیٹرز، کوئی بھی چیز جو ایپلیکیشن کی طرح برتاؤ کرتی ہے۔
ایک Python API جس کے اوپر کلائنٹ ایپلیکیشن ہے۔
ایک صفحہ جہاں ہر تعامل مقامی ہے اور ایک راؤنڈ ٹرپ محسوس کیا جائے گا۔

کنفیگریشن

ترتیب	قدر
`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 ہینڈلر یا ایکشن کہتے ہیں۔
ایک متحرک راستے کو ایک اعلان شدہ جامد پیرم کی ضرورت ہوتی ہے، یا یہ a سے شروع ہوتا ہے۔ شیل صفحہ سے getStaticParams() برآمد کریں - Next.js کے نام getStaticPaths اور generateStaticParams بھی قبول کیے جاتے ہیں - فی قیمت ایک دستاویز رکھنے کے لیے۔ اس کے بغیر، شیل لے آؤٹ رکھتا ہے نہ کہ صفحہ: براؤزر کے چلنے کے بعد صفحہ ظاہر ہوتا ہے۔
CSR ایک خالی صفحہ نہیں ہے، اور نہ ہی SPA۔ پہلی دستاویز سرور کے ذریعہ پیش کی گئی ہے۔ یہ نیویگیشن ہے جو براؤزر میں ہوتی ہے۔

اگلے اقدامات

سرور موڈ اور کلائنٹ موڈ: چیک اور مسترد شدہ فائلیں۔
لے آؤٹس: کون سی فائل دستاویز کی مالک ہے۔
SSR: پہلے سے طے شدہ، صفحہ بہ صفحہ
فرنٹ اینڈ: دیو سرور اور کلائنٹ کی تعمیر

GitHub پر ترمیم کریں