https://virgool.ir/feed/@saeid8.jafarifa2026-11-11 11:36:18https://files.virgool.ir/upload/users/68924/avatar/xiji85.jpeghttps://virgool.ir/@saeid8.jafarihttps://virgool.ir/Gajino-FrontEnd/چگونگی-data-fetching-واکشی-دادها-در-nextjs-nvj2dqhivei9در nextjs مفهوم بسیار مهمی وجود داره به نام (پیش بارگذاری)pre-rendering. به طور پیش فرض nextjs برای تمامی صفحه ها pre-rendering انجام میده. به این معنی که برای هر صفحه html رو تولید میکنه. به جای اینکه تمام کارها با جاوا اسکریپت سمت کلاینت انجام بشه.این کار باعث SEO بهتر و performance بالاتر میشه.برای چک کردن اینکه nextjs چگونه یک صفحه رو pre-render میکنه:ابتدا در کروم جاوا اسکریپت رو disable کنید:سپس این صفحه رو مشاهده کنید .اگر صفحه ای رو با React ایجاد کرده باشید و جاوااسکریپت مرورگر غیر فعال باشه اون صفحه لود نمیشه.برای تست این صفحه رو با غیر فعال کردن جاوااسکریپت در مرورگر ببینید .در این لینک میتونید ببینید چه جوری js رو در مرورگر کروم غیرفعال کنید.چگونگی pre-rendering با nextjsچگونگی pre-rendering بدون nextjsدر nextjs برای pre-rendering دادها دو روش وجود دارد.Static Generation (SG)Server Side Generation (SSR) تفاوت در این دو روش به زمان ایجاد html برای هر صفحه است.در sg ابتدا pre-rendering برای هر صفحه html را در زمان build تولید می کند و بعد از اون برای هر request از همان html تولید شده استفاده میشه.در ssr به این گونه است pre-rendering به ازای هر request تولید html انجام می دهد. تولید html در building timeتولید html به ازای هر requestتوجه داشته باشید که nextjs به شما این امکان را می دهد که برای هر یک از صفحه های خود یک نوع pre-rendering داشته باشید یا Static generation و یا Server Side Generation .چه زمانی از SSR و چه زمانی از SG استفاده کنیم؟پیشنهاد Nextjs این است که تا جای ممکن از Static Generation(با یا بدون داده)استفاده شود ، زیرا صفحه یک بار ساخته شده و توسط CDN سرویس دهی می کند که این کار باعث سرعت بارگذاری بسیار بیشتری در مقابل نوع SSR می شود.می توان از Static Generation برای صفحات مختلف بسیاری استفاده کرد.نکته ای که در استفاده از SG باید به آن توجه داشت این است که از این نوع Pre-rendering باید برای صفحاتی استفاده کرد که نیازی به ازتباط با کاربر قبل از بارگذاری ندارند.در واقع برای فهم بهتر این که در چه صفحه ای باید از SG و در چه صفحه ای باید از SSR استفاده کنیم یک سوال را از خود می پرسیم:آیا می توانم صفحه را پیش از درخواست کاربر (user request) پیش بارگذاری کنم. اگر جواب بله بود باید از SG و اگر خیر بود باید از SSR استفاده کرد.توجه داشته باشید که SG به این معنی نیست که ما نمی توانیم داده ای را از دیتابیش دریافت کنیم بلکه به این معنی است که این داده باید در زمان ساخت دریافت شده و بارگزاری شود.برای مثال صفحاتی مانند درباره ما، تماس با ما داده مورد نیاز خود را از دیتابیش دریافت می کنند اما نیازی به تعامل با کاربر قبل از بارگذاری ندارند اما صفحاتی مانند جستجو که بر اساس درخواست کاربر نتیجه را نایش می دهند باید به صورت SSR پیاده سازی شوند.همچنین صفحات SSR برای SEO استفاده می شوند که بسیار مهم است.امیدوارم مفید باشهSaeid JSaeid JSat, 27 Feb 2021 17:27:49 +0330https://virgool.ir/Gajino-FrontEnd/فلاکس-چیست-و-با-ریداکس-چه-تفاوتی-دارد-dypmawczleysدر حال حاضر یکی از زبان های محبوب برای توسعه فرونت react هست . مفهومی در ری اکت وجود داره به نام flux و redux . درباره اینکه flux چیست و چه تفاوتی با redux دراه در ادامه صحبت میکنم.فلاکس یک معماریه که توسط فیسبوک برای ساخت client side web app ایجاد شده. فلاکس در واقع بیشتر یک پترنه تا یک فریمورک .روند در fluxفلاکس چیست؟در اینجا درباره پیاده سازی فلاکس توسط فیسبوک صحبت میکنم.جریان فلاکس : به این شکله ک در لایه ویو که کامپوننت های ری اکت هستند عملی رو به dispatcher ارسال میکنند. دیسپچر یک event رو emit میکنه به store. استور چک میکنه که آیا چیزی برای انجام دادن با توجه به رویدادی که از دیسپچر براش اومده داره یا نه. اگر جواب اره باشه شروع به پردازش برای اون رویداد میکنه. کامپوننت ها همواره به تغییرات استور گوش میدن اگر رویدادی براشون ارسال بشه با توجه به اون رویداد خودشون رو آپدیت میکنن.تفاوت بین flux و redux:یکی از مهم ترین تفاوت ها بین فلاکس و ریداکس اینه که فلاکس multiple store هست اما ریداکس single store.اصل تفاوت در نوع مدیریت داده ها است . در ریداکس state ها immutable هستند(غیر قابل تغییرن) ، بنابراین ما یک داده جدید رو به وجود میاریم.اما در فلاکس ما میتونیم چندین state برا چنیدن کامپوننت داشته باشیم(که این کار باعث بی نظمی میشه).در فلاکس کامپوننت ها به store event ها گوش میدن برای تغییر ، در ریداکس کامپوننت ها خودشون رو بر اساس تغییر state آپدیت میکنن. از اونجایی که ریداکس single store (با داشتن چندین reducers ) هس در پیاده سازی و راحتی استفاده دست بالا رو داره.به عنوان react dev ترجیح میدم از ریداکس استفاده کنم چون کد تمیز و خواناتری رو برای خودم و هر کسی که کد رو بخونه ارایه میده.امیدوارم مفید باشهSaeid JSaeid JSat, 20 Feb 2021 16:14:29 +0330