Gridsome چیست؟


۸ اسفند ۱۴۰۰
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

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi