نوشته های Pouriya Babaali

آپدیت جدید نکست جی اس 12 (Nextjs v12) ، شبی که نکست و ری اکت حریفان را ناک اوت کردند !

Pouriya Babaali — Tue, 26 Oct 2021 23:21:54 +0330

Nextjs 12 Has been Released!30 سال پیش زمانی که تیم برنزلی (پدر کنونی اینترنت) ، وب جهان گستر (World Wide Web) را در بنیاد سرن خلق کرد ، از زمان اولین نسخه HTML که در سال 1991 ریلیز شد تا 1995 که Css و 1996 که جاوا اسکریپت به وب اضافه شدند میتوان به این شکل تصور کرد 5 سال وب بدون لباس و بدون مغز به حیات خودش ادامه داده است ! بعد از گذشت 30 سال تا به امروز کمتر کسی چنین تغییرات عمده و تکنولوژی های متنوع را متصور میشد.از 2013 درست زمانی که اولین نسخه از ری اکت ریلیز شد ، دنیای وب دچار تحولات عمده تری شد انقدر دست توسعه دهندگان وب باز شد هر سال یک تکنولوژی جدید نشات گرفته از ری اکت خلق شده است ! از کلی کامپوننت جذاب و دیزاین سیستم و فریم ورک های متنوع ( Nextjs , Gatsbyjs ,AfterJs) و ...اما درست امشب یعنی 26 اکتبر حدود ساعت 19:30 به وقت تهران ، کنفرانس جدید نکست جی اس ، حریفان را ناک اوت کرد البته نه کامل بلکه آنان را وادر به تغییر خواهد کرد ، تغییر برای بهبود ! ، این است زیبایی دنیای وب!کنفرانس جدید نکست جی اس که امسال رنگ و بوی پنجمین سالگرد خلق این فریم ورک جذاب را داشت ، با شعار کنفرانس قبلی یعنی بیایید وب را سریع تر کنیم شروع شد ، در اول این کنفرانس ضبط شده به رسم کنفرانس های سال های گذشته تیم جذاب Vercel و فوندر آن را دیدیم که ایشان راجب راهی که تاکنون نکست جی اس برای سریع تر کردن وب رفته است صحبت کرد و بعد از آن به ویژگی های جدید نسخه جدید نکست یعنی نکست 12 اشاره کرد ، تا الان که حدود 2 ساعت از پایان کنفرانس گذشته است میتوانم به جد بگویم میدان بازی تغییر کرده است ( به زعم یکی از نئو بانک های ایران )!! و اما این من و این شما و این تغییرات نکست جی اس در نسخه 12 تغییرات nextjs 12چند ماه بیش درست زمانی که نسخه آلفا ری اکت 18 ریلیز شد تغییرات اساسی در بخش SSR ری اکت اتفاق افتاد که اگر دنبال کننده این موضوع نبودید میتوانید در مقاله قبلی من آن را مطالعه کنید !اولین تغییری که به چشم میخورد استفاده از پکیج SWC برای بیلد های جاوا اسکریپت است ، جایی که به کمک زبان RUST تا 3 برابر تغییرات با فست رفرش زودتر اعمال میشود و تا 5 برابر زودتر بیلد گرفته میشود ! این تغییر در بخشی از ویدیو معرفی نکست 12 قابل مشاهده بود !تغییرات نکست 12 سمت راست و نکست 11 سمت چپ قابل مشاهده است تغییرات در نکست 12نکست اعلام کرد که برخی از کد بیس های بزرگ دنیا را با نکست 12 سینک کرده و متوجه شده که این تغییرات در کدبیس های خیلی پیچیده و خیلی بزرگ نیز اعمال میشود .این تغییرات فقط شامل swc نمیشود و در کنار تغییرات پرفورمنسی وب پک که فوندر آن (توبیاس کوپرز) در تیم Vercel کد میزند و یکی از کانتربیوت های جدید نکست هست اعمال شده استکامپایل کد های جاوا اسکریپت به وسیله Rust تا 13 برابر !!!! سریع تر از Babel انجام میشود البته فقط جاوا اسکریپت نیست و styled-jsx خود نکست هم با این کامپایلر ، سی اس اس را کامپایل میکند ! ( عجیب اما واقعی)این اتفاقات برای کتابخانه های emotion , styled component نیز به زودی خواهد افتادچراکه آن ها در پشت زمینه از babel استفاده میکنند اما نکست جی اس در نسخه های بعدی میخواهد این پکیج ها را نیز با swc پورت کند و از تمامی توسعه دهنده ها درخواست کرده تا کانفیگ های babel کاستوم خودشون رو برای نکست در لینک بخصوصی share کنند تا توسعه این فیچر در آینده با stability بیشتری انجام شود.نکست اعلام کرده که بعد از این آپدیت علاقه به استفاده از زبان Rust در نکست بیشتر شده و آنان دو نفر جدید به تیمشان اضافه کردن !!! فوندر SWC و فوندر Parcel نیز به تیم توسعه نکست اضافه شدند و قطعا باید تغییرات اساسی و ماورایی بیشتری در آپدیت های بعدی نکست شاهد باشیم ! (تازه فوندر وب پکم هست ! چه بریز بپاشی !!) علاوه بر این ها از باقی افرادی که در این زبان زبده هستند دعوت به همکاری شده است ! پس میتوان اینگونه تصور کرد که Rust به بخش جدایی ناپذیری از نکست در نسخه های بعدی خواهد شد2. MiddleWareمیدلور ها در این نسخه از نکست به آن اضافه شدند ، عمده کارهایی که با میدلور میشود کرد میتوان از rewrite , redirect , stream html نام برد اما این تمام ماجرا نیست در ویدیو معرفی نکست 12 میدولر اینگونه معرفی شداضافه شدن میدلور به nextjs 12یکی از استفاده های جالبی که این قابلیت دارد این است که پیش از تمامی ریکوست های فرانت اجرا میشود مثلا شما میتوانید دسترسی آیپی های کشور های مختلف به سایتتان را ریستریکت کنید و اجازه ندهید آنان وارد سایتتان شود ( اونم از طریق فرانت !! جذاب نیست ؟ )یا میتوانید لاگ سیستم بخصوص خود را ایمپلیمنت کنید و خیلی کار های جذاب دیگر !برای استفاده از میدلور ها باید فولدر استراکچر این شکلی در پروژه و در فولدر page ایجاد کنید pages/_middleware.jsexport function middleware(req, ev) { return new Response('Hello, world!')} 3. آماده سازی نکست برای ری اکت نسخه 18 بله و بلاخره ری اکت نسخه 18 قبل از ریلیز نهایی توسط تیم Vercel به نکست اضافه شد و با تنظیمات داخل Next.config.js میتوانید این حالت اکسپریمنتال جذاب را اضافه کنید ! از تغییرات ری اکت 18 در مقاله قبلی مفصل توضیح داده ام ، اما قابلیت های جذاب html streaming , concurance rendring , ... همه و همه در این نسخه به نکست اضافه شد !! به اذعان تیم نکست این قابلیت به همراه جلسات متعدد با تیم React انجام شده و خیلی از این موارد را تیم React دولووپ کرده! (زیبا نیست؟)در ویدیو یوتیوب به سایت معروف Hacker News اشاره شد و Clone این سایت با نکست جی اس نسخه های قبلی با نسخه جدید نکست مقایسه شد ! در نسخه قدیمی بعد از فچ کامل api و ری رندر شدن کامل و هیدریت شدن ری اکت ، میتوانستیم دیتا را مشاهده کنیم ولی همانطور که در تصویر میبینید با استریم شدن html صفحه به تدریج و بر اساس سرعت اینترنت یوزر یا سرعت سرور api ما انجام میشود یعنی بعد از این آپدیت Seo Improvment عجیب غریبی را شاهد خواهیم بود !همانطور که در معرفی ری اکت 18 گفتیم ، قابلیت lazy loading در SSR در این نسخه قابل دسترس خواهد بود یعنی درست مثل lazy loading در کلاینت شما با Suspense میتوانید لودینیگی تا فچ شدن کامل دیتا و نمایش آن برای یوزر نمایش دهید !!!!برای اضافه شدن این قابلیت آزمایشی فعلا باید به شکل دستی آن را به کانفیگ اضافه کنید !!!// next.config.js module.exports = { experimental: { concurrentFeatures: true } }4. قابلیتServer Component ری اکت 18 این قابلیت جدید که قبل از کریسمس معرفی شد باعث میشود شما بتوانید کل کامپوننت را در سمت سرور ایجاد کنید بدون که باندل سایزی در سمت کلاینت برای لود کامل به یوزر تحمیل کنید یعنی فرض کنید کامپوننت نقشه شما 1 مگ باندل سایز دارد با این قابلیت باندل سایزی سمت فرانت شما برای لود کامل کد های جاوا اسکریپت مپ شما ایجاد نمیشود بلکه کل این کامپوننت در سمت سرور ساخته و برای یوزر شما نمایش داده میشود !!! این قابلیت را نباید با SSR , SSG اشتباه بگیرید چون اساسا با همدیگر متفاوت هستند ! با این قابلیت انقلاب عجیبی اتفاق میوفتد ، حذف کامل باندل سایز های پکیج ها یعنی سریعتر شدن وب و فعلا برگ آخری بود که ری اکت برای رقبا خودش به کمک نکست رو کرده است و مطمین هستم که عدم تطبیق دیگر رقبا در این کارزار باعث نابودی و افول آن ها خواهد شد ، چرا که آنان مجبورند تمامی پکیج ها را در سمت کلاینت لود کنند ! پس قطعا این رقابت سخت با رقبای دیگر ادامه خواهد داشت ولی در نهایت خوشحالم در زمانی در وب کد زده ام که توانستم این تغییرات عجیب و عمده را ببینم !در نهایت برای اضافه شدن این قابلیت هم باید آن را در کانفیگ نکست اضافه کنید !// next.config.js module.exports = { experimental: { concurrentFeatures: true, serverComponents: true } }با این قابلیت شما میتوانید دیتا فچ شدن سمت سرور را از محدوده Page به کامپوننت محدود کنید !! این جمله خیلی ساده ولی بسیار پیچیده است ! یعنی شما نیازی به getserversideprops , getinitialprops , getstaticprops نخواهید داشت !! و دیتا فچ شما درون هر کامپوننت به شکل سرور ساید فچ خواهد شد یعنی همان طریق ری اکت هوکی سابق که در یوز افکت و ... انجام میشد اما با قابلیت های بسیاااار زیاد و بسیاار عجیب !!! ( واقعا از فرط هیجان مو به تن آدم سیخ میشه !!! )برای اضافه شدن این قابلیت کافی است به جای ساخت فایل معمولی در فولدر page به انتها فایل server اضافه کنید یعنی : index.js => index.server.js و از این طریق میتوانید از قابلیت های بالا استفاده کنید با این قابلیت شما میتوانید از suspense , selective hydration,streaming rendring استفاده کنید .چیز عجیبی که در ویدیو یوتیوب دیدم و تا الان مات و مبهوت ماندم این بود که میتوانید فچ دیتا در سطح کامپوننت را به شکل اتومات کش کنید !!!! با پراپ revalidat وkey فج دیتا شما در سطح کامپوننت جایی در نکست ذخیره و تا زمانی که ریولیدیت نشده است از کش فراخوانی میشود و باعث میشود زمانی که یوزر سرعت کمی دارد از کش قبلی مطلب شما را بخواند ! ( چقدر من دنبال این قابلیت بودم و خودم با react query جیزی شبیه این را پیاده سازی کردم ولی باز هم سمت سرور و کش کردن انقدر هم راحت نیست !!! اما با این نسخه سمت سرور تمامی فچ دیتا های سطح کامپوننت قابلیت کش شدن دارند ) 5. ساپورت EsModule با Url Imports در توضیح esmodule اگر کوتاه بخواهم توضیح دهم ماژول هایی هستند که در پس زمینه از WASM استفاده میکنند که کمک بسیاری میکند که هم وب و هم Nodejs آن ها را متوجه شود البته با توجه به باندل سایز بسیار کمی که دارند در ادامه میتوانید از این لینک مطالعه کنیددر نهایت میتوانید این کامپوننت ها را با ایمپورت به نکست اضافه کنید import confetti from 'https://cdn.skypack.dev/canvas-confetti'6.کاهش سایز ایمیج ها با استفاده از AVIFبر اساس ادعا نکست با ساخت ایمیج ها با این پسوند تا 20 درصد حجم تصاویر را کمتر میکند البته باید دقت کنید اگر مرورگر یوزر این پسوند را ساپورت نکند این تغییر در نکست انجام نمیشود و نیازی نیست نگران ساپورت مرورگر یوزر باشید ! پیش تر WEBP در نسخه های قبلی استفاده میشد که همچنان در صورت عدم ساپورت مرورگر یوزر از WEBP استفاده میشودو اگر باز هم ساپورت نشود همان JPEG ساخته شده برای یوزر سرو میشود7. تغییرات کوچک و باگ فیکس ها این تغییرات نیازی به توضیح ندارند و صرفا برای کامل شدن این مطلب اورده شده انددر نهایت سپاس گزارم از اینکه این مطلب مفصل را مطالعه کردید ، اگر جایی از این مطلب مشکل فنی یا مشکل املایی داشت حتما در کامنت ها اعلام کنید و اگر مایل بودید با من در ارتباط باشید میتوانید لینکدین در لینکدین با من در ارتباط باشید https://www.linkedin.com/in/pouriya-babaaliدر نهایت اگر این مطلب را دوست داشتید جهت حمایت لایک کنید و به دوستانتون توصیه کنید این مطلب را مطالعه کنند ، در نهایت امیدوارم جامعه توسعه دهنده های ایران روز به روز پیشرفت کنند و به قول نکست بیاید وب ایران را سریع تر کنیم !!منبع :https://nextjs.org/blog/next-12

