How it works

A quick walk-through of the core concepts of Gridsome

Pre-rendering

The GraphQL data layer

This is where all the data in a Gridsome project is located. Add data from any data sources with Source plugins or with the Data Store API. Data can be queried with GraphQL queries.

The GraphQL data layer makes it very easy to work with data, and you don't need to deal with rest APIs. You don't need to know much about GraphQL to get started.

Learn more about Querying data here.

Vue.js for templating

Gridsome uses Vue.js as frontend framework. Vue is an approachable, simple & fun framework for building fast interfaces. Vue now has the most GitHub stars of any JavaScript UI library. Big companies like Alibaba, Adobe, GitLab is using Vue.js. Vue is famous for its intuitive design and shallow learning curve. This means it's easy to train staff in, even non-frontend devs and designers. Since developers will be up-and-running with Vue quickly, training costs will be kept to a minimum.

Built-in Progressive Image support

Gridsome has a built-in <g-image> component with built-in progressive image support. Learn more here

Page pre-fetching for fast browsing

Gridsome pre-fetches next pages so browsing around goes fast. It uses the built-in <g-link> component to lazy-load prefetching when the link is in view. Learn more here.

Deploying

A Gridsome site is static when deployed. That means there is no database connection when the site has been deployed - every connection happens at build time only. This makes Gridsome sites very secure. Gridsome builds two versions of every page. One HTML page that search engines can crawl for SEO-purpose, and one JavaScript file that Gridsome uses for SPA after the first page load. Next pages are lazy-loaded in the background. That makes clicking around extremely fast, and your site is 100%-SEO friendly. It even works offline and can be entirely hosted on a CDN.

To update a live site with the latest content you need to redeploy your site. This is how static site generators work. This can be done automatically with services like Netlify & AWS Amplify.

Built-in performance optimization

Gridsome follows the PRPL-pattern by Google. and optimizes your site automatically. You don't need to be a performance expert to make fast websites with Gridsome. Your site gets almost perfect scores on Google lighthouse out-of-the-box. These are some of the performance steps that Gridsome takes care of:

  • Progressive Image support ⚡️
  • CSS & JS minification ⚡️
  • Code-splitting ⚡️
  • HTML compressing ⚡️
  • Critical CSS (Plugin) ⚡️
  • Full PWA & Offline-support (plugin) ⚡️

Alternatives

  • VuePress. Another static site generator for Vue.js. It uses local markdown files for content and is perfect for documentation sites. It is possible to build anything in VuePress and Markdown (Like a blog f.ex).
  • Nuxt. A Universal Vue.js Framework for server-side rendered (SSR) apps and websites. It also has a static site generator feature, but the main focus is SSR.
  • Gatsby.js Gridsome is highly inspired by Gatsby.js (React.js based), which collects data sources and generates a static site from it. Gridsome is an alternative for Gatsby.js.

Edit this page on GitHub