30 سال پیش زمانی که تیم برنزلی (پدر کنونی اینترنت) ، وب جهان گستر (World Wide Web) را در بنیاد سرن خلق کرد ، از زمان اولین نسخه HTML که در سال 1991 ریلیز شد تا 1995 که Css و 1996 که جاوا اسکریپت به وب اضافه شدند میتوان به این شکل تصور کرد 5 سال وب بدون لباس و بدون مغز به حیات خودش ادامه داده است ! بعد از گذشت 30 سال تا به امروز کمتر کسی چنین تغییرات عمده و تکنولوژی های متنوع را متصور میشد.
از 2013 درست زمانی که اولین نسخه از ری اکت ریلیز شد ، دنیای وب دچار تحولات عمده تری شد انقدر دست توسعه دهندگان وب باز شد هر سال یک تکنولوژی جدید نشات گرفته از ری اکت خلق شده است ! از کلی کامپوننت جذاب و دیزاین سیستم و فریم ورک های متنوع ( Nextjs , Gatsbyjs ,AfterJs) و ...
اما درست امشب یعنی 26 اکتبر حدود ساعت 19:30 به وقت تهران ، کنفرانس جدید نکست جی اس ، حریفان را ناک اوت کرد البته نه کامل بلکه آنان را وادر به تغییر خواهد کرد ، تغییر برای بهبود ! ، این است زیبایی دنیای وب!
کنفرانس جدید نکست جی اس که امسال رنگ و بوی پنجمین سالگرد خلق این فریم ورک جذاب را داشت ، با شعار کنفرانس قبلی یعنی بیایید وب را سریع تر کنیم شروع شد ، در اول این کنفرانس ضبط شده به رسم کنفرانس های سال های گذشته تیم جذاب Vercel و فوندر آن را دیدیم که ایشان راجب راهی که تاکنون نکست جی اس برای سریع تر کردن وب رفته است صحبت کرد و بعد از آن به ویژگی های جدید نسخه جدید نکست یعنی نکست 12 اشاره کرد ، تا الان که حدود 2 ساعت از پایان کنفرانس گذشته است میتوانم به جد بگویم میدان بازی تغییر کرده است ( به زعم یکی از نئو بانک های ایران )!!
و اما این من و این شما و این تغییرات نکست جی اس در نسخه 12
چند ماه بیش درست زمانی که نسخه آلفا ری اکت 18 ریلیز شد تغییرات اساسی در بخش SSR ری اکت اتفاق افتاد که اگر دنبال کننده این موضوع نبودید میتوانید در مقاله قبلی من آن را مطالعه کنید !
نکست اعلام کرد که برخی از کد بیس های بزرگ دنیا را با نکست 12 سینک کرده و متوجه شده که این تغییرات در کدبیس های خیلی پیچیده و خیلی بزرگ نیز اعمال میشود .
این تغییرات فقط شامل swc نمیشود و در کنار تغییرات پرفورمنسی وب پک که فوندر آن (توبیاس کوپرز) در تیم Vercel کد میزند و یکی از کانتربیوت های جدید نکست هست اعمال شده است
کامپایل کد های جاوا اسکریپت به وسیله Rust تا 13 برابر !!!! سریع تر از Babel انجام میشود البته فقط جاوا اسکریپت نیست و styled-jsx خود نکست هم با این کامپایلر ، سی اس اس را کامپایل میکند ! ( عجیب اما واقعی)
این اتفاقات برای کتابخانه های emotion , styled component نیز به زودی خواهد افتادچراکه آن ها در پشت زمینه از babel استفاده میکنند اما نکست جی اس در نسخه های بعدی میخواهد این پکیج ها را نیز با swc پورت کند و از تمامی توسعه دهنده ها درخواست کرده تا کانفیگ های babel کاستوم خودشون رو برای نکست در لینک بخصوصی share کنند تا توسعه این فیچر در آینده با stability بیشتری انجام شود.
نکست اعلام کرده که بعد از این آپدیت علاقه به استفاده از زبان Rust در نکست بیشتر شده و آنان دو نفر جدید به تیمشان اضافه کردن !!! فوندر SWC و فوندر Parcel نیز به تیم توسعه نکست اضافه شدند و قطعا باید تغییرات اساسی و ماورایی بیشتری در آپدیت های بعدی نکست شاهد باشیم ! (تازه فوندر وب پکم هست ! چه بریز بپاشی !!) علاوه بر این ها از باقی افرادی که در این زبان زبده هستند دعوت به همکاری شده است ! پس میتوان اینگونه تصور کرد که Rust به بخش جدایی ناپذیری از نکست در نسخه های بعدی خواهد شد
میدلور ها در این نسخه از نکست به آن اضافه شدند ، عمده کارهایی که با میدلور میشود کرد میتوان از rewrite , redirect , stream html نام برد اما این تمام ماجرا نیست در ویدیو معرفی نکست 12 میدولر اینگونه معرفی شد
یکی از استفاده های جالبی که این قابلیت دارد این است که پیش از تمامی ریکوست های فرانت اجرا میشود مثلا شما میتوانید دسترسی آیپی های کشور های مختلف به سایتتان را ریستریکت کنید و اجازه ندهید آنان وارد سایتتان شود ( اونم از طریق فرانت !! جذاب نیست ؟ )
یا میتوانید لاگ سیستم بخصوص خود را ایمپلیمنت کنید و خیلی کار های جذاب دیگر !
برای استفاده از میدلور ها باید فولدر استراکچر این شکلی در پروژه و در فولدر page ایجاد کنید
pages/_middleware.js
export function middleware(req, ev) { return new Response('Hello, world!')}
بله و بلاخره ری اکت نسخه 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 } }
این قابلیت جدید که قبل از کریسمس معرفی شد باعث میشود شما بتوانید کل کامپوننت را در سمت سرور ایجاد کنید بدون که باندل سایزی در سمت کلاینت برای لود کامل به یوزر تحمیل کنید یعنی فرض کنید کامپوننت نقشه شما 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 جیزی شبیه این را پیاده سازی کردم ولی باز هم سمت سرور و کش کردن انقدر هم راحت نیست !!! اما با این نسخه سمت سرور تمامی فچ دیتا های سطح کامپوننت قابلیت کش شدن دارند )
در توضیح esmodule اگر کوتاه بخواهم توضیح دهم ماژول هایی هستند که در پس زمینه از WASM استفاده میکنند که کمک بسیاری میکند که هم وب و هم Nodejs آن ها را متوجه شود البته با توجه به باندل سایز بسیار کمی که دارند در ادامه میتوانید از این لینک مطالعه کنید
در نهایت میتوانید این کامپوننت ها را با ایمپورت به نکست اضافه کنید
import confetti from 'https://cdn.skypack.dev/canvas-confetti'
بر اساس ادعا نکست با ساخت ایمیج ها با این پسوند تا 20 درصد حجم تصاویر را کمتر میکند البته باید دقت کنید اگر مرورگر یوزر این پسوند را ساپورت نکند این تغییر در نکست انجام نمیشود و نیازی نیست نگران ساپورت مرورگر یوزر باشید ! پیش تر WEBP در نسخه های قبلی استفاده میشد که همچنان در صورت عدم ساپورت مرورگر یوزر از WEBP استفاده میشودو اگر باز هم ساپورت نشود همان JPEG ساخته شده برای یوزر سرو میشود
7. تغییرات کوچک و باگ فیکس ها
این تغییرات نیازی به توضیح ندارند و صرفا برای کامل شدن این مطلب اورده شده اند
در نهایت سپاس گزارم از اینکه این مطلب مفصل را مطالعه کردید ، اگر جایی از این مطلب مشکل فنی یا مشکل املایی داشت حتما در کامنت ها اعلام کنید و اگر مایل بودید با من در ارتباط باشید میتوانید لینکدین در لینکدین با من در ارتباط باشید
https://www.linkedin.com/in/pouriya-babaali
در نهایت اگر این مطلب را دوست داشتید جهت حمایت لایک کنید و به دوستانتون توصیه کنید این مطلب را مطالعه کنند ، در نهایت امیدوارم جامعه توسعه دهنده های ایران روز به روز پیشرفت کنند و به قول نکست بیاید وب ایران را سریع تر کنیم !!
منبع :
