ডকুমেন্টেশনমোড
দ্বীপপুঞ্জ এবং হাইড্রেশন
সংজ্ঞা
একটি দ্বীপ একটি ক্লায়েন্ট উপাদান - React, Vue, Svelte, Solid বা Preact - একটি .nexy পৃষ্ঠায় আমদানি করা হয়। সার্ভার তার HTML রেন্ডার করে; ব্রাউজার সেই একটি উপাদানকে ইন্টারেক্টিভ করে তোলে। পৃষ্ঠার বাকি অংশ এইচটিএমএল থাকে।
দ্বীপগুলি সার্ভার মোডে বিদ্যমান। ক্লায়েন্ট মোডে উপাদানগুলি *পৃষ্ঠাগুলি হল: CSR দেখুন।
এটা কিভাবে কাজ করে
from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />Nexy বিল্ড টাইমে কম্পোনেন্ট রেন্ডার করে, এর HTML সঞ্চয় করে এবং পেজের ভিতরে রাখে। পৃষ্ঠার প্রতিক্রিয়া একটি JSON অ্যাট্রিবিউট হিসাবে সেই HTML প্লাস প্রপস বহন করে। ব্রাউজারে, দ্বীপ রানটাইম উপাদানটি লোড করে এবং ধারকটি দখল করে।
directive সিদ্ধান্ত নেয় কখন এটি ঘটবে। একটি ছাড়া, দ্বীপটি তার রানটাইম প্রস্তুত হওয়ার সাথে সাথে হাইড্রেট করে।
জীবনচক্র রেন্ডারিং
- বিল্ডে, প্রতিটি ক্লায়েন্ট উপাদান HTML-এ রেন্ডার করা হয় এবং
__nexy__/client/static/এর অধীনে লেখা হয়। - একটি অনুরোধ
.nexyপৃষ্ঠাটি রেন্ডার করে; ট্যাগের জায়গায় দ্বীপের HTML ঢোকানো হয়েছে। - প্রতিক্রিয়াটি এইচটিএমএল, প্রপস এবং নির্দেশিকাকে বৈশিষ্ট্য হিসাবে বহন করে।
- ব্রাউজারে, রানটাইম সময়সূচী নির্দেশ অনুযায়ী হাইড্রেশন।
- হাইড্রেশন স্ট্যাটিক এইচটিএমএলকে লাইভ কম্পোনেন্ট দিয়ে প্রতিস্থাপন করে; পৃষ্ঠার বাকি অংশটি অস্পর্শিত।
বিকাশে কোনও বিল্ড স্ন্যাপশট নেই: ধারকটি খালি এবং উপাদানটি ব্রাউজারে রেন্ডার হয়। পৃষ্ঠাটি একই দেখায়, তবে প্রথম পেইন্টটি উত্পাদন থেকে আলাদা।
কখন ব্যবহার করতে হবে
- একটি পৃষ্ঠা যা বেশিরভাগ বিষয়বস্তু এবং এক বা দুটি ইন্টারেক্টিভ স্পট রয়েছে।
- একটি উইজেট যা ক্রলারদের জন্য HTML-এ থাকা আবশ্যক এবং এখনও কাজ করে৷
- একটি উপাদান যার ব্রাউজার প্রয়োজন কিন্তু ক্লায়েন্ট রেন্ডারিংয়ে পুরো পৃষ্ঠাটি টেনে আনা উচিত নয়।
কনফিগারেশন
| নির্দেশিকা | হাইড্রেটস |
|---|---|
কোনোটিই নয়, বা client:load |
অবিলম্বে |
client:idle |
যখন ব্রাউজার নিষ্ক্রিয় থাকে (requestIdleCallback, 2 সেকেন্ড সময় শেষ) |
client:visible |
যখন দ্বীপটি ভিউপোর্টে প্রবেশ করে, 200 px তাড়াতাড়ি |
client:media |
যখন একটি মিডিয়া কোয়েরি মেলে; এটি media প্রপ দিয়ে সেট করুন |
<Chart directive="client:media" media="(min-width: 768px)" />client:media ডিফল্ট (min-width: 768px) যখন media অনুপস্থিত থাকে, এবং একবার হাইড্রেট করে। IntersectionObserver ছাড়া একটি ব্রাউজারে, client:visible নিষ্ক্রিয় হয়ে যায়।
directive এবং media নেক্সি দ্বারা গ্রাস করা হয়: এগুলি আপনার উপাদানে প্রেরণ করা হয় না।
উদাহরণ
import { useState } from "react" export default function Counter({ start = 0 }: { start?: number }) { const [count, setCount] = useState(start) return <button onClick={() => setCount(count + 1)}>{count}</button>}from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />সীমাবদ্ধতা
client:onlyকখনই নয় হাইড্রেট এটি গৃহীত হয়, কিন্তু রানটাইম এটি এড়িয়ে যায়, তাই সার্ভার এইচটিএমএল নিষ্ক্রিয় থাকে। একটি ক্লায়েন্ট রুট ব্যবহার করুন (CSR) যখন একটি উপাদান সার্ভারে রেন্ডার করতে পারে না।client:manualকোন পাবলিক নেই ট্রিগার এটি স্বয়ংক্রিয়ভাবে এড়িয়ে যায় এবং যে হ্যান্ডেলটি এটি পুনরায় শুরু করে সেটি অভ্যন্তরীণ।- প্রপস হতে হবে JSON এগুলি
json.dumpsদিয়ে সিরিয়াল করা হয় একটি মান যা সিরিয়াল করা যায় না তা বাদ দেওয়া হয়, এবং দ্বীপটি{}পায় - নীরবে। - একটি দ্বীপ শেয়ার করা সঙ্গে একটি ক্লায়েন্ট উপাদান নয় রাষ্ট্র আপনি নিজেকে যোগ করার ব্যবস্থা ছাড়া দুটি দ্বীপ রাষ্ট্র ভাগ করে না।
- দ্বীপটি দ্বারা পুনরায় রেন্ডার করা হয় না সার্ভার এর এইচটিএমএল হল বিল্ড স্ন্যাপশট, প্লাস কম্পোনেন্টটি একবার হাইড্রেটেড হলে যাই হোক না কেন।
- দ্বীপগুলির একটি পৃষ্ঠা হল একটি CSR পৃষ্ঠা ছদ্মবেশ যদি প্রতিটি ব্লক একে অপরের সাথে কথা বলতে হয়, পরিবর্তে ক্লায়েন্ট মোড বেছে নিন।