يكي‌از جالب ترين نكاتي كه درباره React Server Component وجود داراست طراحي سايت در مشهد اين ميباشد كه جاوا اسكريپتي كه كامپوننت به آن متعلق ميباشد( بسته هاي فرد ثالثي كه import گرديده اند) نيازي وجود ندارد طراحي سايت كه براي كلاينت ارسال گردد. آن ها كاملا روي سرور import، تعبير و تفسير و ساخته ميگردند و صرفا فيض براي ما ارسال ميشود. مثلا در‌حالتي كه به پوشه Note.server.js نگاهي بيندازيد راياپارس مشاهده خواهيد كرد كه يك ابزار فرمت كردن داده را import نموده است ( از روش import {format} from 'date-fns';) كه كليه چيز از روش آن در سرور واقعه مي افتد. ahrefs خلال اين شما از به كارگيري غلط از داده هاي خويش نيز دوري خواهيد كرد.
قابليت و امكان جداسازي باصرفه كدها
يكي از ديگر از حوزه هاي قاب ورك React كه در آن شاهد توفيق و سعي بسيار بهتر React Server Component هستيم امكان جداسازي و تقسيم كد ميباشد. استدلال اين مورد اين ميباشد كه كامپوننت سرور در حين انجام نمي تواند مشخص و معلوم نمايد كه كدام مسير كد در اكنون انجام ميباشد و در سود درباره كدي كه در اكنون اعمال شدن ميباشد تصميم بگيرد. در واقع اين شغل مشابه به به كار گيري از React.lazy() براي import كردن كد ميباشد با اين تفاوت كه جداكردن و تقسيم كد دراين مكان سواي مداخله شكل ميگيرد. ضمن اين مي بايست اعتنا داشته باشيد كه مولفه سرور قادر است سريع خيس از مولفه خدمت گيرنده مسير كد ما يحتاج را بار گذاري نمايد.
مثالي از Lazy loading در سرور كامپوننت
درپي مثالي را درباره اين مسئله به شما ارائه خوا هيم اعطا كرد:
import React from 'react';
// one of these will start loading *once rendered and streamed to the client*:import OldPhotoRenderer from './OldPhotoRenderer.client.js';import NewPhotoRenderer from './NewPhotoRenderer.client.js';
function Photo(props) {// Switch on feature flags, logged in/out, type of content, etc:if (FeatureFlags.useNewPhotoRenderer) {return ;} else {return ;}}در قطعه كد بالا ما درباره اين كه كدام كامپوننت (OldPhotoRenderer يا اين كه NewPhotoRenderer) براساس يك فلگ (FeatureFlags.useNewPhotoRenderer) بايستي لود گردد تصميم گيري كرديم. در شرايطي‌كه اين شغل با استعمال از React.lazy صورت پذيرد قبل از آن كه گزينش مدنظر ما اين چنين لود گردد كامپوننت فعلي مي بايست روي مرورگر تحليل خواهد شد و به محض اين كه‌اين كد روي سرور جاري ساختن خواهد شد مسير كد درست نيز به همين صورت بار گذاري شود.
React Server Components چه طور در قاب ورك React شغل مي نمايد؟
كامپوننت هاي سرور به طور تدريجي رندر ميگردند و واحدهاي رندر گرديده از UI را به طور صعودي براي كلاينت پخش مي نمايند. هنگامي كه‌اين امكان را با Suspense ادغام مي‌كنيم به پيشرفت دهندگان اذن خواهد بخشيد تا state هاي لود intentional را ساخت‌و‌ساز كرده و به‌سرعت محتواي اصلي را به استفاده كننده نماد دهند در حالي كه باقي برگه معطل لود بقيه مناطق ميباشد.
اين خصوصيت بسيار جالب خواهد بود. به اين ترتيب React Server Components در قاب ورك React عملكردي شبيه SSR را به شما ارائه نمي دهند كه در آن كامپوننت ها در سمت سرور ايفا گرديده و به كدهاي HTML كاهش پيدا مي نمايد و در قدم بعدي نيز با استعمال از قطعه كدهايي از جاوا اسكريپت و بوت استرپ براي كلاينت آرم داده ميگردند. در قبال اين قابليت و امكان در كادر ورك React به محض فراهم شدن قسمت هاي اساسي محتوا آن‌ها‌را براي كلاينت پخش مي نمايد.
فرض فرمائيد كه سرور با قوانيني مواجه خواهد شد كه نياز داشته باشد تا يك كامپوننت سرور را رندر نمايد. به محض اين كه رندر مهيا ميشود حاصل در يك پوسته فشرده قرار ميگيرند كه فورا استارت به پخش براي كلاينت مي نمايد. به عبارت ديگر اركان UI كه مشاهده آن ها براي كلاينت ضروري ميباشد به محض مهيا شدن براي وي پخش مي‌شوند تا بقيه اركان و محتواي شيت تارنما نيز فراهم خواهد شد.
شنبه ۰۷ آبان ۰۱ ۱۱:۳۴ ۱۴ بازديد
تا كنون نظري ثبت نشده است