چرا باید Next.js را به عنوان یک توسعه دهنده React یاد بگیرید

احتمالا همه ما با یک چیز موافق هستیم: React یکی از محبوب‌ترین راه‌حل‌ها برای ساخت برنامه‌های وب تعاملی است، مهم نیس که آن برنامه کوچک باشد یا بزرگ.

و توسط بسیاری از استارتاپ‌ها و شرکت‌ها استفاده می‌شود که در این روزها داشتن این مهارت بسیار با ارزش است.

من چند سال پیش Next.js را پیدا کردم و شیفته دستاوردهای این فریمورک شدم. در این مقاله، ماجراجویی‌های خود را با Next.js توضیح می‌دهم.

وب اولیه

در اواسط دهه ۲۰۰۰، هنگامی که وب، نوین و رو به رشد بود، توسعه‌دهندگان از صفحات HTML استاتیک به راه‌حل‌های مستحکم‌تر و پویاتر رسیدند.

این به ما امکان ایجاد صفحات با محتوای پویا را با استفاده از فناوری‌هایی مانند PHP می‌داد (توجه داشته باشید، JavaScript در این زمان بسیار نوین و غیر اجرایی بود).

سپس عصر JavaScript فرا رسید. مردم متوجه شدند که این زبان برای وب پشتیبانی می‌شود و می‌توان به وسیله آن کارهای زیادی انجام داد.

شما می توانستید فرم ارسال پویا، درخواست‌های HTTP پس‌زمینه، جلوه‌های پیمایشی خوب و حتی ایجاد صفحات وب را تنظیم کنید.

ظهور JavaScript و کتابخانه‌هایی مانند jQuery به توسعه‌دهندگان وب اجازه داد تا رابط‌های زیبا و کاملا قابل تنظیمی را با JavaScript ایجاد کنند.

مطمئنا فناوری تکامل یافته است، تلفن‌های همراه و رایانه‌های شخصی با رم و هسته بیشتر بهتر شدند، اما JavaScript سریع‌تر شروع به تکامل کرده است.

عملکرد بیشتر، ویژگی‌های بیشتر و فریمورک‌های بیشتر به معنای تجربه کاربری بهتر و توانایی ایجاد یک احساس شبیه‌سازی شده نرم‌افزار در وب است. اما این به معنای فشار بیشتر و بیشتر JavaScript بر روی دستگاه‌هایی است که نمی‌توانند با گسترش محدودیت‌های این زبان همگام شوند.

وب برای HTML ساخته شده بود

دستگاه‌های تلفن همراه قدیمی و کند کم‌کم شروع به تسلیم شدن کردند، زمان‌های بارگذاری به شدت افزایش یافت، تاخیرهای (لگ) بیشتری صورت گرفت، موتورهای JS قدرت کمتری داشتند و فقط تعداد زیادی JavaScript برای تجزیه وجود داشت.

با فریمورک‌هایی مانند React و Angular، شما اساسا باندل‌های عظیمی از JavaScript را برای کلاینت‌هایی که ابتدا باید صفحات HTML کوچک را بارگیری کنند، ارسال می‌کردید.

توسعه دهندگان وب که از عصر PHP به عصر JavaScript منتقل شدند، خیلی زود متوجه شدند که زمان زیادی را اتلاف کرده‌اند.

React برای تعامل و کامپوننت‌هایی با عملکرد بالا عالی بود، اما این واقعیت دارد که افراد با استفاده از این ابزارها برای ساختن همه چیز شروع به ایجاد مشکلاتی برای کلاینت‌ها کردند.

یک صفحه ساده درباره ما، که می‌توانست یک صفحه CSS یا HTML بسیار ساده استاتیک باشد، اکنون تبدیل به یک صفحه با باندل عظیم JS شده است. مرورگر در ابتدا باید بارگیری می‌شد، سپس تجزیه و بعد از آن اجرا شده و سپس DOM را تغییر می‌داد تا محتوا به نمایش درآید.

این اتفاق برای همه بد بود. کلاینت‌ها مجبور بودند زمان بارگذاری بیشتری را تحمل کنند. مرورگرها باید به سختی تلاش می‌کردند تا JS را اجرا کنند (مرورگرها به صورت بسیار تاثیرگذار HTML یا CSS را تجزیه و اجرا می‌کنند). و موتورهای جستجوگری مثل گوگل و بینگ به سختی موضوع صفحه شما را متوجه می‌شدند، زیرا کد منبع شما هرگز حاوی محتوای واقعی نبود.

مردم عاشق React و ابزارهای مشابه هستند. اما آن‌ها همیشه پیامدهای اجرای بیش از حد سمت کلاینت JS را درک کرده‌اند.

از طرف دیگر، آن‌ها عاشق نحوه کار PHP بودند، اما از معماری آن خوششان نمی‌آمد. پس راه‌حل کار در چه چیزی بود؟

Server-Side Rendering (SSR)

وقتی توسعه‌دهندگان فهمیدند که ارائه بیش از حد React به کلاینت‌ها یک مشکل محسوب می‌شود، چنین فکری کردند: آیا می‌توان در React کدنویسی کرد، اما اسناد HTML را برای کلاینت ارسال کرد؟

بعد از همه این‌ها، وقتی کد React اجرا شود، آنچه که در اختیار دارید یک سند HTML است. بنابراین آن‌ها این کار را انجام دادند و سرور ساید رندرینگ برای React به وجود آمد.

اکنون، با استفاده از SSR، می‌توانید کد React بنویسید، به نوعی آن را بر روی سرور اجرا کنید (که قدرت آن از دستگاه کلاینت معمولی شما بیشتر باشد، مانند تلفن همراه) و سپس سند HTML را برای کلاینت ارسال کنید.

انجام این این کار برای همه خوب است. شما به عنوان یک توسعه دهنده می‌توانید در React و فناوری مورد علاقه خود کدنویسی کنید و بازدیدکننده در سایت شما یک سند HTML ساده (با محتوای قابل مشاهده و کمی JS) دریافت می‌کند که باعث افزایش عملکرد وبسایت شما می‌شود. بعلاوه، گوگل هم از وبسایت شما خوشش می‌آید.

چه کسی چنین چیزی را نمی‌خواهد؟

اما خیلی سخت بود

قطعا SSR راه‌حل این مشکل به نظر می‌رسید. اما آن مشکل چه بود؟ تنظیم صحیح آن بسیار دشوار بود.

آیا می‌توانید برای صفحاتی که تغییر نکرده‌اند، فایل‌های HTML استاتیک ایجاد کنید؟ چگونه باید یک تجربه ناوبری یکپارچه را در وبسایت خود ایجاد کنید حتی اگر HTML از طرف سرور ارائه شده باشد؟ چگونه می‌توانید از بارگذاری بر روی سرور‌های خود بکاهید یا محتوای درخواستی را ایجاد کنید؟

و علاوه بر همه این‌ها، چگونه می‌توان کل این معماری را تنظیم کرد؟ مطمئنا، React و وب همه APIها را برای این سیستم فراهم می‌کنند، اما معمولا یک بار تنظیم می‌شوند.

معرفی Next.js

به معنای واقعی کلمه Next.js فریمورکی است که در بهشت متولد شده است.

۱. بهترین روش‌های سئو

۲. دارای عملیات‌های ذخیره‌سازی و بهینه‌سازی استاتیک است

۳. صفحات کاملی از رندر کردن سرور

۴.پشتیبانی کامل از React

۵. پشتیبانی از تابع Lambda

۶. و مزایای دیگر...

این برنامه کلیه تنظیمات عملکردی و توسعه مورد نیاز شما را با یک برنامه معمولی React خلاصه می‌کند و به شما این امکان را می‌دهد که فقط بر روی موارد مهم تمرکز کنید، مثل کد منطقی کسب و کار شما.

اولین تجربه استفاده من از Next.js به دو سال قبل برمی‌گردد. اما امسال ۹.۵ Next.js با ویژگی‌های بسیاری منتشر شد. و من فکر می‌کنم به راحتی می‌توان گفت که این یکی از قدرتمندترین ابزارهای موجود در اکوسیستم توسعه وب است، به خصوص اگر شما یک توسعه دهنده React باشید.

اگر شما در سال ۲۰۲۰ یکی از توسعه‌دهندگان React هستید، یکی از بهترین مهارت‌هایی که می‌توانید بیاموزید Next.js است. در ادامه برخی از مزیت‌ها به شما ارائه شده است:

۱. قطعا یک فناوری نو ظهور است، دارای فرصت‌ها و امکانات شغلی بیشتری است

۲. صفحات رندر گرفته شده توسط سرور به معنای عملکرد بهتر است، کلاینت‌های بیشتری برای شما به ارمغان می‌آورد.

۳. سئو کامل‌تری برای وبسایت شما؛ موتورهای جستجو عاشق وبسایت شما می‌شوند.

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

۵. یک مهارت فنی عالی در رزومه کاری شما

برخی از ویژگی‌های Next.js که من از دیدن آن‌ها هیجان زده شدم

Next.js به سرعت در حال تکامل و پیشرفت است. آن‌ها ویژگی‌های قدیمی را منسوخ کرده و همیشه چیزهای جدید و درخشانی را معرفی می‌کنند.

از امروز، من به شدت به این فریمورک علاقمند شدم و چند دلیل خود را برای انتخاب این فریمورک در ادامه ذکر می‌کنم:

۱. بازسازی استاتیک افزایشی پایدار

به زبان ساده، این ویژگی به شما این امکان را می‌دهد تا محتوای استاتیک را به صورت پویا تولید کنید. بیایید یک مثال از این مورد بزنیم:

فرض می‌کنیم که شما هم وبسایتی (به مانند وبسایت راکت) پر از مقالات آموزشی دارید. هنگامی که کسی به مسیر /news/[link] مراجعه می‌کند (این [link] می‌تواند هر چیزی باشد)، شما می‌خواهید که صفحه استاتیک را هر چه سریع‌تر به آن‌ها ارائه دهید.

