الگوهای مدیریت State پیچیده در Next.js با RSC

یاد بگیرید که کامپوننت‌های سرور در Next.js چگونه کار می‌کنند و چگونه می‌توانید از آن‌ها برای اشتراک‌گذاری State بین کلاینت و سرور استفاده کنید. بهترین روش‌ها برای ساختاردهی صفحات با ترکیب کامپوننت‌های سرور و کلاینت، بهبود عملکرد کلی و تجربه کاربری اپلیکیشن های خود را یاد بگیرید.

آنچه یاد خواهید گرفت:

• چگونه کامپوننت‌های سرور کار می‌کنند؟
• چگونه کامپوننت‌های سرور و کلاینت را ترکیب کنیم تا زمان بارگذاری صفحه را بهبود دهیم؟
• چگونه از props برای اشتراک‌گذاری state از کامپوننت‌های سرور به کلاینت استفاده کنیم؟
• چگونه می‌توان از کوکی‌ها به عنوان ذخیره‌سازی state استفاده کرد؟
• چگونه می توان از hydrated state برای اشتراک‌گذاری state بین کامپوننت‌های کلاینت و سرور بهره ببریم؟

مدیریت state پیچیده در +Next.js 13 با کامپوننت‌های سرور و کلاینت

اشتراک‌گذاری و مدیریت state بین کامپوننت‌های سرور و کلاینت کار ساده‌ای نیست، به‌خصوص با اطلاعات محدودی که به‌صورت آنلاین موجود است. این دوره شما را با تمام مبانی آشنا می‌کند تا به این سؤال پاسخ دهید:

چگونه می‌توانم state را بین کامپوننت‌های سرور و کلاینت در Next.js به اشتراک بگذارم؟

ماژول 1: مقدمه و شروع به کار

سفر خود را با درک اصول ضروری +Next.js 13 و مدیریت state آغاز کنید.

• مرور کلی: با اصلی‌ترین اصول و مفاهیم +Next.js 13 آشنا شوید. ساختار دوره، سابقه مدرس و ابزارهایی که قرار است استفاده کنید را بشناسید.
• اهداف: انتظارهای روشنی از آنچه که دوره پوشش می‌دهد، شامل مشکلات اساسی مربوط به اشتراک‌گذاری state بین کامپوننت‌های سرور و کلاینت را مشخص کنید.

ماژول 2:State

درک بعد مرکزی اپلیکیشن های ری‌اکت: state.

1. مفهوم کلی State: بررسی کنید که State در زمینه وب اپلیکیشن ها به چه معناست. بررسی کنید که چگونه State بر طراحی و عملکرد اپلیکیشن شما تأثیر می‌گذارد.
2. State محلی در مقابل State عمومی: به تفاوت‌ها و کاربردهای State محلی و عمومی مسلط شوید تا تصمیم‌های آگاهانه‌تری در تمرینات کدنویسی خود بگیرید.
3. تکنیک‌های مدیریت: با استراتژی‌ها و ابزارهای مختلف مدیریت state اپلیکیشن، از جمله کتابخانه‌های محبوب شخص ثالث آشنا شوید.

ماژول 3: کامپوننت‌های کلاینت

کامپوننت‌های کلاینت را تجزیه و تحلیل کرده و نقش آن‌ها را در Next.js کشف کنید.

• ساختار کامپوننت: آناتومی کامپوننت‌های کلاینت را بشناسید و نحوه ایجاد آن‌ها و نقش آن‌ها در اپلیکیشن را درک کنید.
• قابلیت‌ها و محدودیت‌ها: بررسی کنید که کامپوننت‌های کلاینت چه کارهایی می‌توانند انجام دهند و محدوده و اسکوپ آن‌ها چه‌قدر است و چه مواردی مختص کامپوننت‌های سرور است.
• استفاده صحیح: دقت حس خود را در استفاده مناسب از کامپوننت‌های کلاینت توسعه دهید و به تعامل و داینامیک آن‌ها توجه ویژه‌ای کنید. اطلاعات خود را با یک آزمون جمع بندی کنید تا دانش خود را در مورد کامپوننت‌های کلاینت تایید کنید.

ماژول 4: کامپوننت‌های سرور

توانایی‌ها و مزایای استفاده از کامپوننت‌های سرور در Next.js را کشف کنید.

• درک کامپوننت‌های سرور: تعریف کنید که کامپوننت‌های سرور چه هستند و معماری آن‌ها را با تأکید بر عملکردها و محدودیت‌های مربوط به state بررسی کنید.
• مقایسه با SSR: کامپوننت‌های سرور را با رندرینگ سنتی سمت سرور مقایسه کنید و درک کنید که چه زمانی و چرا استفاده از کامپوننت‌های سرور مفید است.
• بهترین شیوه‌ها: یاد بگیرید که چه زمانی مناسب‌ترین زمان استفاده از کامپوننت‌های سرور است و به بررسی "سرور-لند" بپردازید که در آن برخی اقدامات سمت سرور انجام می‌شود. یک مرحله بررسی با یک آزمون کوتاه ماژول را به اتمام می‌رساند تا درک شما از کامپوننت‌های سرور را تقویت کند.

ماژول 5: معماری صفحه

ساختارهایی را که اپلیکیشن های Next.js شما را تشکیل می‌دهند مرور و اصلاح کنید.

• حداکثر کردن عملکرد و سادگی: الگوهای طراحی را کشف کنید که به شما اجازه می‌دهند از ویژگی‌های Next.js بهترین استفاده را داشته باشید و به عملکرد بهینه و سادگی در ساختار پروژه خود برسید.
• اپلیکیشن کاربردی: این ماژول مفهوم معماری صفحه را بازبینی کرده و مثال‌های پیچیده و کاربردی تری از نحوه تقسیم‌بندی کامپوننت‌ها برای مقیاس‌پذیری و نگهداری ارائه می‌دهد.

ماژول 6: اشتراک‌گذاری State بین کامپوننت‌های کلاینت و سرور

ادغام دو قلمرو Next.js، که شامل مدیریت state کامپوننت‌های سرور و کلاینت است.

• شناسایی مشکل: به جزئیات مدیریت و اشتراک‌گذاری state در کامپوننت‌های سرور بپردازید و زمان‌هایی که این موضوع با مدیریت state سمت کلاینت متفاوت است را شناسایی کنید.
• ارتباط بین کامپوننت‌ها: یاد بگیرید که چگونه state و props را به طور مؤثر بین کامپوننت‌های سرور و کلاینت منتقل کنید.
• کار با کوکی‌ها و درخواست‌های HTTP: تجربه عملی کار با کوکی‌ها به عنوان مکانیزمی برای state مشترک و استفاده از درخواست‌های HTTP برای همگام‌سازی state در تقسیم سرور-کلاینت را به‌دست آورید.