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 استفاده کنید.

منبع: https://vueschool.io/articles/vuejs-tutorials/9-reasons-to-use-gridsome-for-your-next-vue-application