Next.js چیست و از نسخه 14 فریمورک Next js چه چیزایی باید بدونیم؟!
ورژن جدید فریمورک Next.js همین چند روز پیش منتشر شد 🙂 از اونجاییکه تغییرات این نسخه از نکست جی اس نسبت به نسخه های پیش خیلی خیلی زیاد بود، تصمیم گرفتم که این مقاله رو بنویسم تا سیر تا پیاز نسخه جدید Next.js رو باهمدیگه بررسی کنیم 🙂 این مقاله برای 2 دسته از افراد زیر مناسبه :
- اگه تازه میخواید با فریمورک Next.js آشنا بشید یا یادگیریش رو شروع کنید.
- اگه با نسخه های قدیمی فریمورک Next.js آشنا هستین و میخواید با تغییرات نسخه 14 فریمورک Next.js آشنا بشید.
خب دیگه 🙂 بریم ببینیم فریمورک نکست جی اس چیست و چه مزایا و معایبی داره …
Next.js چیست ؟
نکست جی اس یک فریمورک ری اکتی هست که به ما اجازه میده وبسایت های سریع و کاربر پسند بسازیم. فریمورک Next js اومد تا برخی از نواقص ری اکت رو پوشش بده و یکسری قابلیت های اضافه تر در اختیار ما قرار بده.
این یعنی فریمورک Next Js همون ری اکت هست + یکسری قابلیت های اضافه تر!
پس با توجه به پاراگراف بالا پیشنهاد میکنم قبل از ادامه این مقاله، مقاله کتابخانه ری اکت چیست رو مطالعه کنید.
درواقع فریمورک Next.js به ما اجازه میده که از قابلیت رندر سمت سرور ( Server Side Rendering )، رندر استاتیک ( Static Site Generation )، تقسیم کد خودکار ( Automatic Code Spliting )، روتینگ ساده سمت کاربر ( Client Side Routing ) و .. استفاده کنیم.
اگه با قابلیت های بالا آشنا نیستید اصلا نگران نباشید 🙂 چون تو این مقاله میخوایم 0 تا 100 فریمورک Next.js رو باهمدیگه بررسی کنیم . . .
رندر سمت سرور و رندر سمت کلاینت
بطور کل 2 روش اصلی برای رندر صفحات اپیکیشن ما وجود داره:
- رندر سمت کلاینت ( Client Side Rendering – CSR )
- رندر سمت سرور ( Server Side Rendering – SSR )
این 2 روش تفاوت های خیلی زیادی باهمدیگه دارن. بریم یکم راجب هر کدومشون اطلاعات بدست بیاریم …
رندر سمت کلاینت به کمک نکست جی اس ( Client Side Rendering )
تو تکنیک رندر سمت کلاینت، سرور یک فایل HTML خالی برای کلاینت ارسال میکنه تا این فایل html. به مرور پر بشه.
بزرگترین مشکل CSR ( رندر سمت کلاینت ) مشکل در SEO ( سئو ) هست. زمانیکه خزنده های موتور های جستجوگر مثل گوگل وارد یکی از صفحات CSR میشن با یک فایل HTML خالی مواجه میشن!
و فکر میکنن این صفحه خالی هست! در نتیجه هیچ رتبه و اعتباری برای اون صفحه در نظر نمیگیرن!
اجازه بدید پروسه صفحات CSR ( Client Side Rendering ) رو باهمدیگه مرور کنیم :
مرحله 1 – کاربر وارد یک صفحه CSR میشه :
تو اولین مرحله کاربر یا خزنده گوگل وارد یکی از صفحات CSR ما میشه. در نتیجه یک درخواست به سرور ارسال میشه تا صفحه HTML دریافت بشه.
مرحله 2 – ارسال صفحه HTML خالی به کلاینت و مرورگر کاربر :
سرور یک فایل HTML خالی به کلاینت ( مرورگر کاربر ) ارسال میکنه. این فایل HTML صرفا شامل ساختار اصلی یک فایل HTML هست یعنی تگ های head,body و لینک فایل های js و css مورد نیاز اون صفحه.
اما این فایل HTML هیچ محتوایی نداره و کاملا خالیه!
مرحله 3 – اجرا شدن جاوااسکریپت
همونطور که تو مرحله قبل اشاره کردیم، لینک یکسری فایل css و js داخل صفحه HTML ما قرار داده شده که مورد نیاز اون صفحه هستند.
تو این مرحله این فایل های مورد نیاز دانلود و اجرا میشن. زمانیکه از فریمورک Next.js استفاده میکنیم، خود Next.js یکسری فایل JS میسازه و داخل فایلهای HTML ما قرار میده.
پس تو این مرحله فایلهای JS و CSS اجرا میشن تا صفحه HTML ما محتواش پر بشه.
مرحله 4 – پروسه API Call و رندر صفحه
تو این مرحله کد های صفحات ما اجرا و Render میشن و اگه API Call داشته باشن به سرور ارسال میشن. در نتیجه خروجی صفحه HTML ما تولید و ساخته میشه و داخل DOM یا همون Document Object Model قرار میگیره.
مرحله 5 – بروزرسانی مداوم محتوای صفحه
اگه کاربر با صفحه ما تعامل داشته باشه، محتوای صفحه ما بروزرسانی و آپدیت میشه. مثلا اگه دکمه دریافت لیست کاربران رو بزنه، باید یک API Call زده بشه و اطلاعات دریافت شده از سرور Render بشه و داخل صفحه نمایش داده بشه.
و تمام 🙂
بزرگترین عیب و مشکل رندر سمت کلاینت ( Client Side Rendering ) مشکل سئو هست! زمانیکه خزنده موتور های جستجوگر مثل گوگل وارد صفحات CSR ما میشن با یک صفحه خالی مواجه میشن و هیچ رتبه و اعتباری به صفحه CSR ما نمیدن!
راه حل اما سادست 🙂 بریم ببینیم راه حل چیه . . .
رندر سمت سرور به کمک نکست جی اس ( Server Side Rendering )
زمانیکه فریمورک نکست معرفی شد یک ویژگی خیلی خیلی جذاب به ما ارائه کرد!
این ویژگی چیزی نبود جز SSR یا همون Server Side Rendering ! اما رندر سمت سرور یعنی چی ؟
تو رندر سمت سرور، اطلاعات مهم و اولیه صفحات ما سمت سرور Render میشن. سپس یک صفحه HTML که شامل محتوای مهم صفحه ما هست ( متن ها، متاتگ ها، تصاویر و .. ) برای کلاینت یا همون مرورگر کاربر فرستاده میشه.
این موضوع باعث میشه تا زمانیکه ربات های موتور های جستجوگر ( مثل گوگل ) صفحات مارو باز میکنن، یک HTML خالی نبینن. رندر سمت سرور باعث میشه تا صفحات ما هیچوقت خالی نباشن.
زمانیکه موتور های جستجوگر به صفحات SSR ما برمیخورن، صفحه ما شامل متن، تصاویر، متاتگ های سئو و .. خواهد بود و در نتیجه هیچ مشکلی برای سئو سایت ما پیش نخواهد آمد 🙂
اجازه بدید پروسه صفحات SSR رو باهمدیگه مرور کنیم :
مرحله 1 – کاربر وارد یکی از صفحات SSR ما میشه
زمانیکه کاربر وارد یکی از صفحات SSR ما میشه، یک درخواست ( Request ) به سرور ارسال میشه.
مرحله 2 – پردازش سرور
تو این مرحله سرور متوجه میشه که کاربر میخواد یکی از صفحات SSR مارو مشاهده کنه. تو این مرحله سرور کد داخل صفحات مارو اجرا میکنه تا بتونه صفحه HTML مارو بسازه.
ممکنه تو صفحه ما چندین API Call وجود داشته باشه. زمانیکه سرور کد صفحه مارو اجرا کرد حالا به محتوای نهایی صفحه درخواستی کاربر دسترسی داره و میتونه فایل HTML درخواستی کاربر رو بسازه.
مرحله 3 – ساخت صفحه HTML درخواستی
تو این مرحله سرور فایل HTML درخواستی کاربر رو میسازه. ( این فایل html. شامل اطلاعات مهم و اولیه میشه )
مرحله 4 – ارسال صفحه HTML به کلاینت یا همون مرورگر کاربر
تو این مرحله سرور فایل html. ساخته شده رو به کلاینت یا همون مرورگر کاربر ارسال میکنه.
نکته ای که وجود داره این هست که این فایل html. صرفا شامل اطلاعات مهم اون صفحه میشه ( مخصوصا مواردی که برای موتور های جستجو مهم هستن مثل متن ها، تصاویر، متاتگ ها و .. )
مرحله 5 – پروسه Hydration
تو این مرحله پروسه Hydration شروع میشه. زمانیکه فایل html. توسط مرورگر دانلود و اجرا میشه، سپس کد های جاوااسکریپت ضروری اجرا میشن. مثل اجرا شدن Event Listener ها و کنترل کننده های صفحه.
و تمام 🙂
به این شکل صفحه SSR ما برای کاربر ساخته و نمایش داده میشه. اما مزیت این روش چی بود ؟
مزایای SSR ( رندر سمت سرور )
بریم ببینیم مهمترین مزایای SSR چیست ؟
سئوی عالی صفحات SSR :
بزرگترین مزیت Server Side Rendering این هست که موتور های جستجوگر ( مثل گوگل ) هیچوقت با صفحات HTML خالی مواجه نمیشن ( اتفاقی که تو رندر سمت کلاینت CSR میوفته و باعث میشه صفحات ما رتبه ای نگیرن ).
بهینه تر شدن صفحات ما :
صفحاتی که بصورت SSR هستن خیلی سریعتر برای کاربر بارگذاری میشن چون تو صفحات SSR اطلاعات مهم بصورت فوری برای کاربر ساخته و ارسال میشه. همچنین سرعت پردازش سرور خیلی بیشتر از سرعت پردازش سمت کلاینت ( کاربر ) هست.
این موضوع مخصوصا برای کاربرانی که دستگاه های قدیمی و ضعیف دارن به چشم میاد.
پیش نمایش صحیح در شبکه های اجتماعی:
زمانیکه کاربران ما لینک صفحات مارو داخل شبکه های اجتماعی به اشتراک میزارن، خزنده های اون شبکه اجتماعی HTML صفحه مارو تجزیه میکنن تا بتونن یک پیش نمایش از صفحه ما تو شبکه اجتماعی خودشون نشون بدن.
اگه همین الان لینک همین مقاله یا هر صفحه ای که سمت سرور رندر شده رو داخل تلگرام بزارید، میبینید که خزنده تلگرام وارد اون لینک میشه تا یک پیش نمایش از اون صفحه به شما نشون بده. و این اتفاق صرفا برای صفحات SSR میوفته و اگه صفحه ما Client Side Rendering باشه هیچ پیش نمایشی از اون صفحه نمایش داده نمیشه!
چون خزنده اون شبکه اجتماعی با یک HTML خالی مواجه میشه!
نمره FMP بالا در صفحات SSR :
یک شاخصی برای صفحات وب وجود داره به اسم FMP ! این شاخص یعنی محتوای اصلی و ضروری صفحه ما تو چه مدت زمانی دریافت شده. هرچه نمره FMP پایین تر باشه، به این معنی هست که محتوای ضروری، سریعتر به کاربر نمایش داده شده و این فوق العادس!
تکنیک SSR ( رندر سمت سرور در فریمورک نکست جی اس ) باعث میشه شاخصه FMP اپیکیشن ما خیلی عالی باشه 🙂
سرور کامپوننت و کلاینت کامپوننت !
تو فریمورک Next.js ما میتونیم مشخص کنیم که کامپوننت های ما سمت سرور رندر بشن یا سمت کلاینت!
همین موضوع باعث میشه که اپیکیشن ما Performance بهتری داشته باشه.
بریم ببینیم سرور کامپوننت و کلاینت کامپوننت دقیقا چی هستن …
سرور کامپوننت ( RSC / React Server Component )
نسخه 13 نکست جی اس با همکاری React نسخه 18 ساخته شده. یکی از ویژگی های جدید React 18 سرور کامپوننت ( Server Component ) بود.
زمانیکه یک صفحه در Next.js بارگذاری میشه، نسخه اولیه HTML اون در سمت سرور Render میشه و به مرورگر فرستاده میشه.
این صفحه HTML به مرور در سمت کلاینت کامل میشه. همین موضوع به کاربر این اجازه رو میده که بتونه تعامل بیشتر و بهتری با صفحه داشته باشه.
حالا شاید این سوال برامون پیش بیاد که چه زمانی باید از Server Component و Client Component استفاده کنیم ؟
تو جدول زیر میشه دید که چه زمانی باید از Client Component و Server Component استفاده کرد :
طبق تصویر بالا، میشه تفاوت سرور کامپوننت و کلاینت کامپوننت رو متوجه شد.
رندرینگ در Next.js به چه روش هایی میتونه انجام بشه ؟
فریمورک Next.js چهار استراتژی رندر در اختیار ما میزاره که هرکدوم کاربرد و ویژگی های خاص خودشون رو دارن. این استراتژی های رندرینگ عبارتند از :
رندر سمت سرور ( SSR )
رندر سمت کلاینت ( CSR )
رندر استاتیک ( SSG )
رندر هیبرید ( Hybrid Rendering )
رندر ISR یا همون Incremental Static Regeneration
حالا بریم ببینیم هرکدوم از این استراتژی های رندر چه ویژگی هایی دارن و مناسب چه زمان هایی هستند.
Client Side Rendering یا همون CSR
کمی بالاتر درموردش صحبت کردیم و گفتیم که رندر در این استراتژی، سمت کاربر ( کلاینت ) صورت میگیره.
Server Side Rendering یا همون SSR
کمی بالاتر درموردش صحبت کردیم و گفتیم که در این استراتژی، رندر سمت سرور صورت میگیره.
Static Site Generation یا همون SSG
تو این روش، صفحات ما در زمان build اپیکیشن ساخته میشن، سپس کش میشن و از طریق CDN در دسترس هستن. رندر با این روش ( Static Rendering ) برای محتواهایی که تغییر زیادی ندارن عالیه.
صفحاتی مثل وبلاگ، محصولات و…
صفحات SSG در زمان Build اپیکیشن ساخته میشن و بصورت Static نگهداری میشن.
Hybrid Rendering
این استراتژی به ما اجازه میده از ترکیب SSR و SSG برای صفحات خودمون استفاده کنیم.
Streaming
تو این روش محتوای صفحه ما به تدریج توسط سرور، رندر میشه.
رندر ISR یا همون Incremental Static Regeneration
سیستم روتینگ در فریمورک Next js چطوریه ؟
فریمورک Next js به ما اجازه میده روتینگ رو خیلی ساده و آسون پیاده سازی کنیم. زمانیکه از ری اکت استفاده میکردیم باید از کتابخانه جانبی react-router برای مدیریت روتینگ استفاده میکردیم. اما تو Next.js دیگه خبری از react-router نیست!
فریمورک نکست جی اس از File-Based Routing استفاده میکنه. اما این یعنی چی؟
زمانیکه ما یک کامپوننت داخل پوشه pages میسازیم، در عمل یک Route هم ایجاد کردیم. یعنی اگه داخل پوشه pages یک کامپوننت با نام about.js بسازیم، یک Route هم ایجاد کردیم! در نتیجه اگه کاربر آدرس about/ رو در مرورگر وارد کنه، کامپوننت about رو خواهد دید.
این یعنی فریمورک Next.js روتینگ رو بصورت داخلی داره مدیریت میکنه و دیگه نیازی به کتابخانه های جانبی برای این قضیه نداریم!
بهینه سازی تصاویر در Next.js چطوریه ؟
جالبه بدونیم که فریمورک Next js تصاویر اپیکیشن مارو بهینه سازی میکنه! تیم توسعه فریمورک نکست جی اس تگ <img> رو توسعه دادن و کلی تغییرات روش انجام دادن. نتیجه این تغییرات یک کامپوننت به اسم <Image> شده که بشدت کاربردیه!
کامپوننت Image که توسط خود Next.js توسعه داده شده سایز تصاویر مارو بر اساس سایز صفحه کاربر تنظیم میکنه. همچنین حجم، ریزولیشن و فرمت تصاویر رو برای بهینه کردن تصویر تغییر میده.
جدای از همه این موارد در حین بارگیری تصاویر از سرور، یک حالت لودینگ ( Loading ) داخل تصاویر به نمایش در میاد که باعث میشه اپیکیشن ما UX بهتری داشته باشه.
تقسیم کد ( Code Spliting ) در فریمورک نکست جی اس چطوریه ؟
فرض کنید اپیکیشن ما خیلی بزرگ شده و 100 تا کامپوننت ( صفحه ) داره. حالا اگه کاربر وارد صفحه اصلی ما بشه یک فایل js و یک فایل css بزرگ براش دانلود میشه که شامل logic تمام 100صفحه و css تمام 100 صفحه میشه! و این اصلا خوب نیست چون کاربر صرفا خواسته صفحه اصلی رو مشاهده کنه. ( نه تمام صفحات )
اتفاقی که باید بیوفته این هست که صرفا باید یک فایل js و css کوچک که فقط مرتبط با صفحه اصلی هستن برای کاربر دانلود بشه.
ویژگی Code Spliting در Next.js دقیقا همین کار رو برای ما انجام میده.
ویژگی Code Spliting کد های مارو به فایل های کوچک تقسیم میکنه و کاربر صرفا همون فایلهایی که نیاز داره رو دانلود میکنه.
یعنی اگه کاربر وارد صفحه Contact بشه، صرفا یک فایل css کوچک ( شامل استایل های صفحه Contact ) و یک فایل js کوچک ( شامل js های صفحه Contact ) دانلود میکنه.
همین مورد باعث میشه کارایی اپیکیشن ما تا حد خیلی خیلی زیادی افزایش پیدا کنه.
یادگیری Next.js سخته ؟
از اونجاییکه فریمورک next.js مبتنی بر ری اکت هست ( نکست جی اس همون ری اکت هست + یکسری ویژگی و API اضافه ) یادگیری Next برای کسانی که به ری اکت تسلط دارن سخت نیست!
اما برای شروع یادگیری فریمورک next.js باید ابتدا یادگیری ری اکت رو به اتمام رسونده باشیم.
ری اکت و نکست جی اس چه تفاوت هایی باهمدیگه دارن ؟
حالا که با فریمورک Next js آشنا شدیم، شاید این سوال برامون پیش اومده باشه که اصلا فرق Next js و React چیه …
تفاوت از لحاظ Performance ( بهینگی )
میشه گفت که اولین تفاوت ری اکت و نکست جی اس در زمینه Performance هست. اپیکیشن هایی که با Next js پیاده سازی میشن بهینه تر هستن.
چون فریمورک Next.js اصولا یک Static Site Geneation هست و صفحات مارو pre-render میکنه ( در زمان Build ) و لود صفحات ما برای کاربر خیلی خیلی سریعتر میشه! همچنین تو Next.js میتونیم از رندر سمت سرور ( Server Side Rendering ) استفاده کنیم که کمک میکنه رندر صفحات ما خیلی خیلی سریع انجام بشه.
رندر سمت سرور و سئو !
فریمورک Next.js از SSR پشتیبانی میکنه و کمک میکنه صفحات اپیکیشن ما سئو بشن درحالیکه تو ری اکت بصورت پیشفرض خبری از SSR نیست و صفحات ما قابلیت سئو شدن ندارن! ( هرچند با برخی ترفند ها میشه اپیکیشن های ری اکتی رو SSR کرد )
بیاید برای درک بهتر تفاوت ری اکت و next به جدول زیر نگاهی بندازیم :
نوع مقایسه
ری اکت
نکست جی اس
بهینگی ( Performance )
بصورت پیشفرض نسبت به Next.js بهینگی کمتری داره مثل عدم پشتیبانی از code spliting و ..
خیلی بهینه هست به لطف وجود SSR و SSG و ..
پروسه یادگیری
برای کسی که در نقطه 0 هست ممکن است کمی پیچیده و زمانبر باشه!
برای کسی که به ری اکت تسلط داره، بسیار آسونه!
تنظیمات و شخصی سازی
قابل شخصی سازی
قابل شخصی سازی
جامعه آماری
بزرگ با آموزش ها و مستندات خیلی زیاد!
کوچک اما مستندات و آموزش های خیلی زیاد!
سئو
مشکل در زمینه سئو اما قابل حل
خیلی خیلی Seo Friendly !
بهینه سازی تصاویر
عدم پشتیبانی بصورت داخلی اما امکان انجام به کمک کتابخانه های جانبی
پشتیبانی بصورت داخلی
ری اکت بهتره یا Next.js ؟
با توجه به توضیحات بالا بنظر شما ری اکت بهتره یا فریمورک نکست ؟
صادقانه بخوایم بگیم هیچ بهتر یا بدتری وجود نداره چراکه ما بر اساس نیاز پروژه خودمون باید یک انتخاب مناسب داشته باشیم.
بطور مثال اگر قصد پیاده سازی یک داشبورد داریم ( داشبورد ها نیازی به سئو ندارن ) طبیعتا ریکت انتخاب بهتریه. اما اگه قصد پیاده سازی یک سایت وبلاگی یا فروشگاهی داریم ( نیاز به سئو ) طبیعتا Next.js انتخاب بهتریه!
جمع بندی
تو این مقاله سعی کردم هرچیزی که باید از فریمورک next js بدونیم رو مطرح کنم و باهمدیگه یاد بگیریم 🙂 این مقاله مرتبا بروزرسانی میشه و مطالب جدیدتر بهش اضافه میشه. همچنین قراره تو فِرانت اِندی مقالات آموزشی در زمینه Next.js مرتب منتشر بشه.
امیدوارم متوجه شده باشید که فریمورک Next.js چیست و چه ویژگی هایی در اختیار ما میزاره 🙂
اگه در راستای بهبود کیفیت مقالات نظر یا پیشنهادی داشتید یا سوالی براتون پیش اومد حتما کامنت بزارید 🙂
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
چه وبلاگ خفنی 🙂🙂
هر پستی رو باز میکنم هم خیلی روون و هم کاربردی توضیح داده شده
مرسی واقعا
سلام و درود
خوشحالم که مقالات برات مفید واقع شدن 🙂 و ممنونم از انرژی مثبتت 🙂
موفق باشی 🙂
خیلی نکات کلیدی و بدرد بخوری گفتین
خیلی مواقع به خاطر عدم توجه به این نکات دچار سردرگمی های بزرگی میشیم.
برقرار باشید.
سلام علیرضا جان
مرسی از نظر لطفت و خوشحالم که این مقاله برات مفید واقع شده 🙂
موفق باشی