نبرد Gatsby در مقابل Next.js

قطعا دو مورد از فناوری‌های جذاب که برای توسعه دهندگان ری‌اکت بسیار مهم و ضروری است Gatsby و Next.js است. با وجود اینکه هر دو این ابزارها فوق العاده هستند و کاربردهای بسیار زیادی دارند اما تفاوت‌هایی در این رابطه وجود دارد. هدفی که ما در این مقاله دنبال می‌کنیم مقایسه کردن این دو مورد و کشف نقات قوت و ضعف هر کدام است. این مقاله براساس تجربیات یک توسعه دهنده حرفه‌ای نوشته شده است از این جهت سمت گیری در آن وجود ندارد.

Gatsby و Next چه هستند؟

هر دو فریمورک توسط React ایجاد شده‌اند. این چه مفهومی دارد؟

این بدان معنی است که شما تمام اصول React را دارید که به شما یک مجموعه کامل شامل create-react-app به علاوه ویژگی‌های اضافی مانند جعبه ابزار و دستورالعمل‌های کدنویسی را می‌دهد.

همانطور که در بالا ذکر کردم، در نگاه اول هر دو نسبتا شبیه به هم هستند:

ایجاد یک برنامه با boilerplate اجازه می‌دهد تا کدنویسی وبسایت به طور قابل توجهی سریعتر همراه با تجربه‌ای عالی برای توسعه دهنده باشد.

اما دو باور رایج وجود دارد:

• Gatsby.js فقط برای محتوای استاتیک است. در حالی که مدتی قبل فقط برای محتوای استاتیک که در CDN ذخیره می‌شد، مورد استفاده قرار می‌گرفت. اکنون Gatsby.js محصولی پیچیده را ارائه می‌دهد که ممکن است هم برای وبسایت‌های استاتیک و هم برای برنامه‌های پویا استفاده شود.
• Next.js تنها یک فریمورک رندرینگ سمت سرور است. البته شاید زمانی این درست بود، اما امروزه قطعا اینطور نیست. چرا که از نسخه 9.3 به بعد می‌توانیم انتخاب کنیم که کجا از آن استفاده کنیم: رندرینگ در سمت سرور یا ایجاد سایت استاتیک.

بیایید از ابتدا بررسی کنیم. ما یک پروژه جدید تولید می‌کنیم، آن را باز می‌کنیم و ساختاری را می‌بینیم که هر دو فریمورک به آسانی برای ما آماده کرده‌اند. در نگاه اول ممکن است یکسان به نظر برسد اما با بررسی جزییات می‌بینیم که کمی متفاوت است.

assetهای عمومی

پوشه‌ای به نام public شامل فایل‌های ساخته شده در مورد Gatsby.js و assetهای ثابت برای Next است. مورد آخر یک فایل next. برای فایل‌های ساخته شده ایجاد می‌کند.

در هر دو فایل‌های پیکربندی داریم که می‌توانیم تنظیمات اولیه پروژه را انجام دهیم. هر دو فایل‌های مختلفی را برای ما ایجاد می‌کنند. در Gatsby بسیاری از امور در آن جا جریان دارد که به دلیل پلاگین‌ها می‌باشد.

پلاگین‌ها، افزونه‌ها و کتابخانه‌ها

اکوسیستم پلاگین‌ها معمولا حول عملکرد و جامعه آن ساخته می‌شود، این ویژگی مهمی است که با افزایش سرعت کار قطعا متوجه خواهید شد. تصور کنید که برای همه موارد یک افزونه دارید، با حداقل زمان راه اندازی فقط کد را paste کنید و تقریبا هر ادغام خارجی را پیاده سازی کنید. جالب است، اینطور نیست؟ من مطمئنم که این یک ویژگی کاربردی برای بسیاری از توسعه دهندگان است.

Next این نوع قابلیت را ندارد، اما هر دو فریمورک از همه کتابخانه‌های React پشتیبانی می‌کنند. به طور خلاصه شما می‌توانید ادغام‌های خود را در هر دو فریمورک پیاده سازی کنید. این فقط یک مورد طولانی مدت در Next است، اما Gatsby این کار را سریعتر انجام می‌دهد (البته به پیچیدگی یکپارچه سازی هم بستگی دارد).

مسیریابی

یک پوشه "pages" وجود دارد که تمام کامپوننت‌های صفحه در آن قرار دارند. صفحات به طور خودکار با نام کامپوننت‌های داخل این پوشه تولید می‌شوند. برای مسیریابی بین صفحات داخلی هم باید از کامپوننت‌های ویژه استفاده کنید.

بقیه ساختار فایل زیاد مهم نیست، زیرا شما می‌توانید آن را به دلخواه سازماندهی کنید: کامپوننت‌ها، کانتکست، ابزارها و...

حس کدنویسی

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

مستندات

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

