بررسی next.js 13 - مقدمه

سلام خدمت همه دوستان
امیدوارم حال تک تک تون خوب باشه. قصد دارم مقالاتی رو درباره ی next 13 (app dir)، در خدمتتون بگذارم تا به رشد هم کمک کنیم.

خب اول از همه اینکه چرا نکست؟ بیاید بعضی ویژگی ها و قابلیت های این فریمورک قدرتمند رو بررسی کنیم تا دلیل محبوبیتش رو بدونیم.

1. مسیریابی (routing)
   یکی از ویژگی های خیلی خوب نکست سیستم روتینگ اونه که کار توسعه دهندگان رو برای ساخت مسیر های وب سایت راحت تر می کنه و دیگه نیازی نیست که از کتابخونه ای مثل react-router استفاده کنیم و فقط کافیه با استفاده نام فولدر ها مسیر های سایتمون رو بسازیم. همچنین میتونیم یک فایل layout، loading، error و ... برای هر صفحه یا یکی برای کل برنامه بسازیم که واقعا کار برنامه نویسا رو راحت تر میکنه.در جلسات بعدی بیشتر از روتینگ خواهیم گفت.
2. کامپوننت های سرور (server components)
   از قابلیت های جدیدی است که به ریکت اضافه شده و نکست هم از اون پشتیبانی میکنه.اگر بخوایم تک تک المان های سایت رو جدا کنیم و اون هارو کامپوننت بندی کنیم، می بینیم که بیشتر قطعات سایتمون به صورت غیر تعاملی هستند و صرفا قصد داریم که اونهارو فقط نمایششون بدیم.با استفاده از سرور کامپوننت ها می تونیم این اجزای غیر تعاملی رو سمت سرور رندر کنیم که قابلیت کش کردن داده هارو داره و باعث میشه سرعت و عملکرد صفحات بالاتر بره، همچنین سایز جاوااسکریپت تحویلی به کلاینت رو کاهش میده. چی از این بهتر؟
3. واکشی داده ها (data fetching)
   حتما تا حالا کلماتی مثل ssr (server side rendering) یا ssg (static site generation) به گوشتون خورده. ممکنه ما صفحاتی داشته باشیم که دیتای اونها ثابت باشن و یا خیلی تغییر نمیکنند، پس چه نیازیه که هر کاربری که وارد صفحه شد، به سرور ریکوئست یزنه و دیتا صفحات به ازای تمام کاربرانی که وارد سایت میشن، fetch بشه؟ قطعا یکی از بزرگترین قابلیت های نکست همینه، با استفاده از این مزیت یک بار دیتا رو سمت سرور واکشی می کنیم . از طریق دیتا بدست اومده، html مون رو سمت سرور تولید می کنیم، یا این که تعیین می کنیم مثلا هر 12 ساعت یک بار دیتای صفحه ای آپدیت بشه و html جدید تولید بشه، خب این خیلی بهتره و یعنی که هم سرعت بارگذاری به شدن افزایش پیدا میکنه و فشار وارده به سرور هم کاهش داده میشه، همچنین امنیت کد ها بالا خواهد رفت.از همه مهمتر این مورد برای seo به شدت مناسبه، چون تمام دیتای صفحه مثل head ها از همون ابتدا لود میشن که خب خیلی خفنه!
4. بهبود عملکرد
   برخی از بهینه سازی های تیم نکست و امکاناتی که در اختیارمون میگذاره باعث میشه که حجم صفحات کاهش داشته باشه که نتیجه ی همه ی اینها، افزایش سرعت لود صفحه و بهبود seo خواهد بود.برای مثال کامپوننت Image حجم تصاویر رو به شدت میتونه کاهش بده یا قابلیت بارگذاری تنبل (lazy loading) رو برای تصاویر فراهم کنه که باعث میشه تا زمانی که اسکرول به سمت تصویر رخ نداده، بی دلیل اون رو دانلود نکنیم. برخی از بهینه سازی رو برای سایر assets مثل فونت ها انجام میده، هدفشم یک چیزه، بهبود عملکرد.

دوستان سعی کردم تو این جلسه، دیدتون رو نسبت به این فریمورک قدرتمند باز کنم، البته که خیلی خیلی ویژگی های بیشتری وجود داره و همین هایی هم که اشاره کردم، در حد معرفی بود و هر کدوم حاوی نکات زیادی خواهد بود. سعی میکنم برخی از مطالب رو بتونم در پست های بعدی پوشش بدم.

تا جلسه بعدی مراقب خودتون باشید.