GatsbyJS چیست و چه کاربردی دارد؟

در این مقاله می خواهیم با فریم ورکی برای React به نام Gatsby js آشنا شویم! اگر بخواهم به صورت دقیق تر توضیح بدهم، Gatsby یک SSG است! SSG مخفف Static Site Generator یا سایت ساز ایستا است. قبل از اینکه بخواهیم توضیح بیشتری بدهیم باید بدانیم سایت ایستا چیست؟

سایت های ایستا (static sites)

وب سایت های ایستا اولین نوع وب سایت ها در تاریخ اینترنت هستند. این دسته از وب سایت ها فقط از HTML و CSS و JavaScript تشکیل شده و در سمت سرور ساخته می شوند، سپس صفحه آماده شده به سمت کاربر ارسال می شود. ما در react داده ها را از سرور گرفته و در سمت کلاینت (در مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه (render کردن آن) استفاده می کنیم. در این حالت صفحه را در سمت کلاینت ساخته و نمایش داده ایم اما سایت های ایستا چنین چیزی را ندارند بلکه کار با آن ها مانند سال های اولیه توسعه وب است که از PHP برای تولید صفحات HTML ثابت استفاده می کردیم!

تفاوت SSG و SSR

SSG یا Static Site Generator ها معمولا با SSR یا Server-side Rendering اشتباه گرفته می شوند بنابراین باید در مورد آن ها کمی توضیح بدهم. در SSR یک بخش front-end (سمت کلاینت) و یک بخش back-end (سمت سرور) را داریم. کدهای سمت سرور یک صفحه را می سازند و سپس صفحه آماده شده را به سمت کلاینت ارسال می کنند.

این در حالی است که در SSG هیچ کد back-end ای را به شکل SSR نداریم. در واقع تمام صفحات سایت شما در هنگام طراحی ساخته می شود و تکنولوژی هایی مانند Gatsby اصلا چیزی را در سمت سرور نمی سازند بلکه صفحات آماده شده را به سمت کاربر ارسال می کنند.

Gatsby چیست؟

همانطور که بالاتر توضیح دادم Gatsby یک SSG است اما از تکنولوژی های React و Webpack و GraphQL استفاده می کند. احتمالا می پرسید اگر Gatsby یک SSG است چرا باید از این تکنولوژی ها استفاده کند؟

با استفاده از React می توانیم بهترین سایت ها را بسازیم و در عین حال کدهای به روزی را بنویسیم. از طرف دیگر بسیاری از توسعه دهندگان با React کار می کنند، بنابراین استفاده از آن برایشان تبدیل به یک پیش فرض شده است. از طرف دیگر GraphQL یک زبان کوئری برای API ها است و به شما اجازه می دهد دقیقا داده های مورد نیازتان را مشخص کنید تا داده های اضافی را دریافت نکنید. همچنین کوئری های GraphQL به شما اجازه می دهند تا چندین داده مختلف را در یک کوئری دریافت کنید. در نهایت به وبپک (webpack) می رسیم که یک bundler است و کدهای جاوا اسکریپت شما را در یک فایل نهایی به نام bundle قرار می دهد.

ترکیب این سه ابزار با هم باعث می شود از تکنولوژی های روز دنیا استفاده کنید و در عین حال یک سایت استاتیک داشته باشید. علاوه بر این پلاگین های زیادی برای Gatsby وجود دارد که هر کدام کار توسعه شما را بسیار آسان می کند. این مسئله در کنار React و پلاگین های قدرتمند آن باعث می شود Gatsby js به غولی بزرگ در توسعه وب تبدیل شود.

مزایای Gatsby js

طبیعتا داشتن یک سایت استاتیک مزایای خودش را دارد. من می خواهم در این بخش به مزایای اصلی Gatsby بپردازم.

سرعت بسیار بالا

تمام توسعه دهندگانی که تجربه کار با Gatsby را دارند می دانند که وب سایت های ساخته شده با Gatsby به دلیل استاتیک بودن سرعت بسیار بالایی دارند. بر اساس تحقیقات منتشر شده توسط آقای Kyle Matthews وب سایت های ساخته شده با Gatsby سرعتی حدود ۲ تا ۳ برابر سایت های عادی دارند! چرا؟ به دلیل اینکه صفحات این سایت ها آماده و استاتیک است بنابراین نیازی به انجام کار خاصی در آن نداریم. سرور هیچ فایلی را تولید نمی کند بلکه فایل های آماده را به سمت کاربر ارسال می کند. تحقیقات افرادی مانند آقای Nicholas Feitel نیز این موضوع را تایید می کند که وب سایت های Gatsby حدود ۵ برابر وب سایت های سنگین (مانند LinkedIn) سرعت دارند.

جامعه بسیار بزرگ

Gatsby یک برنامه متن باز (open source) بسیار مشهور است که در گیت هاب بیشتر از ۵۰ هزار ستاره گرفته است، بیشتر از ۵ هزار release (به روز رسانی) داشته است، بیشتر از ۳۷۰۰ نفر توسعه دهنده همراه (contributor) دارد و توسط ۳۴۰ هزار پروژه گیت هاب استفاده می شود! طبیعتا چنین جامعه بزرگی در همه جا حضور دارد و به سوالات شما پاسخ می دهد. جامعه Gatsby تا این لحظه بیش از ۲۰۰۰ هزار پلاگین مختلف را برای آن نوشته است!

انتقال انواع داده

Gatsby آنقدر بزرگ است که می تواند انواع مختلف داده را از انواع مختلف منابع قبول کند. اگر به این صفحه از documentation رسمی آن نگاهی بیندازید می بینید که Gatsby می تواند داده ها را از GraphQL یا بدون GraphQL دریافت کند، می تواند داده ها را از فایل های ساده روی سیستم دریافت کند، می تواند آن ها را از یک پایگاه داده دریافت کند، می تواند آن ها را از API های خصوصی دیگر دریافت کند، می تواند آن ها را از CMS ها دریافت کند، می تواند آن ها را از JSON یا YAML دریافت کند و الی آخر!

routing فایل محور

در پروژه های Gatsby پوشه ای به نام pages وجود دارد که سیستم routing شما است! بله، هر پوشه و فایلی را درون آن بگذارید به عنوان یک route در وب سایت شما ظاهر می شود. این سیستم ساده باعث می شود توسعه routing بسیار سریع و قابل درک شود.

معایب Gatsby js

مانند هر تکنولوژی دیگری در دنیای وب، Gatsby نیز معایب خاص خودش را دارد که قبل از تصمیم به استفاده از آن باید با آن ها آشنا باشید.

شیب یادگیری تند

همانطور که توضیح دادم جامعه Gatsby بسیار بزرگ است و documentation مناسبی نیز دارد بنابراین راه یادگیری کاملا باز است اما شیب این یادگیری تند خواهد بود، یعنی برای یادگیری Gatsby باید زمان نسبتا زیادی بگذارید.

پیکربندی پیچیده

برخی از اوقات پیکربندی Gatsby با برخی تکنولوژی های مختلف مانند Node.js می تواند گیج کننده باشد و برای یادگیری آن ها نیاز به صرف وقت خواهید داشت.

کیفیت پلاگین ها

پلاگین ها توسط افراد محقق یا طرفدار Gatsby نوشته شده اند بنابراین برخی از آن ها از کیفیت بالایی برخوردار نیستند. قبل از استفاده از پلاگین ها حتما آن ها را از نظر کیفی بررسی کنید.

امیدوارم این مقاله به درک شما از Gatsby کمک کرده باشد.

منبع: وب سایت bigcommerce