آپدیت جدید ری اکت(React) به نسخه 18 ، آیا آپدیت بزرگی در راه است ؟

Pouriya Babaali — Sun, 13 Jun 2021 20:53:52 +0430

بعد از آپدیت ری اکت به نسخه 17 و اضافه نشدن هیچ قابلیت جدیدی به ری اکت 17 بسیاری از توسعه دهندگان این لایبرری جذاب رو مایوس کرد ! اونا فقط جز چنتا ایمپرومنت ویژگی جدیدی رو از ری اکت 17 ندیدن ! بد تر از همه این بود که ری اکت 17 بعد از دو سال و نیم که از ریلیز شدن نسخه 16 و اضافه شدن ویژگی های جذاب هوک میگذشت ، ریلیز شد و حسابی باعث کلافه شدن دولوپرای ری اکت شد ! از طرفی نکست جی اس هم که خودش رو به یک فریم ورک تمام عیار تبدیل کرده بود این یاس رو تشدید میکرد ! دولوپرای ری اکت میدیدن که هروز یه ایمپرومنت جدید برای نکست میاد ، توبیاس کوپرز (فوندر وب پک ) به تیم نکست اضافه میشه ! کلی ایمپرومنت جدید برای نمایش عکس و فونت و سئو دارند ! کم کم اونایی که مجاب نشده بودند تا الان رو هم مجاب به این کوچ پر هزینه کرد ! و اما برگ برنده ری اکت برای خاموش شدن اینهمه اعتقاد قبل از کریسمس اتفاق افتاد و اونا با رسانه ای کردن قابلیت server component که چیزی شبیه به ssr با قابلیت کئوری مستقیم روی دیتابیس بود رو اعلام کردند و اجرایی کردنش رو به بعد کریسمس موکول کردند ! این قضیه تا حد زیادی آب روی آتیشی بود که تونست دولوپرای ری اکت راضی نگه داره !حدود یک ماه پیش نکست جی اس اعلام کرد که قراره کنفرانسی رو به رسم عادت سال گذشته اش به همراه تیم گوگل برگزار کنه و این کنفرانس 15 June برگزار میشه و قبلش باید از داخل سایتش تیکت بگیرید تا بهتون اجازه حضور در جلسه شونو بده ! درست 3 روز قبل از این اتفاق یعنی درست امروز 12 june ، ری اکت خیلی بی سر صدا از لانچ شدن نسخه 18 آلفای ری اکت پرده برداشت ! اونا اعلام کردند که خیلی تغییرات اساسی رو توی کدبیس ری اکت دادن و قراره خیلی تغییرات و ایمپرومنت های باحالی براش تو ماه آینده بیاد ! اونا اینشکلی زمان بندی لانچ نسخه 18 رو اعلام کردند :زمانی لانچ ری اکت نسخه 18در نهایت چیزی که مشخصه میتونیم تا اخر سال میلادی امسال ری اکت 18 نسخه نهایی رو داشته باشیم !ری اکت اعلام کرد که برای ادامه کار یه سری گروه های کاری تشکیل داده که دولوپرا میتونن باهم دیگه راجب نسخه 18 بحث کنند و ری اکت از این موارد فید بک بگیره ! و حالا چطور میتونیم ری اکت نسخه جدید آلفا رو نصب کنیم ؟// for react-alpha npm install react@alpha // for react-dom alpha npm install react-dom@alphaبا کامند های بالا میتونین ری اکت پروژه اتون رو به نسخه آزمایشی 18 ارتقا بدین ! راستی ری اکت معتقده آپدیت ری اکت اندازه یه بعد از ظهر یک روز ازتون وقت میگیریه و خیلی تغییرات اساسی تو کد بیستون نیاز نیست بدید بر خلاف تغییرات ری اکت 16 ! و حالا تغییرات اساسی ری اکت در نسخه پیش رو چیست ؟اولین و مهمترین تغییر ری اکت در کدبیس اش اتفاق افتاده ! و درست در جایی که کامپوننت ها شروع به ری رندر شدن میکنند ! حتما دلایل ری رندر شدن یه کامپوننت رو میدونین که یکیش setstate شدن استیت هست تغییری مهمی که ایجاد شده اینه که دیگر کامپوننت ها از بالا به پایین رندر نمیشن ! toptobottom rendering و در عوض قابلیت جدیدی اضافه شده که بهش میگن concurrency rendering یا رندر همزمان ! این قابلیت چیه و چیکار میکنه ؟تا ری اکت 17 اتفاقی که می افتاد رو در پاراگراف قبلی توضیح دادم تمام کامپوننت ها بعد از ری رندر از بالا به پایین رندر میشدن ! ولی خب همین باعث یه سری ساید افکت های خیلی فجیعی میشد که به قول ری اکت کلی اییشو براش داشتن ، هر روز که روی بعضی کد ها و بعضی ساختار ها باعث ایجاد مشکل میشده مثلا فرض کنین یک سایت با کلی کامپوننت و همزمان بخاطر یه اینپوت همه از بالا به پایین رندر میشدن این عملیات مکرر باعث ایجاد لگ در کامپوننت های دیگ میشد ! که ری اکت مجاب کرد Memo رو در اون زمان اضافه کنه ولی واقعیتی که بود ری اکت رو مجاب کرد که برای حل این مسئله یه راه حل بهتری رو بده ، برای همین یه تیم روی این قابلیت experimental کار کردند و حتی براش داخل خود داکیومنت ری اکت هم داکیومنت کامل نوشتن تا کم کم اونو تو نسخه 18 اضافه اش کنند ! این تغییر اساسی در کد بیس ری اکت باعث شد تا اونا دستشون برای اضافه کردن قابلیت های بیشتر و جذاب تر باز بشه !چگونه این قابلیت را فعال کنیم ؟برای فعال کردن این قابلیت در ری اکت نیاز نیست تغییرات زیادی در کدمون ایجاد کنیم ! صرفا باید در index.js یه سری تغییرات در کدمون بدیم ! به طور مثال ما قبلا این شکلی کامپوننت app رو به div با آیدی روت اپند میکردیم !import React from 'react'; import ReactDOM from 'react-dom'; const container = document.getElementById('root') ReactDOM.render(, container);و حالا تغییرات ما در ری اکت 18 اینچنین خواهد بود !import React from 'react'; import ReactDOM from 'react-dom'; import App from 'App'; const container = document.getEleementById('root') const root = ReactDOM.createRoot(container) root.render()با استفاده از این تغییر ما قابلیت concurrency Rendering رو فعال میکنیم ! و میتونیم از قابلیت های جذابش استفاده کنیم !اما این تمام کار نیست ! ما با تغییرات این بخش میتوانیم تغییرات دیگ ای رو هم اعمال کنیم :فعال کردن قابلیت hydrate : import ReactDOM from ‘react-dom’; import App from 'App'; const container = document.getElementById('root'); const root = ReactDOM.createRoot(container, { hydrate: true }); root.render();با اضافه کردن این متغیر میتوانیم این قابلیت جدید را به ری اکت اضافه کنیم ولی این قابلیت دقیقا برای ما چه کاری رو انجام میده ؟بزارید یک مثال از عملکرد Next js بزنیم !همانگونه که در تصویر میبینید برای ساخته شدن یک صفحه توسط نکست جی اس 4 مرحله طی میشودمرحله اول : تمامی صفحات ssr در ری اکت در زمان بیلد next js یکبار pre generate (یک غذای نیمه اماده رو تصور کنید ) میشوند ! زمانی که یوزر ریکوست برای صفحه ای میدهد آن صفحه سمت سرور کاملا ساخته میشود و با محتوای مورد نظر ما پر میشود !مرحله دو : صفحه سمت مرورگر فرستاده میشود و نمایش میدهد ، همزمان js های مورد نیاز نیست دانلود میشودمرحله سه : react به کانتنت ما تزریق یا hydrate میشود ! ( به این علت که ری اکت برای سرور به علت سر و کار داشتن با Dom که مستقیما مربوط به مرورگر است بیگانه است !) برای همین ما بعد از ساختن صفحات برای اینکه بتوانیم از قابلیت های ری اکت استفاده کنیم باید آن را به محتوایمان تزریق کنیم ( البته این حرکات رو نکست برامون میزنه)مرحله 4: نمایش کانتنت و محتوای ما به همراه react ! حالا ری اکت با hydrate چیکار میکنه ؟سال 2017 ، issue در گیت هاب ری اکت ثبت شد با این مضمون : با مثالی که زده کاملا متوجه مشکل میشید ! فرض کنید ما یه همچین JSX ای داریم :

