ডকুমেন্টেশনফাইল-ভিত্তিক

বিন্যাস

একটি বিন্যাস তার ডিরেক্টরির নীচে প্রতিটি পৃষ্ঠাকে মোড়ানো। লেআউট নেস্ট: পৃষ্ঠাটি তার ডিরেক্টরির লেআউটের ভিতরে রেন্ডার করে, যা মূল ডিরেক্টরির লেআউটের ভিতরে, রুট লেআউট পর্যন্ত রেন্ডার করে।

লেআউট ফাইল টাইপ প্রতি একটি পৃষ্ঠা আছে:

ফাইল	মোড	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 হিসাবে রেন্ডার করে।

রুট গ্রুপ

ইউআরএল পরিবর্তন না করে বন্ধনীর একটি ডিরেক্টরির নিজস্ব লেআউট থাকতে পারে:

src/routes/

layout.nexy

(marketing)/

layout.nexywraps /pricing and /about only

pricing.nexy

about.nexy

(app)/

dashboard.nexyonly the root layout

জেদ

ক্লায়েন্ট মোডে একটি লেআউট মাউন্ট থাকে যখন ব্যবহারকারী এটি শেয়ার করা পৃষ্ঠাগুলির মধ্যে নেভিগেট করে: এর DOM, রাজ্য এবং স্ক্রোল অবস্থান রাখা হয়। সার্ভার মোডে প্রতিটি নেভিগেশন একটি নতুন নথি।

পরবর্তী পদক্ষেপ

GitHub-এ সম্পাদনা করুন