وب مدرن، رابط کاربری و تجربه‌ی وب · فصل ۱ — مرورگر، سرور، رندر و معماری صفحه · 33
Component، React، Hydration و Island یعنی چه؟
_Locale: fa-IR · Lesson: WEBF-006 · Public order: 33_
_Locale: fa-IR · Lesson: WEBF-006 · Public order: 33_
خروجی و artifact کاری
این درس برای ساختن رکورد مرز فعال‌سازی رابط نسخه ۱ است: یک artifact تصمیم که مشاهده، فرض، محدودیت و evidence موردنیاز را از هم جدا می‌کند. هدف حفظ یک مدل قابل‌انتقال است، نه حفظ‌کردن نام ابزارها.
Classify a bounded interactive UI by component boundary, initial HTML source, and client activation boundary; explain whether hydration or an island model is actually present rather than assumed.
مدل مرزی
Component، React، hydration و island نام چهار چیز در یک سطح نیستند. component راهی برای تقسیم UI به واحدهای دارای مسئولیت است؛ React یکی از libraryهای پیاده‌سازی component است. hydration رفتار client را به markup رندرشده در server و تحت مدل سازگار متصل می‌کند. island architecture به‌جای یک root سراسری، regionهای تعاملی انتخاب‌شده را فعال می‌کند.
در هر بخش سه برچسب نگه دارید: «مشاهده‌شده»، «استنباط محدود» و «نیازمند بررسی». اگر evidence در دسترس نیست، نتیجه را unknown ثبت کنید؛ نام ابزار یا pass شدن یک happy path جای evidence را نمی‌گیرد.
1. Component یک مرز طراحی است
component می‌تواند structure، behavior، state و interface با parent را مالک باشد. این مفهوم ذاتاً به React، client rendering یا حتی JavaScript وابسته نیست.
2. React یک library مشخص است
React مدل برنامه‌نویسی و APIهای runtime برای UI tree می‌دهد. component نامیدنِ هر چیز به‌عنوان React component تفاوت ایده معماری و implementation را حذف می‌کند.
3. Server rendering و hydration دو تصمیم جدا هستند
server rendering، HTML اولیه می‌سازد. hydration کار سمت client برای اتصال component tree و event behavior سازگار به همان HTML است؛ وجود HTML سمت server به‌تنهایی hydration را ثابت نمی‌کند.
4. Hydration به توافق نیاز دارد
اگر خروجی client با markup server منطبق نباشد، framework ممکن است warning بدهد، recover کند یا بخشی را جایگزین کند. داده اولیه deterministic و مرز browser-only باید صریح باشد.
5. Island سطح activation را محدود می‌کند
در مدل island، بیشتر صفحه می‌تواند HTML ثابت بماند و فقط componentهای انتخاب‌شده client code بگیرند. این روش می‌تواند JavaScript ارسالی را کم کند، اما به معنی JavaScript صفر یا coordination صفر نیست.
روش پنج‌مرحله‌ای
- regionهای UI را مشخص کنید و مالک markup، state و event هرکدام را بنویسید.
- منبع HTML اولیه را ثبت کنید: file ثابت، server render یا client render.
- واحد activation را تعیین کنید: بدون activation، یک root کامل یا islandهای انتخاب‌شده.
- برای regionهای hydrateشده، داده و فرض‌های environment که باید match شوند مشخص کنید.
- tradeoff را با evidence بسنجید: نیاز interactivity، هزینه JavaScript، مرز dependency، fallback شکست و accessibility.
مثال حل‌شده
یک product page به‌صورت HTML تحویل می‌شود. article و pricing table هیچ رفتار client ندارند. quantity picker یک Astro island است که هنگام دیده‌شدن فعال می‌شود؛ account drawer نیز یک React root جداست که از markup server hydrate می‌شود. رکورد نباید کل صفحه را hydrated React app بنامد؛ دو مرز activation را جدا classify می‌کند و fallback پیش از activation و داده لازم برای match را می‌نویسد.
ماتریس تصمیم و evidence
| موضوع | مرز/مالک | evidence | تصمیم یا محدودیت |
|---|---|---|---|
| article | HTML ازپیش‌رندرشده | بدون activation | بدون client code خوانا است |
| quantity picker | region ازپیش‌رندرشده | island هنگام visibility | form fallback یا unavailable state روشن |
| account drawer | React markup سمت server | hydrated root | snapshot اولیه پایدار account |
| analytics badge | ساخته‌شده در client | component کوچک و جدا | نباید task اصلی را block کند |
خطاهای محتمل و روش اصلاح
- هم‌معنا دانستن همه componentها با React
- فرض hydration برای هر web app مدرن
- ادعای نبود JavaScript در island architecture
برای هر مورد، ادعا را محدود کنید، یک counterexample بسازید و بنویسید کدام مشاهده می‌تواند آن را تأیید یا رد کند.
تمرین انتقال
سناریو را طوری تغییر دهید که یکی از فرض‌های مثال دیگر برقرار نباشد. بدون کپی‌کردن تصمیم قبلی، رکورد مرز فعال‌سازی رابط نسخه ۱ را دوباره بسازید؛ سپس تفاوت decision rule و تفاوت دادهٔ ورودی را توضیح دهید.
این درس چه چیزی را ثابت نمی‌کند
این درس certification، تضمین production یا پوشش همه implementationها را ادعا نمی‌کند. نتیجه فقط در مرز سناریو، sourceهای تاریخ‌دار و observationهای ثبت‌شده معتبر است.
خودسنجی
- [ ] آیا مسئولیت‌ها را از نام framework یا tool جدا کرده‌ام؟
- [ ] آیا دست‌کم یک failure probe و نتیجه موردانتظار آن را نوشته‌ام؟
- [ ] آیا fact، inference و design choice از هم مشخص‌اند؟
- [ ] آیا non-claim و evidence گمشده را ثبت کرده‌ام؟
- [ ] آیا transfer را روی context تغییرکرده و بدون پاسخ آماده انجام داده‌ام؟
منابع و مرز تازگی
sourceها در 2026-09-19 طبق Bible منجمدشده مرور شده‌اند. تاریخ review_due یک trigger برای بازبینی نسخه‌ای است؛ هیچ بسته‌ای نباید درجا و بدون نسخه جدید تغییر کند.
- S-REACT — React identifies itself as a library for web/native user interfaces built from components. (https://react.dev/; review: 2026-10-17)
- S-REACT-HYDRATE — Current React hydration semantics. (https://react.dev/reference/react-dom/client/hydrateRoot; review: 2026-10-17)
- S-ASTRO-ISLANDS — Current Astro islands architecture description; example, not universal definition of all island implementations. (https://docs.astro.build/en/concepts/islands/; review: 2026-10-17)
ارزیابی
پاسخ‌نامه‌ی این درس در بسته‌ی آموزش وجود ندارد؛ خودت جواب بده و صادقانه علامت بزن. «نیاز به مرور» درس را به صف تکرار می‌فرستد.
WEBF-006-SUM1 retrieval
WEBF-006-SUM2 application
WEBF-006-SUM3 diagnosis
WEBF-006-SUM4 decision
WEBF-006-SUM5 transfer
ملاک‌های ارزیابی (rubric)
| Dimension | Critical | Sufficient evidence |
|---|---|---|
| boundary_accuracy | yes | Responsibilities in component and hydration/island boundaries are placed at the correct bounded layer/time/location and adjacent lessons are not absorbed. |
| evidence_and_uncertainty | yes | Current factual claims are source-bounded; conditional paths and unknowns are stated rather than guessed. |
| decision_quality | yes | The decision recorded in Component Hydration/Island Boundary Map v1 follows from the scenario constraints and states what would invalidate it. |
| transfer | no | The learner applies the same reasoning in a changed scenario without copying a fixed stack answer. |
A submission passes only when every critical dimension is sufficient and the learner states missing evidence honestly. AI suggestions are not observed evidence; the learner remains accountable for the final bounded judgment.
منابع و تازگی
مطالعهٔ موارد (case studies)
رسانه و اسلایدهای درس
فایل‌های آموزشی (دانلود)