چه چیزی باعث برتری Gatsby می‌شود؟

به نظر من Gatsby.js دقیقا مثل یک قهرمان وارد عمل شد و نتیجه را تغییر داد. این ویژگی‌های بسیاری دارد که لیست کاملی از آنها را می‌توانید در وبسایتش پیدا کنید. می‌خواهم موارد مورد علاقه خودم را ذکر کنم.

پلاگین‌های Gatsby

قبلا هم اشاره کردم که گتسبی یک اکوسیستم از پلاگین‌ها را ایجاد کرده است. تقریبا برای هر آنچه که نیاز دارید می‌توانید یک پلاگین پیدا کنید: بسیاری از کامپوننت‌های گتسبی، پلاگین‌های منبع گتسبی، ادغام‌های گتسبی و موارد دیگر. همه چیز به صورت رایگان در پوشه پلاگین‌ها وجود دارد.

GraphQL

چیز شگفت انگیز دیگر در گتسبی وجود GraphQL برای همه کوئری‌ها در داخل و خارج از پروژه است. زمانی مجبور بودم از آن استفاده کنم، اما اکنون آن را بسیار مفید می‌دانم. شما هم می‌توانید همیشه درخواست‌های خود را در GraphQL Playground که همراه با پروژه شما در localhost در حال اجرا است بررسی کنید.

بهینه‌سازی تصویر

آخرین ویژگی این است که گتسبی بهینه سازی تصویر را ارائه می‌دهد. همچنین یک کامپوننت شگفت انگیز به نام gatsby-image را دارد و این کامپوننت همه کارهایی را که برای بهینه سازی تصویر نیاز داریم انجام می‌دهد. به این صورت که در هنگام بارگیری تصویر، یک افکت تار شدن بی نظیر دارد.

جامعه Gatsby

جامعه و پشتیبانی را فراموش نکنید. این یک قسمت مهم در هنگام انتخاب فریمورک است، من می‌گویم که هر دوی Gatsby.js و Next.js کار بزرگی در زمینه ایجاد جامعه انجام می‌دهند. در مورد انتخاب Gatsby.js می‌توانید به انجمن Discord آنها اعتماد کنید. همیشه می‌توانید پاسخی پیدا کنید و در آنجا گپ بزنید.

چه چیزی باعث برتری Next.js می‌شود؟

Next.js پلاگین خاصی ندارد و از GraphQL به صورت  out-of-the-boxاستفاده نمی‌کند. با اینکه دارای یک کامپوننت تصویر خاص است، اما هیچ افکتی ندارد.

Next.js دارای بسیاری از ویژگی‌های دیگر است که آن را مورد علاقه بسیاری قرار داده است.

توابع Serverless

به عنوان مثال پوشه "api" از ابتدا تولید می‌شود. من در بلوک قبلی به آن اشاره نکردم، اما مطمئنا ارزشش را دارد. وقتی یک پروژه در Vercel یا Netlify میزبانی می‌شود، هر فایل جاوااسکریپت موجود در این پوشه به عنوان یک تابع serverless اجرا می‌شود. این توابع منطقی احراز هویت کاربر، ارسال فرم، نمایش داده‌های دیتابیس، دستورات slack سفارشی و موارد دیگر را مدیریت می‌کنند.

SSG + SSR

یک چیز جالب دیگر در Next.js رویکرد ترکیبی آن است. این بدان معناست که شما می‌توانید تولید سایت استاتیک (SSG) و رندرینگ سمت سرور (SSR) را با هم ترکیب کنید. ما این امکان را با انتشار نسخه 9.3 دریافت کردیم و به نظرم بسیار مفید است.

روشی پیچیده برای بروزرسانی محتوا

بسیاری از ویژگی‌های عالی دیگری وجود دارد که می‌توانید در مستندات آنها پیدا کنید. می‌خواهم فقط به یک مورد دیگر اشاره کنم: بازسازی افزایشی استاتیک (ISR). البته پرداختن به آن در این مقاله نمی‌گنجد ولی در آینده مقاله‌ای در این مورد منتشر خواهیم کرد.

انجمن Next.js

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

در پایان چه چیزی به دست خواهیم آورد؟

هنگامی که پروژه شما کامپایل می‌شود، یک وب سایت یا برنامه سریع و بهینه شده خواهید داشت. شما فقط باید بستر میزبانی مناسب (Vercel ، AWS ، Netlify ، Cloudflare و ...) را انتخاب کنید و تمام.

پلتفرم‌های میزبانی موضوعی است که ارزش ایجاد یک مقاله مقایسه‌ای جداگانه را دارد که جز برنامه‌های آینده من است. چیزی که می‌خواهم اضافه کنم این است که هر دو شرکت پشت این فریمورک‌ها پلتفرم‌های خاص خود را دارند: Gatsby Cloud و Vercel.

جمع بندی

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