هفته گذشته با جو ساوونا و دن آبراموف چت زنده داشتم.
من سوالات و نگرانی های زیادی در مورد React Server Components و Dan and داشتم
جو به اندازه کافی مهربان بود که به من زمان پخش زنده داد تا در مورد آنها بپرسم.
من از summarize.tech برای تولید این خلاصه استفاده کردم
پخش زنده پیشنهاد می‌کنم اگر واقعاً می‌خواهید غواصی کنید، کل آن را تماشا کنید
عمیق تر!
لازم به ذکر است که هدف از این پخش زنده دستور دادن نبوده است
شما، اما برای پاسخ به سوالات خودم. من متوجه هستم که برخی از مردم می خواهند ما خرج کنیم
زمان بیشتری برای توضیح برخی از مفاهیم و پاسخ به دیگران
سوالات، اما ما فقط برای سوالات خودم وقت داشتیم. به همین دلیل وجود دارد
از آنجایی که من یک کاربر سنگین ریمیکس هستم، تمرکز زیادی روی ریمیکس داشتم.
00:00:00 – ساعت 01:00:00
React Server Components راه حلی برای استقرار تمام اجزای سرور است
و ارسال نتایج خود به مشتری، اجازه می دهد تا هر تعداد از اجزای
بدون توجه به اندازه آن در هر صفحه استفاده می شود. آنها دارای تقسیم خودکار بسته ها هستند،
در جایی که اجزای استفاده نشده در صفحه گنجانده نشده است و آن را بهینه می کند
معماری با این حال، درک این موضوع مهم است که اینطور نیست
مشکل اصلی که اجزای سرور حل می کنند و ارتفاع باید به آن بستگی داشته باشد
نیازهای مخاطب اجزای سرور React مدل React را گسترش می دهند و به هر کدام اجازه می دهند
جزء برای بازیابی داده های مورد نیاز، کاهش مقدار در سمت مشتری
اجزاء این معماری مزایایی مانند محلی سازی مشترک داده ها را فراهم می کند
وابستگی و نوشتن کد در یک مدل پاسخ درخواست و می تواند از هر دو استفاده کند
سرور و مشتری برای جلوگیری از مشکلات با آبشار، بلندگوها پیشنهاد می کنند که یک SSR قرار دهید
در لبه و اجزای سرور در نزدیکی لایه داده. بلندگوها هم
در مورد مبادلات RSC، از جمله مشکل n به علاوه یک که می تواند باشد، بحث کنید
با راه حل های دیگری مانند Remix حل شده است. آنها همچنین در مورد زمان ارائه صحبت می کنند
ویژگی‌های React Server Components، مانند حذف مجدد و اضافه بار
استانداردها و اینکه چگونه چارچوب هایی مانند Next.js می توانند تکرار بالقوه را بهبود بخشندداده ها در حین رندر سمت سرور اتفاق نظر این است که Next.js و Remix هر دو
راه های مشابهی برای دسترسی به اشیاء درخواست و پاسخ ارائه کنید. و در نهایت، در
سخنرانان درباره استفاده از جریان به عنوان رفتار پیش‌فرض و اهمیت هماهنگی واکشی‌ها برای تصمیم‌گیری در مورد اینکه با بارهای متعدد چه باید کرد بحث می‌کنند.
- 00:00:00 در این
بخش، کنت سی دادز مبحث اجزای سرور React و
مهمانان جریان، جوزف ساوونا و دن آبراموف. کنت او را دنبال کرد
پیشرفت با تعلیق و اجزای سرور و استفاده از ریمیکس برای
دو سال و نیم گذشته او برای درک مزایای آن تلاش کرد
اجزای سرور در ابتدا با این حال، او احساس می کند که از قبل ایده خوبی از آن دارد
چگونه آنها مشکلاتی را حل می کنند که راه حل های دیگر مانند CMS نمی توانند، و
سخنرانان مهمان سوءتفاهم های او را اصلاح خواهند کرد. هدف جریان
بحث در مورد موارد استفاده و مزایای اجزای سرور React است. - ساعت 00:05:00 در این
در بخش، تیم به طور عمده در مورد استفاده از اجزای سرور React بحث می کند
فرمول بندی این ایده که راه حل مشکل در مالکیت همه نهفته است
اجزای موجود در سرور و ارسال نتیجه آنها به مشتری به طوری که هر یک
تعداد کامپوننت ها را می توان در یک صفحه صرف نظر از اندازه آن استفاده کرد.
علاوه بر این، اجزای سرور دارای تقسیم خودکار بسته ها هستند که در آن، اگر a
صفحه از برخی از مؤلفه هایی که برای مشتری ارسال می شود استفاده نمی کند، آنها هستند
گنجانده نشده است، و آن را به یک معماری مفید برای بهینه سازی تبدیل می کند. در حالی که روشن است
این تیم توضیح می‌دهد که معماری بهینه‌سازی‌ها و مزایای بسیاری را معرفی می‌کند
درک این موضوع حیاتی است که این مشکل ریشه ای سرور نیست
مولفه ها تصمیم می گیرند و زمین باید به مخاطب بستگی داشته باشد
چه برای برنامه های تک صفحه ای و چه برای برنامه های چند صفحه ای. - ساعت 00:10:00 در این
در بخش، سخنرانان در مورد تفاوت های بین React Server Components بحث می کنند
و فریمورک های دیگر، مانند Remix و Astro، و نحوه React Server را برجسته کنید
Components مدل React را گسترش می دهد. آنها توضیح می دهند که با اجزای سرور،
هر جزء می‌تواند داده‌های مورد نیاز خود را بازیابی کند و امکان هم‌مکانی داده‌ها را فراهم کند
وابستگی و کاهش مقدار اجزای مورد نیاز در سمت مشتری.
همچنین، هنگامی که با React Server Components پیمایش می کنید، وضعیت ذخیره می شود،ایجاد یک تجربه منسجم تر آنها همچنین در مورد پتانسیل بحث می کنند
اجزای قابل استفاده مجدد مانند یک جزء توییت که می تواند داده ها را از آن استخراج کند
Twitter API از طریق npm به اشتراک گذاشته می شود. - ساعت 00:15:00 در این
در بخش، سخنرانان در مورد مزایا و موارد استفاده از اجزای سرور، مانند نوشتن کد در مدل درخواست-پاسخ و داشتن توانایی
استفاده کامل از سرور و کلاینت آنها همچنین توجه داشته باشند که در حالی که ریمیکس ارائه می دهد
برخی از این ویژگی ها مولفه های سرور انعطاف پذیری بیشتری را ارائه می دهند
نوشتن کد سرور با این حال، بلندگوها این سرور را می شناسند
قطعات می توانند مشکلات آبشاری ایجاد کنند و ممکن است نیاز به پیش بارگذاری دستی داشته باشند
از آنها اجتناب کنید آنها پیشنهاد می کنند SSR را در لبه قرار دهید و اجزای سرور را نزدیکتر کنید
به لایه داده برای به حداقل رساندن تاخیر. - ساعت 00:20:00 در این
در بخش، سخنرانان در مورد چالش های رندر سمت سرور بحث می کنند
اجزا و ریمیکس آنها به اهمیت انجام هر کاری در الف اشاره می کنند
پرس و جوی واحد و اینکه چگونه فشار دادن داده ها به لبه می تواند به کاهش برخی از موارد کمک کند
سوالات سخنرانان همچنین در مورد دشواری های نوشتن جاوا اسکریپت صحبت می کنند
از راه اندازی آبشارها و نحوه وجود اجزای Remix و سرور خودداری کنید
رویکردهای منحصر به فرد خود را برای مقابله با مشکل. این را هم روشن می کنند
بخش های مسیر را می توان به طور موازی با Remix، مشابه سرور، بازیابی کرد
اجزاء آنها همچنین توضیح می دهند که اجزای سرور می توانند ببینند
اگر داده‌های بارگذاری موازی برای بخش‌های مسیر را ایجاد نکنند، مشکلات عملکردی دارند
اما استدلال می کنند که ممکن است سقوط مشکل اصلی در این موارد نباشد. - ساعت 00:25:00 در این
در بخش، سخنرانان در مورد مشکل بالقوه n به علاوه یک بحث می کنند
هنگام ارائه یک لیست با چندین عنصر فرزند، که می تواند باعث غیر ضروری شود
بارگذاری داده ها و تاخیر سیستم آنها دو راه حل کلی برای
این مشکل – استفاده از الگوی بارگذاری داده برای درخواست‌های دسته‌ای یا حافظه پنهان
داده ها – و اهمیت مشاهده پذیری برای تشخیص عملکرد را برجسته می کند
مشکلات آنها همچنین توضیح می دهند که مشکلات آبشار می تواند حتی در
اجرای موازی زیرا به ظرفیت سیستم برای رسیدگی به آنها بستگی دارد
درخواست های موازی - ساعت 00:30:00 در این
در بخش، سخنرانان درباره مزایای هم‌مکانی وابستگی‌های داده بحث می‌کنند
با کامپوننت ها و اینکه چگونه کامپوننت های سرور می توانند این کار را انجام دهند. این را توضیح می دهند
این رویکرد برای سال‌ها امتحان شده است، اما تا زمانی که GraphQL و
رله ای که با موفقیت اجرا شد. با این حال، GraphQL گزینه مناسبی نیست
برای هر برنامه، و اجزای سرور بهترین ایده ها را از GraphQL می گیرند
و Relay و به توسعه دهندگان این امکان را می دهد که وابستگی های داده را با کامپوننت ها بومی سازی کنند. این یک چارچوب مقیاس پذیر برای نوشتن برنامه ها به طور موثر ایجاد می کند
حذف کد وابستگی سرور سخنرانان به توضیح ادامه می دهند
چگونه RSC چندین مبادله را ارائه می دهد، از جمله مشکل N+1 که می تواند باشد
با راه حل های دیگر مانند Remix اجتناب می شود. - ساعت 00:35:00 در این
بخش بحث در مورد استفاده از اجزای سرور و اینکه آیا آنها است
می تواند مشکل واکشی های تکراری را در هنگام رندر کردن کامپوننت ها حل کند
درخواست کنید سخنرانان ادعا می کنند که در حالی که اجزای سرور می توانند کپی شوند
وقتی یک مؤلفه را چندین بار رندر می‌کنید، درخواست‌ها را واکشی کنید، اینطور نیست
روشی که باید در برنامه ریمیکس انجام شود. در یک ریمیکس یا برنامه بعدی، استخراج
درخواست باید در لایه مسیر یا در چیدمان انجام شود بنابراین فقط این اتفاق می افتد
یک بار و به عنوان یک تکیه گاه تصویب می شود. آنها در صورت لزوم درباره یک سناریو بحث می کنند
یک درخواست واکشی یکسان را چندین بار برای هر نمونه کامپوننت انجام دهید. را
سخنرانان در نظرات خود متفاوت هستند، یکی از آنها ادعا می کند که اجزای سرور این کار را می کنند
این مشکل را به طور کامل حل نمی کند، در حالی که دیگری ادعا می کند که این گونه
مشکل نباید در یک برنامه ریمیکس وجود داشته باشد. - ساعت 00:40:00 در این
در بخش، سخنرانان درباره ویژگی‌های زمان اجرا React Server بحث می‌کنند
اجزای سازنده و روشن است که کندتر از همتای مشتری نیست،
به خصوص از آنجایی که مشکل dedupe از قبل حل شده است. آنها نیز تأثیر می گذارند
مشکل بالقوه اضافه بار استانداردها و عدم استفاده از استانداردها در برخی
موقعیت هایی مانند اضافه بار استخراج خودکار حذف مجدد. بلندگوها
اشاره کنید که React پچ نمی‌کشد و برنامه این است که خودش را ارائه کند
نسخه ای که با شناسایی و هیدراتاسیون کار می کند. با این حال، آنها فرض می کنندکه فریم ورک ها ممکن است نیاز به تنظیم استخراج در صورت لزوم داشته باشند. علاوه بر این،
در بخش مکانیزم حذف تکرار بحث می شود تا اطمینان حاصل شود که این فقط رخ می دهد
در یک درخواست یک کاربر خاص، نه بین چند کاربر. سرور React
کامپوننت ها یک زمینه ناهمزمان را فراهم می کنند که این درخواست را حذف می کند. - ساعت 00:45:00 در این
در بخش، سخنرانان درباره چگونگی بهبود چارچوب هایی مانند Next.js بحث می کنند
تکرار احتمالی داده در رندر سمت سرور به عنوان مثال Next.js
گزینه هایی مانند کلیدهای کش را برای تعیین اینکه آیا داده ها ثابت هستند و می توانند باشند ارائه می دهد
بین کاربران به اشتراک گذاشته می شود یا اگر باید در طول فرآیند ساخت ساخته شود.
اجزای سرور همچنین توانایی ایجاد بارهایی را دارند که به کاربران امکان می دهد بدون از دست دادن حالت حرکت کنند و این بارها را می توان در هنگام بازیابی کش ذخیره کرد.
گزینه مشخص شده است. همچنین بلندگوها دسترسی را لمس می کنند
داده های خاص درخواست مانند کوکی ها و هدرهای حافظه پنهان از یک جزء سرور.
اگرچه این یک چارچوب خاص است، Next.js یک تابع import برای آن ارائه می دهد
دسترسی مستقیم به کوکی ها ایده وارد کردن داده هایی مانند این هنوز معتبر است
غیر استاندارد در نظر گرفته می شود زیرا بسیاری از توسعه دهندگان ترجیح می دهند با پرس و جو کار کنند
به طور مستقیم اعتراض کنید - ساعت 00:50:00 در این
در بخش، تمرکز بر دسترسی به اشیاء درخواست و پاسخ است. اجماع
این است که هم Next.js و هم Remix راه های مشابهی را برای انجام این کار با پرش ارائه می دهند
مراحل غیر ضروری از طریق توابع کمکی در ریمیکس اما وجود دارد
“ویژگی درخواست دریافت فعلی متخصص” که دسترسی به آن را آسان می کند
شی درخواست اصلی از نظر اشیاء پاسخ، تا حد زیادی به
نحوه قرار دادن آنها در قاب در ریمیکس، به عنوان لودر نامیده می شود
قبل از اینکه جریان شروع به ارائه کند، هدرهای واکشی را می توان برای کنترل تنظیم کرد
به ترتیب رفتارهای حافظه پنهان - ساعت 00:55:00 در این
در بخش، شرکت کنندگان در مورد استفاده از جریان به عنوان یک رفتار پیش فرض بحث می کنند
در اجزای سرور React. آنها اشاره می کنند که جریان به معنای این است که همه
مانند بارگذاری معوق ضمنی است اما اگر از defer استفاده کنید
در ریمیکس این توانایی از بین می رود. آنها همچنین در مورد چگونگی در اجزای سرور بحث می کنندجهان، تمرکز بر پخش و بازیابی چیزها از پرس و جو و
سوال اصلی این است که چگونه می توان مطالب را از یک جزء سرور وارد پاسخ کرد.
با این حال، اختلاف نظرهایی در مورد این موضوع به عنوان متفاوت وجود دارد
بازیابی ها می توانند هدرهای مختلفی داشته باشند، بنابراین سیستمی که آنها را هماهنگ می کند و
تصمیم می گیرد که با چندین شارژ مورد نیاز چه کاری انجام دهد.
ساعت 01:00:00 – ساعت 01:40:00
در این ویدیوی یوتیوب، دن آبراموف، جو ساوونا و کنت اس. دادز بحث می کنند
عملکرد و مزایای React Server Components (RSC). آنها این ایده را بررسی می کنند
شامل و چارچوب کش تطبیقی است و در مورد مزایای آن بحث کنید
شکستن اجزا به قطعات کوچکتر استادان نیز در مورد
جداسازی کد سرور و کلاینت و این که چگونه این به نفع توسعه دهندگان است. دیگری
موضوعی که آنها پوشش می دهند محدودیت های تعامل با پایگاه های داده روی سرور است
فایل ها و اینکه چگونه جهش ها می توانند برخی از مشکلات عملکرد را حل کنند. سخنرانان بر تغییر مدل ذهنی مورد نیاز برای کار با RSC و بحث تاکید می کنند
نقش اجزای مشتری آنها همچنین مزایای محل سکونت مشترک و
مبادلات دقیق در سطح جزء آنها توصیه می کنند بررسی کنید
مستندات و پیاده سازی RSC در Next.js 13 برای علاقه مندان
در محاکمه اش سخنرانان همچنین در مورد مزایای بالقوه RSC بحث می کنند
کاربران فنی یا سمت مشتری و ابراز هیجان در مورد
در انتظار صدور اسناد
- ساعت 01:00:00 در این
در بخش، سخنرانان درباره ایده ذخیره سازی و نحوه ارتباط آن با React بحث می کنند
اجزای سرور آنها در حال بررسی امکان دوشاخه و
چارچوب تطبیقی که می تواند به طور خودکار داده ها را برای استخراج ابزار ترکیب کند
و تصمیم بگیرید که چه چیزی برای کش کردن مناسب است. تمرکز روی وجود دارد
اهمیت حافظه پنهان و اینکه چگونه معماری اجزای سرور می تواند خروجی را کش کند
به جای اینکه حافظه پنهان مشتری را کاهش دهد. بلندگوها
همچنین به موضوع تجزیه اجزا به قطعات کوچکتر می پردازد که
با قلاب ها، محدودیت های ولتاژ، اشکالات به طور فزاینده ای رایج می شود
مرزها و اجزای سرور بحث در مورد مبادلات وجود دارد
از شکستن اجزا به قطعات کوچکتر و چگونگی ارتباط آن
جنبه یادگیری و ارگونومی React. - ساعت 01:05:00 در این
در بخش، سخنرانان در مورد معاوضه های استفاده از فایل های جداگانه بحث می کنندکد سرور و کلاینت در React Server Components (RSC). در حالی که برخی ممکن است ترجیح دهند
توانایی interleave کد، استفاده از فایل های جداگانه به جلوگیری از خطا کمک می کند
مانند افشای اسرار در نظر گرفته شده برای سرور به مشتری. یادداشت های یک سخنران
که در حالی که تقسیم فایل می تواند به عنوان یک محدودیت RSC دیده شود، اینطور است
یک محدودیت عمده نیست و RSC نحوه انجام آن را تجویز نمی کند
ساختار برنامه شما به طور کلی راه حل پارتیشن بندی فایل برای سرور و
کد مشتری به عنوان یک مبادله خوب برای مزایایی که ارائه می دهد، دیده می شود،
از جمله تجربه بهتر توسعه دهنده و به جلوگیری از اشکالات کمک می کند. - ساعت 01:10:00 در این
در بخش، سخنرانان محدودیت‌های تعامل با پایگاه‌های اطلاعاتی را مورد بحث قرار می‌دهند
فایل های سرور و دست و پا گیر بودن اضافه کردن کنترل کننده رویداد برای تعاملات.
آنها از Remix پیش رو در این زمینه با بهبود پیشرونده خوب آن یاد می کنند
تاریخچه با فرم‌ها و کنترل‌کننده‌ها و نحوه کار تیم روی جهش‌ها اجازه می‌دهد توابع سرور به مشتری به محصول منتقل شوند.
ادغام اجازه می دهد تا رفتار با مرز شبکه را به طور خودکار تغییر دهید
بدون نیاز به اضافه کردن آن برای هر تعامل یکپارچه شده است. سخنرانان ادامه می دهند
می گویند که بازسازی برنامه های کاربردی در آینده با استفاده از یک سرور
کامپوننت ها به راه های مختلفی برای ایجاد برنامه های جدید منجر می شوند. - ساعت 01:15:00 در این
در بخش، سخنرانان درباره اینکه چگونه جهش‌ها برای ساختن مدرن ضروری هستند بحث می‌کنند
اپلیکیشن‌ها و اینکه چگونه فقدان آنها در Remix باعث ایجاد مشکلاتی برای برنامه‌های پولی آن شده است
وب سایت آنها همچنین بر نحوه اصلاح ساختار اجزای سرور تأثیر می گذارند
نامشخص است، اما بسیار مهم است که الگوها را تثبیت کنیم تا به هنجار تبدیل شوند
توسعه دهندگان همچنین استعاره از استخوان و ماهیچه که
کمک می کند تا بفهمیم اجزای سرور کجا قرار می گیرند و چگونه کار می کنند
بهینه سازی با اجتناب از نیاز به اجرای کدهای زیادی بر روی مشتری برای اتصال
با سرور - ساعت 01:20:00 در این
در بخش، سخنرانان در مورد تغییر مدل ذهنی مورد نیاز برای کار بحث می کنند
اجزای سرور React. مفهوم برخورد با اجزای سرور به عنوان یک
اسکلتی که باید با تعامل سمت مشتری اجرا شود در کجا بررسی می شودقطعات تعاملی دارای حفره هایی هستند که جزء والد آنها را پر می کند. این
این رویکرد با روش سنتی تفکر در مورد برنامه‌های React مقایسه می‌شود
درخت کامل آنها در ادامه کاربرد عملی این را توضیح می دهند
رویکرد، از جمله اینکه چگونه ممکن است برخی از مشکلات عملکرد را برطرف کند و مواردی را ایجاد کند
لوله کشی راحت تر - ساعت 01:25:00 در این
در بخش، سخنرانان هدف یک برنامه کاربردی با استفاده از اجزای سرور و
نقش اجزای مشتری هدف این است که اجزای سرور از بین بروند
تا جایی که ممکن است به عمق درخت در حالی که مولفه مشتری شکاف ها را می پذیرد
که می تواند عمق اجزای سرور را در صورت وجود افزایش دهد
تعامل با این حال، قبل از این، جهش ها باید به طور کامل ایجاد شوند
تحقیق در این راستا اجزای مشتری هنوز حیاتی هستند و برخی در سمت مشتری هستند
کامپوننت ها ممکن است بهتر از اجزای سرور مانند شرایطی باشند که
اجزای سرور HTML متورم را برای صفحات طولانی ایجاد می کند که هزینه های اضافی را به همراه دارد
ارزشش را ندارد - ساعت 01:30:00 در این
بخش، سخنرانان در مورد مزایای اجزای سرور بحث می کنند، ص
هم‌مکانی اساسی است. توانایی نوشتن یک فناوری، زبان، چارچوب و مجموعه ای از اصطلاحات در یک کلاینت و سرور، کار را آسان تر می کند
برای اطمینان از ترکیب پذیری سرور سخنرانان نمونه ای از a را برجسته می کنند
یک جزء نشانه گذاری کد که می تواند یک مؤلفه سرور باشد که یک کلاینت را ارائه می دهد
جزء آنها همچنین نشان می دهند که چگونه این رویکرد اجازه می دهد تا دانه بندی
بدون نیاز به تغییر API در سطح مؤلفه سازش می کند
قطعات یا بارگذاری تحلیلگرهای مشتری. - 01:35:00 بامداد در این
دن آبراموف و جو ساونا در مورد چگونگی بهینه سازی React بحث می کنند
اجزای سرور به طور طبیعی از جزء سازی و npm خارج می شوند
یکپارچه سازی کد که برای توسعه دهندگان هیجان انگیز است. توصیه می کنند
بررسی سایت سند جدید و ارائه مفهوم اصلی
مدل جزء سرور برای کسانی که می خواهند به کد شیرجه بزنند، آنها
پیشنهاد می‌کنم روتر برنامه Next.js 13 را بررسی کنید زیرا جامع‌ترین روتر را دارد
استقرار اجزای سرور در حالی که آنها در حال حاضر با آنها کار می کنند
بسته هایی مانند The Parcel Bundler و Webpack Plugin، امیدوارند React را ببینند
اجزای سرور در حال تبدیل شدن به یک ویژگی برتر در کتابخانه های دیگر نیز هستند. - ساعت 01:40:00 در این
در بخش، سخنرانان در مورد جدایی بین React Server Components بحث می کنند
و اینکه چگونه می تواند برای کاربران مختلف فنی یا مشتری سودمند باشد.
آنها کاربران را راهنمایی می کنند تا RFC نوشته شده توسط Joe را بررسی کنند که جزئیات چگونگی آن را نشان می دهد
عملکرد قطعات و مزایایی که می توان از آنها به دست آورد. علاوه بر این،
آنها اشاره کردند که برنامه این است که اجزای React را به سمت بالا منتقل کنیم
به اسناد واکنش نشان دهید و در عین حال تعادلی بین توضیح آنها حفظ کنید
قطعات با یا بدون حاشیه سخنرانان با تشکر به پایان می رسند
میزبان و ابراز هیجان در مورد انتشار آینده اسناد و
امکان مشاهده در دسترس بودن منتشر شده از اجزای سرور.
امیدوارم بحث برای شما مفید بوده باشد!
