CSR (ক্লায়েন্ট-সাইড রেন্ডারিং)

সংজ্ঞা

CSR ব্রাউজারে নেভিগেশন হস্তান্তর করে: প্রথম নথির পরে, পৃষ্ঠাগুলির মধ্যে সরানো আর 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 বৈধ থাকে: 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>}

সীমাবদ্ধতা

সমগ্র প্রকল্প আপনি একটি সার্ভার-মোড প্রকল্পে একটি CSR পৃষ্ঠা মিশ্রিত করতে পারবেন না: অ্যাপ্লিকেশনের জন্য মোড বাছাই করুন, তারপর একটি সার্ভার-মোড পৃষ্ঠার ইন্টারেক্টিভ অংশগুলির জন্য দ্বীপ ব্যবহার করুন।
না .nexy রুট আপনি .nexy এ যা কিছু লিখেছেন তা একটি কাঠামোর উপাদান হয়ে উঠতে হবে।
সার্ভার তথ্য মাধ্যমে যায় শেষ পয়েন্ট একটি ক্লায়েন্ট রুট রেন্ডারের সময় ডাটাবেস পড়তে পারে না; এটি একটি .py হ্যান্ডলার বা একটি অ্যাকশন বলে।
একটি গতিশীল রুটের জন্য একটি ঘোষিত স্ট্যাটিক প্যারাম প্রয়োজন, অথবা এটি একটি থেকে শুরু হয় শেল পৃষ্ঠা থেকে getStaticParams() রপ্তানি করুন - Next.js নাম getStaticPaths এবং generateStaticParams ও গৃহীত হয় - প্রতি মান প্রতি একটি নথি থাকতে। এটি ছাড়া, শেল লেআউট বহন করে এবং পৃষ্ঠা নয়: ব্রাউজারটি চালানোর পরে পৃষ্ঠাটি প্রদর্শিত হয়।
CSR একটি ফাঁকা পৃষ্ঠা নয়, এবং একটি SPAও নয়। প্রথম নথি সার্ভার দ্বারা রেন্ডার করা হয়; এটি ব্রাউজারে ঘটে যাওয়া নেভিগেশন।

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

সার্ভার মোড এবং ক্লায়েন্ট মোড: চেক এবং প্রত্যাখ্যাত ফাইল
লেআউটস: কোন ফাইলটি নথির মালিক
SSR: ডিফল্ট, পৃষ্ঠায় পৃষ্ঠা
ফ্রন্টেন্ড: ডেভ সার্ভার এবং ক্লায়েন্ট বিল্ড

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