Gridsome چیست؟
۸ اسفند ۱۴۰۰

Gridsome یک فریمورک SSG مبتنی بر GraphQL و Vue است که بر روی سریعتر شدن وبسایت نهایی متمرکز شده و اولین مزیت این سرعت را میتوانیم بهبود وبسایت برای موتورهای جستجو (SEO) بدانیم. برنامههای توسعه داده شده با Gridsome شباهت بسیار زیادی به برنامههای Vue دارند اما زمانی که میخواهید برنامههای Gridsome را مستقر کنید، در واقع فایلهای استاتیک HTML، CSS و JavaScript را بر روی سرور قرار میدهید.
در ادامهی این مقاله با ما همراه باشید تا دلایل استفاده از فریمورک Gridsome را با یکدیگر بررسی کنیم.
۱) استاتیک بودن فایلهای نهایی
شاید تابهحال چیزهایی در رابطه با Jamstack شنیده باشید، کلمهی JAM مخفف کلمههای JavaScript، API و Markup است و شما با پیروی از این معماری میتوانید وبسایتهای سریع و ایمنی را توسعه دهید. همچنین این معماری هزینهها را برای شما کاهش میدهد و استقرار برنامهی نهایی برای شما سادهتر خواهد بود.
علاوهبراینها در این معماری برای ارائهی محتوا به کاربران دیگر نیازی به ارتباط با سرور نیست و تمام محتواها از قبل در فایلهای HTML قرار گرفتهاند. حال Gridsome از معماری Jamstack پیروی میکند و وبسایت نهایی را میتوانید یک پوشه از فایلهای استاتیک HTML، CSS و JavaScript فرض کنید که استقرار آن در هر جایی امکانپذیر است.
۲) راحتی نصب
ابزار Gridsome CLI این امکان را در اختیار شما قرار میدهد تا بهسادگی یک پروژهی جدید ایجاد کنید. برای نصب این ابزار تنها کافیست NodeJS بر روی سیستم شما نصب باشد و دستور زیر را در خط فرمان سیستمعامل خود اجرا کنید:
npm install --global @gridsome/cli
۳) سادگی ساخت یک پروژهی جدید
پس از نصب ابزار Gridsome CLI میتوانید با اجرای دستورهای زیر، یک پروژه Gridsome با نام awesome-blog
بسازید و آن را اجرا کنید:
$ gridsome create awesome-blog
$ cd awesome-blog
$ gridsome develop
۴) ساختار مناسب فایلهای پروژه
زمانیکه پروژهی awesome-blog
را با ویرایشگر متنی مورد علاقهتان باز کنید، متوجه خواهید شد که ساختار این پروژه بسیار مشابه پروژههای Vue است و فقط برخی فایلهای بهخصوص به این ساختار اضافه شدهاند. برای مثال یک فایل با نام gridsome.config.js
در پروژههای Gridsome وجود دارد که پیکربندیهای وبسایت شما را در بر میگیرد.
همچنین کامپوننتهای Vue در مسیر /src/layouts
قرار خواهند گرفت و شما میتوانید این کامپوننتها را در بخشهای دیگر پروژه استفاده کنید تا از تکرار کدها جلوگیری شود.
۵) routing خودکار
pages و routes
بهصورت خودکار هر کامپوننت Vue که در مسیر /src/pages
قرار بگیرد توسط vue-router
به یکی از صفحههای اصلی سایت تبدیل میشود و کاربران میتوانند به آن دسترسی داشته باشند. برای مثال پس از ایجاد فایل Contact.vue
در مسیر /src/pages
میتوانید در آدرس http://localhost:8080/contact به این صفحه دسترسی پیدا کنید.
البته لازم به ذکر است که این قابلیت در فریمورکهای دیگر مانند Gatsby نیز وجود دارد.
۶) pre-fetching
معمولا برای ایجاد لینک بین صفحهها در SPAهای توسعه داده شده با Vue از تگ <router-link>
استفاده میشود اما در Gridsome، تگ <g-link>
وجود دارد که ویژگی بسیار کاربردی pre-fetching را در اختیار شما قرار میدهد.
این قابلیت باعث میشود تا پیمایش وبسایت سریعتر انجام شود چون قبل از کلیک بر روی لینکها، صفحهی موردنظر fetch شده است.
۷) فشردهسازی پیشفرض تصاویر در حالت preview
در Gridsome تگ دیگری با نام <g-image>
وجود دارد که بسیار مشابه تگ <img>
است اما تفاوت اینجاست که این تگ در ابتدا یک نسخهی فشرده شده و تار از تصویر را به کاربر نشان میدهد و درنهایت پس از بارگیری کامل تصویر، نسخهی فشرده شده را با نسخهی اصلی جایگزین میکند.
۸) پشتیبانی از فایلهای Markdown
یکی از سادهترین روشهای شروع و استفاده از Gridsome این است که از فایلهای Markdown برای خودکار سازی مدیریت محتوا استفاده کنید. بهاین شکل شما templateهایی خواهید داشت که در آخر با محتوای فایلهای Markdown ادغام شده و به صفحههای HTML تبدیل میشوند.
۹) تنوع پلاگینها
اکثر پلاگینهای Gridsome، کتابخانههای JavaScript هستند که شما میتوانید آنها را با استفاده از npm نصب کرده و متناسب با پروژهی خود پیکربندی کنید. برای مثال plugin-sitemap، فایل sitemap وبسایت شما را بهصورت خودکار ایجاد میکند.
همچنین درصورتی که بخواهید از WordPress بهعنوان بکاند پروژهی خود استفاده کنید، میتوانید از پلاگین source-wordpress استفاده کنید.
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
![liara testimonial]()
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
![liara testimonial]()
jadi
با قدرت میتونم بگم تیم پشتیانی لیاراliara_cloud@یکی از بهترین تیمهای پشتیبانی که تا حالا دیدم. کارشون ارائه سرویسهای PaaS هست ولی من سوال در سطح برنامه خودمم(نه زیرساخت پلتفرم) که میپرسم بازم کامل و به موقع راهنمایی میکنن.
Amir
![liara testimonial]()
amirmazinani_ir
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
![liara testimonial]()
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
![liara testimonial]()
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
![liara testimonial]()
vanenshi