و بعد میخواهیم این کار رو انجام بدیم :ReactDOM.render(

App

, document.getElementById('container') )خروجی ای که میگیریم این هست

App

شاید فک کنین چه باگ بدی ولی واقعا این باگ نیست ، ری اکت داره کارشو درست انجام میده ، فقط برای SSR شدنش خیلی باید حرفه ای عمل کنید ! برای همین بود که خیلیا از نکست استفاده میکردند !اتفاقی که اینجا میوفته یه دلیل خیلی ساده داره و اونم اینه که ری اکت میاد دو طرف مقایسه میکنه و چون ری اکت attribute هارو ضمیمه نمیکنه ( فارسی patch) برای همین اصلا براش مهم نیست اون کلاسش یه چیز دیگس این یه چیز دیگ با خود المنت کار داره ! میگه خب اونجا یه div میبینم اینورم div میبینم فقط تفاوتشون یه span عه پس اضافه اش میکنم به dom !همین اتفاق خیلی ساده میتونه خراب کاری زیادی رو سمت server ایجاد کنه چون وقتی کانتنت شما آمادست ! ری اکت رو اگر با reactdom.render اگر رندر کنین این به جای تزریق درست و جایگزینی مناسب این اتفاق عجیب براتون رقم میزنه و بعدش میگید ری اکت چقد بده ! ولی خب در عوض در این نسخه با اضافه کردن اون متغیر تمامی این اتفاقات درست میشه و اگرم همچین اتفاقی بیوفته طبق ادعای یکی از اعضای core تیم ری اکت پیام وارنینگ در کنسول براتون نمایش داده میشه ! 2. ارتقا render callbackتغییرات زیادی در این بخش شاهد نیستیم ولی دونستنش خالی از لطف نیست ! ری اکت قبلا بهمون اجازه میداد بتونیم بعد از رندر شدن همه کامپوننت ها ، کال بکی رو کال کنیم ! به طور مثال :import React from 'react'; import ReactDOM from 'react-dom'; import App from 'App' const container = document.getElementById('root') ReactDOM.render(, container, function(){ console.log('render only after initial component rendering') }) console.log('render at very last')حالا تغییری که در این قسمت شاهدش هستیم این هست که میتوانیم برای کال بک در نسخه 18 از requestIdleCallbacksetTimeOutاستفاده کنیم ! 3. UseTransitionدر نسخه جدید ری اکت دو هوک جدید تا الان قرار است که به ری اکت اضافه بشه اولین هوک usetransition است ، از قابلیت های این هوک با استناد به داکیومنت ری اکت این مورد اعلام شده است که which allows you “to tell React which updates are urgent, and which are not”.بله این هوک باشعور میتونه تشخیص بده که کدوم آپدیت از اون یکی اهمیتش بالاتره و اول بره اونو انجام بده !!اینجوری میشه برداشت کرد وقتی یه صفحه پر از کامپوننت داریم که مثلا یه سرچ اینپوت داریم که با تایپ کردن داخلش realtime دیتا فچ میشه و به یوزر نشون داده میشه و هر بار با تایپ کردن چون در پست زمینه ست استیت اتفاق می افته باعث ری رندر شدن همه این کامپوننت ها میشه و باعث ایجاد لگ در کل صفحه میشه و اعصاب یوزرا رو خرد میکنه ! طریقه استفاده از این هوک جذاب به این شکل هستش :import {startTransition} from 'react'; //ضروری است: Update input value as type setInputValue(input); startTransition(()=>{ //در وهله بعدی اجرا میشود: Show the search results setSearchQuery(input) });این قابلیت دقیقا باعث این میشه که کد ما آپدیت ترین استیت رو دریافت بکنه و از دریافت کرده استیت هایی که کاربر تایپشون کرده و بدرد نمیخورده خودداری بشه ! واقعا فوق العادست ! این هوک بیشتر برای دیتا فچ ، محاسبات سنگین و کارایی که نیاز به پردازش داره و زمان میبره میخوره ولی خب مواردی که ضرور هست رو باید خارج از این هوک بنویسیم مثل مثال بالا که اول ست استیت سرچ انجام شده و در پس زمینه داره فچ دیتا رو بر اساس اون استیت انجام میده !اساس این آپدیت کلا بر موضوع smooth rendering هستش یعنی اینکه همه چیز باید کاملا در اتقان صنع و در آرامش اتفاق بیوفته نباید ری رندر های متوالی باعث ایجاد فلاش یا لگ بشه و یوزر بخواد اذیت کنه !4.Strict Effectsقابلیتی در ری اکت و کلیت در زبان جاوا اسکریپت وجود داره به اسم strict mode ، کاری که این مود انجام میده رو با عنایت به داکیومنت ری اکت این شکلی میشه تعریف کردیک ابزاریه که اشتباهات کد زنی ما بهمون نشون بده و نزاره اپ کامپایل بشه تا زمانی که اون موارد درست شده و چون زبان جاوا اسکریپت به خودیه خود تا زمان کامپایل شدن هیچ خطایی به کاربر نشون نمیده این مود به ما کمک میکنه دیباگ کنیم کدمون رو و خب دقیقا داخل ری اکت هم فقط روی مود دولوپمنت اکتیو میشه و درست مثه تگ فرگمنت هیچ خروجی ui ای نداره !حالا Strict Effects چیکار میکنه برامون ؟این مود در strict mode میتونه فعال بشه و تمامی ساید افکت های اپلیکیشن ما رو بررسی کنه و خب عمده ساید افکت ها رو هم useeffect برای ری اکت ایجاد میکنه و باهاش میتونیم کلی کار باحال انجام بدیم ولی خب عملکرد این مود اینشکلیه که ساید افکت ها رو دو بار اجرا میکنه تا مطمین بشه ساید افکت خطرناکی برای اپتون پیش نمیاد ! درست مثه همون error معروف ، که وقتی بیش از اندازه set state صورت میگیره میبینمش اینم دقیقا وقتی ساید افکت در حسابی کد زده نشه بهمون خطا میده و خب میتونم بگم کمک خیلی خوبی میتونه بهمون بکنه ! قبل از این داستانا eslint پلاگینی برای ری اکت داده بود که به جرئت خوده منو خیلی جاها کمک میکرد مخصوصا موقع دپندنسی گذاشتن برای useeffect و پیشنهادم اینه فلن ازش استفاده کنید تا این ری اکت جدیده بیاد !! :)5. بهبود حالت SSRاین مورد خیلی بیشتر توی hydrate توضیح دادیم ولی خب به طور خلاصه فهمیدیم نکست جی اس چیکار میکنه اول کانتنت ما رو میسازه بعد جاوا اسکریپت رو لود میکنه بعد ری اکت رو به کانتنت ما تزریق میکنه ولی خب با همه خوبیاش یه ایراد بزرگ داره و اونم اینه تا زمانی که کانتنت لود شده سمت ما و هنوز جاوا اسکریپت و ری اکت بهش تزریق نشده ، صفحه ما با اولین سایت جهان وب تفاوتی نداره ! (شوخی) یعنی هیچ قابلیتی نداره هیچ کاریم باهاش نمیتونیم بکنیم و این مورد زمانی خودشو نشون میده که اینترنت ما خیلی ضعیفه و واقعا اعصاب کاربرا رو میتونه خرد بکنه ! اما خب ری اکت همینجوری ننشسته و براش برنامه ویژه داره !!2 پلن برای ارتقا SSR در ری اکت 18 برنامه ریزی شده !Streaming HTML (یا استریم کردن صفحه html)تصوری که از استریم کردن داریم یعنی به جای اینکه کل محتوا یهو بیاد سمتمون به شکل چانک چانک و کوچک کوچک بیاد تا زمان لود کامل سایت اولا یوزر یه چیزی داخل سایت ببینه و هم از نظر سئو بتونیم Time To Intract مون رو بیاریم پایین و بهبود سئو پیدا کنیم ! این اتفاقم دقیقا همینو برامون رقم میزنه ، قبلنا برای اینکه در CSR بتونیم یک کامپوننت رو وابسته به لودش توسط یوزر کنیم یعنی اینکه تا زمانی که یوزر سمتش نرفته یا کلیک نکرده لود نشه از LAZY استفاده میکردیم که بهش میگفتیم Code spiliting و همین امر در نکست جی با پکیج loadable اتفاق افتاده با این تفاوت که code spiliting نکست به شکل خودکار اتفاق میوفته و نیازی نیست ما دستی این عملیات انجام بدیم ولی خب ری اکت برای این مورد هم برنامه داره ! شما در lazy به کامپوننت suspense دسترسی دارید که میتونید تا زمان لود کامل کامپوننت به یوزر لودینگی نشون بدیم ولی خب همه این داستانا تا همین الان فقط سمت کاربر قابل پیاده سازی بود ! ولی الان یه خبر خوب دارم و اونم اینه تمام این اتفاقات سمت سرور نیز اتفاق میوفته یعنی شما فقط اون کامپوننتی که نیاز دارید براتون نمایش داده میشه .برای استفاده ازش اینشکلی کد میزنیم :

}> در اینجا کامپوننت article لود میشه ولی منتظر کامنت نمیمونه تا زمانی که خود کامنت توسط استریم شدن html ساخته بشه و اضافه بشه ، تو این فاصله یوزر میتونه به کامپوننت مقاله دسترسی داشته باشه !!!2.Selective hydrationپلن دوم ری اکت برای بهبود SSR ، اینه که هیچ کامپوننتی لنگ اون یکی کامپوننت نمیمونه تا صفحه جنریت بشه ! هر کامپوننتی که آماده بشه و کانتنت بهش برسه شروع میشه به هیدریت شدن توسط ری اکت و هیدریت شدن فقط یکبار اتفاق نمیوفته ! حتی انقدر این قسمت رو با وسواس پیش بردن که اگر یوزر اول به جای خاصی کلیک کنه یا اسکرولش رو قسمت خاصی باشه اول اون قسمت هیدریت میشه و ساخته میشه و بعد بقیه قسمتا !!! این مورد خیلی عجیب و خیلی فوق العادست !5. Suspense List قابلیت بعدی ری اکت لیست هایی هستند که شما میتونین به وسیله اون ها تعیین کنین که رندر شدن کامپوننت به چه شکل اتفاق بیوفته ! خب این یعنی چی؟ یعنی اینکه قبلا هیچ کنترلی رو کامپوننت هامون نداشتیم و هر کدوم زودتر از اون یکی تو هیج نظم و ترتیبی به محض گرفتن دیتا فچ میشدن ولی حالا با این قابلیت میتونیم تعیین کنیم که به چه نحوی قراره لود بشن به سه حالت دسته بندی میشن : همزمان با هم لود شن ، از اول لیست به اخر ، از اخر به اول لیست }> }> reveal order سه تا پراپ میگیره forwardsbackwardstogether که همینجور که از معنیش مشخصه اگر به ترتیب از اول به اخر باشه میشه فوروارد اگر برعکسش باشه میشه بکوارد و اگر باهم دیگه رندر صورت بگیره میشه together !6.useDeferredValueو در نهایت آخرین ویژگی که دومین هوکی هست که به این نسخه قرار بوده اضافه بشه همین هوک هستش ولی خب اگر لغوی معنیش کنیم به تعلل یا مکث یا معوق میرسیم و دقیقا کارشم همینه میتونه هر چیزی که بهش پاس میدین رو با تعویقی که خودتون براش تعیین میکنین بهتون پاس بده اینجوری میتونین بازهم استیت های بدرد نخوری که یوزر موقع تایپ کردن یا سرچ کردن مینویسه رو الک کنین ، همین ویرگول تصور کنین وقتی متنی مینویسین براتون میزنه در حال ذخیره ... ، حالا ویرگول وقتی ری اکت آپدیت بشه میتونه اولین نفر برای استفاده از این قابلیت باشه ، مثلا تعیین کنه استیت یوزر با تعلل 10 ثانیه یا 15 ثانیه اپدیت بشه !! اینجوری نیاز نیست مکرر برای آپدیت متن من ریکوست بزنه به سرور بیچارش !!استفاده از این قابلیت اینشکلیهfunction App() { const [text, setText] = useState(""); const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); return (

); }اون timeout که میگیره اون مقادر تعلل مورد نظر ماست ! بله بلاخره بعد از این توضیحات مفصل رسیدیم به انتهای مقاله ! اگر این مقاله رو دست داشتین لایک کنین و نظراتتون رو کامنت کنین برام ، نظرات و لایک هاتون باعث افتخار بنده است و خستگی ام این مدلی در میره ! منابعی که برای نوشتن مقاله استفاده شد :https://chan.dev/posts/concurrent-mode-is-dead/https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apjhttps://github.com/reactwg/react-18/discussions/4https://github.com/reactwg/react-18/discussions/37https://dev.to/workshub/react-18-is-here-what-s-new-ah4https://dev.to/muditdev/what-s-new-in-react-18-32m4در نهایت اگر نیاز هست با من ارتباط بگیرید میتونین از لینکدین بهم پیام بدین :https://www.linkedin.com/in/pouriya-babaali-2381661b5/

