How it works
Quick introduction to core Gridsome concepts
The GraphQL layer
The GraphQL layer is powered by a in-memory database and is only available in development & serve mode. Static generating uses the database to quickly generate hundreds to thousands of HTML pages in seconds. Data are pulled into the GraphQL layer with Source plugins.
Static site generation
Gridsome generates all pages and endpoints at build time. It can generate big sites extremely fast thanks to the internal GraphQL database.
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:
- Image compressing & lazy-loading ⚡️
- CSS & JS minification ⚡️
- Code-splitting ⚡️
- HTML compressing ⚡️
- Critical CSS (Plugin) ⚡️
- Full PWA & Offline-support (plugin) ⚡️
- 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.