اما ممکن است که شما دوست نداشته باشید که این صفحه به طور کامل در یک زمان بارگذاری شود، چون این امر زمان زیادی به طول می‌انجامد. در چند مورد، این موضوع اصلا در زمان ساخت امکان‌پذیر نیست.

همچنین، گاهی اوقات ممکن است محتوای شما تغییر کند، مانند ویرایش سریع وبلاگ، بنابراین شما واقعا نمی‌خواهید برای همیشه یک صفحه کاملا استاتیک داشته باشید. پس راه‌حل در چیست؟

با استفاده از ۹.۵ Next.js می‌توانید صفحات استاتیک را به صورت پویا در مسیر پویا تولید کرده و آن‌ها را نوسازی کنید. این بدان معناست که وقتی Next آن URL خاص را واکشی کند، آن را به عنوان یک صفحه استاتیک ذخیره کرده و هر زمان که کسی از آن مسیر بازدید کند به صورت استاتیک به آن سرویس می‌دهد. در عین حال، پذیرش مسیرهای جدید به صورت پویا وجود خواهد داشت.

نه تنها می‌توانید این کار را انجام دهید، بلکه با یک پارامتر اعتبارسنجی مجدد می‌توانید تعیین کنید که Next.js در صورت ایجاد تغییر، هر x ثانیه یک بار صفحات استاتیک شما را در بک‌گراند بروز کند!

۲. پشتیبانی از ۵ Webpack

Next.js از این قابلیت پشتیبانی می‌کند. این هیجان انگیز است‌، زیرا ۵ Webpack برخی از عملکردهای خوب و بهینه‌سازی بسته نرم‌افزاری را به همراه دارد و پشتیبانی از موارد منسوخ شده در ۴ Webpack را کاهش می‌دهد و باعث سبک‌تر شدن هسته می‌شود.

این بدان معناست که برنامه‌های Next.js شما سریع‌تر و قوی‌تر از همیشه خواهند بود.

۳. getInitialprops

من شخصا مفهوم اجرای یک عملکرد واحد در هر دو محیط getInitialProps را دوست ندارم.

خوشبختانه، Next.js فهمید که راه‌حل بسیار بهتری در دسترس است و آن‌ها getServerSideProps و getStaticProps را به عنوان دو روش عالی با نام‌های خوب آوردند.

getServerSideProps، همانطور که از نام آن مشخص است، به شما این امکان را می‌دهد که از طریق خود سرور، props را در صفحه Next.js خود تزریق کنید. و getStaticProps به Next.js این اجازه را می‌دهد تا خروجی‌های استاتیکی را در زمان ساخت ایجاد کند.

getStaticProps همراه با بازسازی استاتیک افزایشی از نظر من یک ویژگی کشنده است. شما مزایای زیادی از بک-اند پویا را بدون داشتن یک بک-اند پویا دریافت می‌کنید.

۴. ذخیره‌سازی مداوم برای باندل‌های صفحه

Next.js از ذخیره‌سازی مداوم برای صفحاتی که تغییر نکرده‌اند نیز پشتیبانی می‌کند. پیش از این، هنگامی که برنامه جدید Next.js را ارسال می‌کردید، کاربر مجبور بود تمام CSS یا JS را بارگیری کند، حتی اگر آن باندل‌ها بدون تغییر باشند.

۵. خارج از کادر پشتیبانی برای ماژول‌های Sass و تایپ‌اسکریپت

اگر یک چیز را بیشتر از Javascript دوست داشته باشم، آن تایپ‌اسکریپت است. همچنین از Sass نیز خوشم می‌آید.

بیشتر افرادی که من می‌شناسم از Sass برای راه‌اندازی CSS خود استفاده می‌کنند و این یک تجربه توسعه عالی را فراهم می‌کند.

مدت‌هاست که Next.js پشتیبانی عالی از تایپ‌اسکریپت را ارائه می‌دهد، اما اخیرا آن‌ها پشتیبانی مبتنی بر ماژول را برای Sass نیز اضافه کردند.

به نظر میاد آن‌ها از شما می‌خواهند که بهترین محصولاتی را که فقط بر روی منطق کسب و کار تمرکز دارند را توسعه دهید.

یادگیری Next.js

ما یک دوره ویدیویی اختصاصی در مورد Next.js با بهترین روش‌ها، ﺁخرین آپدیت‌های فریمورک و کارهای فوق‌العاده جالبی که شما می‌توانید با ﺁن انجام دهید را ایجاد کرده‌ایم. من تعدادی پروژه کامل را با این فریمورک به شما نشان خواهم داد تا درک عمیقی از نحوه کار کردن با این ابزار  را داشته باشید.

اگر به این دوره آموزشی علاقه‌مند هستید با استفاده از این لینک برای دسترسی کامل و ثبت‌نام کردن در وبسایت راکت استفاده کنید. اگر هم با مشکلی مواجه شدید با پشتیبانی ما در ارتباط باشید.

نتیجه‌گیری

من که به سراغ Next.js می‌روم. سرعت و توسعه مفهوم SSR و در دسترس قرار دادن آن برای بسیاری از مردم شگفت‌انگیز است.

منبع