آپدیت جدید NextJs(نکست جی اس) این غول دوست داشتنی

Pouriya Babaali — Sat, 08 May 2021 23:53:11 +0430

بروز رسانی جدید نکست جی اس ، که حدودا کمتر از یک هفته است اعمال شده تغییرات جالبی رو برای این غول دوست داشتنی رقم زده ! نکست در نسخه 10.02 که به تازگی ریلیز شده ، خیال توسعه دهنده هاشو از کانفیگ وب پک 5 راحت کرده و بالاخره بعد از حدود 6 ماه از ریلیز شدن وب پک 5 ، رضایت داد که این مایگریشن رو انجام بده و از نسخه 10.01 به سمت وب پک 5 حرکت کرد و در آخرین تغییرات خودش اعلام کرده که اگر تنظیمات خیلی خاصی روی next.config.js خودتون انجام نداده باشید خیلی راحت از قابلیتای جدید و جذاب وب پک 5 که بیشترش تو بحث پرفورمنس و حذف و جایگزینی چندین پلاگین built-In خود وب پک بوده رو شامل میشه !این غول دوست داشتنی تغییرات عمده ای رو از نسخه 10 به بعد به خودش دید که خیلیاتون ازش خبر دارید شاید یکی از جذابتریناش اضافه شدن کامپوننت Image و مبحث بسیار جذاب و شیرین Lazy Loading در بحث تصاویر که خیلی از توسعه دهنده های فرانت به چالش میکشه و خیلی براشون جذابه که این مدل رو روی سایتشون اعمال کنند ، پیش تر مجبور بودند به شکل دستی با کد نویسی و شاید حساب کردن OffsetTop و یه سری از Event های تصاویر یا به قول بعضی از دوستان اضافه کردن اتریبیوت Lazy به تگ htmlاین قابلیت به هر نحوی که شده داخل سایتشون اعمال کنند ولی خب نکست در آپدیت نسخه 10 اش این قابلیت اضافه کرد و کار با تصاویر خیلی خیلی راحت کرد ، تصاویر در مرورگر هایی که WEBP ساپورت میکنند به شکل webp در میان و با پراپ quality به شکل درصد میتونین اعلام کنین که چقدر براتون کیفیتشو بیاره پایین که این واقعا تو بحث پرفورمنس فوق العادست ! من خودم عکس هایی که حجم 2 مگ داشتند رو تست کردم و کیفیتش تا 100 کیلوبایت کاهش میداد و با این تکنیک پرفورمنس خیلی خوبی ازش میشد گرفت !جدا از نسخه 10 ، نسخه جدید نکست جی اس قابلیت های زیر رو به نکست اضافه کرده که میتونه تغییرات مثبتی در جهت بهبود پرفورمنس نکست جی اس تلقی بشه ! اضافه شدن یک کش سیستم که باعث میشه فقط فایل هایی که تغییر کردن مجدد بیلد بشن و دیگه نیازی نیست همه فایلا یه باره از اول بیلد بشن ( که واقعا میتونم بگم از بحث زمانی یکم شاید اذیت میکرد و وقت گیر بود) ، طبق ادعا نکست تا 63 درصد بهبود داخل بیلد هاش انجام شده که خب رقم قابل توجهیه ! ارتقا فست رفرش دوست داشتنی! :طبق ادعا نکست ، فست رفرش اولویت بندی میشه و در هر بار رفرش شده چیزی نزدیک به 100 تا 200 میلی ثانیه سرعتش بیشتره ( البته که خیلی به چشم نمیاد و بیزنسی به قضیه نگاه کنین)کش سیستم سمت مرورگر هم بهتر انجام میشه به این شکل که با توجه به این که خود بیلد هم تشخیص میده کدوم فایلا تغییر کردن ( سیستم مشابه ویچرال دام رو اینجا برای فایلا پیاده سازی کردن و با یه diff میتونن تفاوتارو متوجه بشن درست چیزی شبیه به گیت ! ) این عمل باعث میشه مرورگر ها هم بهتر جاوااسکریپت و کانتنت های شما رو کش کنند !ارتقا چیزی که نکست بهش میگه tree shaken : در واقع اینطوری ازش برداشت میشه که ایمپورت هایی که استفاده نشدن تو کد میاد براتون توی بیلد پاک میکنه تا پرفورمنس بهتری بگیرید و خب این تو اپدیت جدید عملکردش بهتر شده و سرعت بهتری بهتون میدهیه چیز خیلی جالبی که اعلام کردند این بوده که خیلی وقت زیادی توی مایگریشن کردن به سمت وب پک 5 شدن نکست جی اس انجام شده و چیزی بالغ بر 340 هزار تست (integration tests) براش در نظر گرفتن !5. بهبود پرفورمنس خود نکست Cli و کامند هایی که برای ران کردن اپ انجام میشده ، سریعتر عمل میکنند مثل next dev که 33 درصد بهتر عمل میکنه و خب نشون میده که زوم این نسخه بیشتر رو مباحث cli و بیلد و ... بوده !6. یه اتفاق جالب تو این نسخه اینه که موقع نویگیشن روت ها اول فوکس نکست روی المنت هایی هست که یوزر میبینه یعنی خود کانتنت و بادی و بعد میاد بقیه جاها رو اپدیت میکنه و این خیلی نکته جالبیه تو گیفی که داخل سایت گذاشته نشون میده که وقتی نویگیت میکنه اول متن ها نمایان میشن و بعد تگ title آپدیت میشه این شکلی کانتنت زودتر برای یوزر نشون داده میشه و به قول خودشون دسترسی و تجربه کاربری بهتری داره .7.ویژگی جالب بعدی نکست جی اس قابلیتی هست که باعث میشه شما داخل ری دایرکت های سمت سرور و ری رایت های سمت سرور یک پراپرتی داشته باشید به اسم "has"! حالا این به چه کار میاد ؟ تصور کنین یوزری با مرورگر خیلی قدیمی وارد سایتتون شده که مثلا شما تو استایلا از flex استفاده کردین و ساپورت نمیکنه اون صفحه رو یا از یه قابلیتی که رو مرورگر قدیمی قابل اجرا نیست شما میتونین یه سری شرطاتون داخل has تعریف کنین ( اینجوری بخونین آیا این شرط را دارد (has)) و بعد از اینکه true برگردونه ریدایرکت یا ری رایت سمت سرورتون اجرا میشه ! حتی میتونین با این روش کوکی های سمت سرورتون رو هم بخونین و بعد اجازه دسترسی به یوزر بدین و اگر کوکی اش validate نبود ریدایرکتش کنین ! نمونه کد پایین تو تفهیم صحبتام کمکتون میکنه !module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'User-Agent', value: 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)' } ], destination: '/old-browser', permanent: false } ] }}این کد با چک کردن UserAgant و مرورگر کاربر در صورت نداشتن نسخه مناسب او را به صفحه مخصوص خود ریدایرکت میکندالبته قابلیت فیلتر کردن آیپی رو هم میشه باهاش انجام داد ! جدای از کلود فلر یا ابر اروان یا dns ها module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'x-vercel-ip-country', value: 'GB' } ], destination: '/:path*/uk', permanent: true } ] }}در نهایت با کوکی های سمت سرور هم این شکلی میشه مبحث شیرین احراز هویت رو پیاده سازی کرد module.exports = { async redirects() { return [ { source: '/:path*', has: [ { type: 'header', key: 'x-authorized', value: '(?yes|true)' } ], destination: '/dashboard?authorized=:authorized', permanent: false } ] }}8.بهبود فونت ها : نکست میگه 83 درصد وب داره از فونت استفاده میکنه ولی خب درصد اپتیمایزی خیلی خیلی کمتر از این حرفاست و صرفا داره ایمپورت میشه و ازش استفاده میشه ، کار خفنی که نکست انجام میده اینه که برای اون دسته از دوستان که خیلی First Contentful Paint (FCP) ، Largest Contentful Paint (LCP) علاقه دارند و عمدتا سئو کار هستند یه قابلیت جدیدی معرفی کرده که باعث میشه فونت ها به شکل این لاین به تگ استایلی که درون اون صفحه ای که برای شما در حال نمایش هست اضافه بشه این شکلی نکست جی اس معتقده پرفورمنس خیلی خوبی تو سئو گرفته !// Before// Afterالبته که نکست مبحث فونت ها رو مثه فیلم های اصغر فرهادی پایان باز میزاره و میگه داریم رو یه ویژگی جدید کار میکنیم که اگر اون بیاد میگید مگه میشه ؟ مگه داریم ؟ و اون هم انواع استراتژی های مختلف لود فونت هاست ، البته اینجا من هم براتون یه توصیه دارم و اونم اینه که حتما داخل فونتتون این پراپرتی رو بزارید و بکارتون میاد @font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-display: swap; با این کار شما به وب میفهمونید که تا زمانی که فونتم لود نشده فونت عادی خودتو بزار هر وقت لود شد جایگزین کن font-display: swap; و در آخر یه خبر خیلی خفن میده و میگه توبیاس کوپرز افسانه ای ( فوندر وب پک ) به تیم Vercel اضافه شده و مشخصه که چقد داره Vercel بریز بپاش میکنه ، البته اینو هم مشخص میکنه که چقد وب پک از این به بعد فوکس میکنه رو بحث پرفورمنس و آماده تغییرات خیلی خفن تو بحث کانفیگ وب پک روی نکست باید باشیم ! یه چیز خیلی جالب راجب کوپرز اینه که اولش میاد یه ریپو میزنه و باعث جلب شدن توجهات توسعه دهنده ها میشه کلی ایششو دریافت میکنه ولی خب یه روز یکی بهش میگه میتونی یه چیز خفن تر از این بزنی و همین جرقه ای میشه که اون ریپو رو میبنده و یه ریپو جدید میزنه به اسم وب پک امروزی ! خواستم اینو بت بگم تویی که اینو خوندی میتونی یه روز یه چیز خیلی خفنی بسازی پس بهانه رو بزار کنار نگو خسته ام نگو نمیشه ! فقط انجامش بده ! همین !کامنت و لایکاتون باعث دلگرمی عه !مخلصیم پوریا باباعلی !لینکدین من : https://ir.linkedin.com/in/pouriya-babaaliمنبع: https://nextjs.org/blog/next-10-2

