دستاویزاتفائل پر مبنی

لے آؤٹ

ایک لے آؤٹ ہر صفحے کو اپنی ڈائرکٹری کے نیچے لپیٹ دیتا ہے۔ لے آؤٹ نیسٹ: صفحہ اپنی ڈائرکٹری کے لے آؤٹ کے اندر رینڈر ہوتا ہے، جو کہ بنیادی ڈائرکٹری کے لے آؤٹ کے اندر، روٹ لے آؤٹ تک رینڈر ہوتا ہے۔

فی ترتیب فائل کی قسم ایک صفحہ ہے:

فائل	موڈ	HTML دستاویز کی مالک ہے	صفحہ
`layout.nexy`	سرور (`useCSR = False`)	ہاں، جڑ میں	layout.nexy
`layout.tsx`	کلائنٹ (`useCSR = True`)	ہاں، جڑ میں (React، Solid، Preact)	React، Solid، Preact
`layout.vue`	کلائنٹ	ہاں، جڑ میں	layout.vue
`layout.svelte`	کلائنٹ	ہاں، جڑ میں	layout.svelte

ایک پروجیکٹ ایک خاندان کو استعمال کرتا ہے۔ layout.nexy اور layout.tsx ایک ہی پروجیکٹ میں نہیں رہ سکتے: سرور موڈ میں .nexy لے آؤٹ ہوتے ہیں اور کلائنٹ موڈ میں فریم ورک لے آؤٹ ہوتے ہیں۔ دیکھیں سرور موڈ اور کلائنٹ موڈ۔

براؤزر دستاویز کو کیسے سنبھالتا ہے۔

کلائنٹ موڈ میں Nexy نوڈ میں روٹ لے آؤٹ کو پیش کرتا ہے، لہذا پہلا جواب ایک مکمل دستاویز ہے۔ براؤزر پھر اسے دو طریقوں میں سے ایک میں لے جاتا ہے:

فریم ورک	ٹیک اوور	اس کا کیا مطلب ہے
React، Solid	ہائیڈریشن پوری دستاویز کی	سرور ایچ ٹی ایم ایل کو دوبارہ استعمال کیا جاتا ہے جیسا کہ یہ ہے
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) لکھتی ہے۔ صفحات اور نیسٹڈ لے آؤٹ ان کو کبھی نہیں دہراتے ہیں۔

src/routes/

layout.*root: the document

index.*

dashboard/

layout.*nested: UI only

index.*

settings.*

dashboard/index root layout > dashboard layout > page کے طور پر پیش کرتا ہے۔

روٹ گروپس

قوسین میں ایک ڈائرکٹری URL کو تبدیل کیے بغیر اپنا لے آؤٹ رکھ سکتی ہے:

src/routes/

layout.nexy

(marketing)/

layout.nexywraps /pricing and /about only

pricing.nexy

about.nexy

(app)/

dashboard.nexyonly the root layout

استقامت

کلائنٹ موڈ میں ایک لے آؤٹ اس وقت نصب رہتا ہے جب صارف اس کو شیئر کرنے والے صفحات کے درمیان تشریف لے جاتا ہے: اس کی DOM، ریاست اور اسکرول پوزیشن رکھی جاتی ہے۔ سرور موڈ میں ہر نیویگیشن ایک نئی دستاویز ہے۔

اگلے اقدامات

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