قابلیت Server Components ، هدیه کریسمس React برای توسعه دهندگانش

Pouriya Babaali — Tue, 22 Dec 2020 18:27:37 +0330

قابلیت های جدید ری اکت 18 را از این مقاله میتوانید بخوانیدبعد از انتشار نسخه 16 ری اکت و با اضافه شدن قابلیت Hooks بسیاری از توسعه دهنده های این کتابخانه به فکر بروزرسانی کدهایی که نوشته بودند افتادند اگر چه که با کد های قدیمی هم اپلیکیشن هاشون کار میکرد ولی قابلیت Hooks و شخصی سازی و پرفورمنس فانکشنال کامپوننت ها (Functional Component ها ) اون ها رو برای بروزرسانی کد هاشون وسوسه میکرد .در یکی از صفحات داکیومنت ری اکت به مشکلاتی که کلاس کامپوننت ها (Class Component) داشتند اشاره شده که پیشنهاد میکنم از این لینک حتما مطالعه کنید . https://reactjs.org/docs/hooks-intro.htmlخیلی از مواردی که اون زمان برای توسعه دهنده های ری اکت اتفاق افتاده بود مثل گمراه شدن در استفاده از (this) یا لفظی که خود توسعه دهندگان ری اکت بهش اشاره کردند (Classes confuse both people and machines) که کلاس کامپوننت ها هم توسعه دهنده ها و هم ماشین ها رو دچار گمراهی کرده بودند این ذهنیت رو در توسعه دهنده های ری اکت جا انداخت که اون ها علاوه بر اینکه میتونن نقش خیلی جدی تو فیچر های آینده ری اکت یا حل مشکلاتش داشته باشند ، میتونند همه تقصیر ها رو هم گردن ری اکت بندازن!حدودا 5 ماه از نسخه بروز شده ری اکت یعنی ری اکت 17 میگذره ، ری اکت همونجوری که در داکیومنت رسمی خودش گفته بود هیچ ویژگی جدیدی به ری اکت اضافه نکرده [البته پیشنهاد میکنم حتما داکیومنت فارسی ری اکت رو که به این بخش میپردازه و من اون رو ترجمه کردم رو از این لینک مطالعه کنید] و بعد از دو و نیم سال آب پاکی ریخته رو دست توسعه دهندگانش ! البته کمی خواست در نسخه 17 ری اکت اونارو راضی نگه داره به طور مثال دیگ با قابلیت جدید JSX Transform نیاز نبود شما ابتدای هر خط ری اکت رو ایمپورت کنی و یا دیگ نیاز نبود مثل تغییر از ری اکت 15 به 16 کل کامپوننتاتو فانکشنال کنی میتونستی دو نسخه از ری اکت همزمان روی یه اپلیکیشن داشته باشی و یکیش رو به حالت Lazy Load در اپلیکیشنت داشته باشی ! اما خود توسعه دهنده های ری اکت هم متوجه این موضوع شدند که بعد دو و نیم سال با توجه به اون انتشار طوفانی نسخه 16 ، طرفداران ری اکت نیاز به حداقل یه فیچر جذاب دارند و اونارو نمیشه با این فیچر هایی که ری اکت 17 داره راضی نگه داشت !بنظر شخصی من ری اکت در رقابت با فریم ورک هاش (در عین دوستی خیلی نزدیکی که با هم دارند ) داشت خیلی عقب میوفتاد ! قابلیتی مشابه JSX Transform خیلی وقت بود در Nextjs وجود داشت ! خیلیا ری اکت رو در نسخه 17 محکوم به کپی برداری از فریم ورکش کردند و بیشتر از اینکه دنبال فیچر جدید باشه سعی کرده بود فیچر های فریم ورک هاش رو اضافه کنه به خودش ! ولی خب اینا همه تنها دلیل کوچ توسعه دهنده های ری اکت به سمت نکست نبود ! اونا دغدغه های مهم تری داشتند که تو ری اکت نتونستند راحت بهش برسند ! خیلی از توسعه دهنده های ری اکت به دلیل اینکه تازه کار بودند اطلاعات خوبی از وب پک نداشتند یا کد های بهینه ای نمیزدند ، با Code Spiliting آشنا نبودند و فکر میکردند که سئو سایت های ری اکت یک امتیاز منفی براشون در رقابت با رقیبانشون بشمار میره ، البته این موارد همه ی دلایلی که اونارو مجبور به کوچ به نکست کرد نیست اما شاید میتونم بگم اگر یه قابلیت SSR به ری اکت اضافه میشد خیلی از این تبدیل های پر هزینه انجام نمیشد ! خیلی تونستن این کار رو با اضافه کردن Express js و به شکل دستی انجام بدن و خیلی اپلیکیشن های جالب و جذابی شد ولی متاسفانه بسیاری از ساید افکت هایی که ایجاد میشد و دانش متوسط تیم های توسعه شاید باعث میشد عطای این کار رو به لقاش ببخشند ! و بله بالخره بعد این مقدمه طولانی میرسیم سر اصل مطلب و اون هدیه کریسمسی تیم توسعه ری اکت به توسعه دهندگانشه ! و اون هم چیزی نیست جز Server Components !!تیم توسعه ری اکت بعد از انتشار نسخه 17 و انتقاداتی که بهش وارد شد ، برگ آخرش رو برای روز های پایانی سال 2020 رو کرد ! و حالا این قابلیت چیه و به چه کاری میاد !اول از همه این مورد رو بدونید که این قابلیت در حال توسعه و تحقیق هست و هنوز به طور رسمی انتشار ندادنش و فعلا تنها چیزی که ازش داریم یه ویدیو و یه مخزن کد (ریپازیتوری) هست که پیشنهاد میکنم حتما ازش کلون بگیرید و با شکل و شمایل اتفاقاتی که داخلش میوفته آشنا بشید .https://github.com/reactjs/server-components-demohttps://youtu.be/TQQPAU21ZUwاین قابلیت به طور خلاصه RSC یا React Server Components نام داره ، در ویدیو معرفی که داخل سایت داکیومنت ری اکت هم هست ، یک کامپوننت به طور دمو ساخته شده و موارد و اتفاقات این ویژگی رو در اون بررسی میکنه ، پیشنهاد میکنم حتما اون ویدیو رو از دست ندین ! به طور خلاصه مواردی که این قابلیت قراره به ری اکت اضافه کنه این موارده : اجرای RSC فقط بروی سرور بدون بانل سایز ! (باندل سایز 0 ، دقیقا مشکلی که خیلیا با ری اکت داشتند باندل سایز های حجیم بود که باعث کند شدن اون کامپوننت و در نهایت کند شدن اپلیکیشنشون میشد )شما با RSC میتوانید مستقیما به دیتا های سمت سرور دسترسی داشته باشید به این شکل که شما میتونین مستقیما روی دیتابیس کئوری بزنید یا با میکروسرویس ها یا فایل سیستم های روی سرورتون دسترسی داشته باشید ( فقط میتونم بگم فوق العادست ! )با RSC شما میتونین تعیین کنین که کدوم کامپوننت سمت کاربر رندر بشند و کاربر فقط اون مقدار از کدی که میخواد و مورد نیازشه رو فقط مشاهده کنه ( دقیقا مشابه قابلیت های Code Spiliting و Lazy loading که ری اکت در داکیومنتش بررسی کرده بود اما این بار سمت سرور (مثل نکست ) که خیلیا ازش استفاده میکردند )استیت های شما با ریلود یا ری رندر شدن کامپوننت های سمت سرور یا RSC تون از بین نمیرن و تخریب نمیشن !کسایی که از React Lazy استفاده میکردند همزمان با اون از قابلیت به نام Suspense استفاده میکردند به این نحو که در هر حال تا زمانی که اون کامپوننت لود بشه یا حتی اگر لود نشه و خطا بخوره اون Suspense کال میشه و شما میتونین اونرو برای خودتون شخصی سازی کنین یا مثلا میتونستین لودینگ برای کامپوننتون بزارین ! و حالا این قابلیت در RSC ها هم وجود داره و اون ها به شکل واحد های استریم مانند به UI شما تزریق میشن این قابلیت میتونه به توسعه دهنده های ری اکت کمک کنه اونا تیکه تیکه به یوزر دیتا رو نشون بدن تا پرفورمنس اپلیکیشن بالاتر بره ! همه این ها با قابلیتی هم اسم و مشابه Suspense انجام میگیره ! توسعه دهنده های ری اکت میتونن کد هاشونو بین سمت سرور و سمت کاربر منتشر کنند به این نحو که شمه میتونین یه کامپوننت که برای نشون دادن یه متن ثابت یا استاتیک استفاده میشه رو سمت سرور بسازید بعد اون رو سمت کاربر داینامیک کنین اینجوری دیگ تنها زمانی که این وسط تلف میشه داینامیک شدن کامپوننته نه ساختنش ! و این میتونه کولاک کنه ! Zero-Bundle-Size Componentsاتفاقی که تا اینجا و تا همین زمانی که من برای شما مینویسم تو حوزه توسعه اپ های ری اکتی میوفتاد این بود که ما از یه سری پکیج ها استفاده میکردیم به طور مثال از Jalali Moment یا Moment برای تبدیل تاریخ هامون استفاده میکردیم یا از sanitize-html برای تمیز شدن کد های html از ckeditor یا ما بقی ادیتور ها استفاده میکردیم یا حتی خیلی از پکیج هایی که کار رو برامون راحت میکردند ولی خب همونجوری که میدونین همه این پکیج ها یک فضایی رو اشغال میکنن و زمانی که با gzip اون ها رو کامپکت میکردیم و webPack هم اون ها رو باندل میکرد به یک فضای اشغال شده ای میرسیدیم که بهش باندل سایز میگفتیم ! خب فرض کنین یه کامپوننت دارین که از هیچ کدوم از این پکیج ها استفاده نکرده بود ولی خب چون این پکیج نصب شده بود و ایمپورت شده بود باندل سایز داشت ! به طور مثال import Momentfrom 'moment'; // 35.9K (11.2K gzipped) import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped) function Calender({text}) { // some code for date converting and use sanitizeHtml // for cleaning Html From Ckeditor markups ! }و حالا میخواین بدونید بعد این قابلیت چه اتفاقی میوفته ؟ این شکلی میشه !import Momentfrom 'moment'; // Zero bundle size import sanitizeHtml from 'sanitize-html'; // Zero bundle size function Calender({text}) { // some code for date converting and use sanitizeHtml // for cleaning Html From Ckeditor markups ! }بله دقیقا چیزی که انتظار داشتیم ! پکیج های ما دیگ سمت سرور باندل سایزی رو به اپلیکیشن ما تحمیل نمیکنند و این فیچر به نظر میتونه یکی از انقلابی ترین قابلیت های ری اکت بین تمامی نسخه هایی باشه که تا الان ریلیز کرده !!!البته فلن باتوجه به اعلام تیم ری اکت منتظر بعد کریسمس باید باشیم و ببینیم که این فیچر که فلن در حالت توسعه و تحقیق تیم ری اکت هست کی قراره ریلیز بشه!ممنون از وقتی که قرار دادین و این مقاله رو مطالعه کردین اگر این مقاله رو دوست داشتین حتما برای دوستانتون بفرستین تا بتونن از اتفاقاتی که در حوزه ری اکت قراره بیوفته مطلع بشن !با من میتونین در لینکدین در ارتباط باشین لینک لینکدین من : linkedin.com/in/pouriya-babaali-2381661b5