Building blazing fast websites with Gridsome

Vue.js is an amazing library for building user interfaces, but it (purposefully) lacks some of the bells and whistles of a full framework. That’s where Gridsome comes in! Gridsome is a framework built on top of Vue that provides features like pre-rendering, a centralized GraphQL data store and a plethora of performance and developer experience improvements out of the box.

What is Gridsome?

The Gridsome team describes it in this way:

Gridsome makes it easy for developers to build modern websites, apps and PWAs that are fast by default 🚀.

Gridsome is also a JAMstack framework. If you’re not familiar with JAMstack, here’s a short description from their website:

The JAMstack is a tech stack to help you create fast and secure sites and dynamic apps with JavaScript, APIs and pre-rendered markup served without web servers.

Gridsome can do many things, but building static websites is one of its core tenets.

What is a “static website”?

To understand static websites it’s helpful to understand the entire landscape. There are three primary ways to build Vue applications:

1. Client-side: Client-side applications are rendered completely in the browser. This comes with advantages, especially for highly dynamic applications, but it also has the occasional downside of being less performant and potentially SEO unfriendly.
2. Server-side: Rendering your Vue application on a Node server, instead of in the browser, addresses SEO problems and can help with performance. However, server-rendering makes scaling your application harder since you have to run Node servers to handle all of your requests.
3. Static (pre-rendered): Fully pre-rendering your Vue application into HTML/CSS comes with many benefits, like incredible performance, built-in SEO, increased security and easy scalability.

Why build static sites with Gridsome?

Gridsome really shines in three main ways: developer experience, user experience and business concerns.

1. Developer experience 👩‍💻

The Plugin Ecosystem: Gridsome allows developers to create and open-source plugins for Gridsome. Plugins can do anything from pulling in a feed of your tweets to automatically inlining critical CSS!

Source plugins: Source plugins allow you to seamlessly pull your content in from any source: APIs, markdown files, or even a CMS. Gridsome has official first-party plugins for many common CMS’s, like WordPress, Contentful and Sanity to name a few.

2. User experience ⚡️

Pre-rendered HTML: Gridsome takes your content, templates and interactivity and builds out HTML and CSS pages that work without JavaScript. This matters for three reasons:

1. Performance: The browser is best and fastest at rendering out HTML directly.
2. Search engine optimization: All the content and meta information (like tags) is already in the HTML of each page, so search engine’s crawlers can quickly and easily crawl it.
3. Progressive enhancement: If your application is client-side rendered, you’re out of luck if someone has JS disabled, or JS hasn’t yet runs on the page. When your HTML is pre-rendered, JS is not required.

🎩 Automatic code-splitting: Because Gridsome knows about your templates, data and routes it can intelligently build page-specific bundles of code so you’re never loading unneeded code.

💜 PRPL pattern: PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. Learn more here.

🧠 Smart link prefetching: Gridsome knows which pages link to other pages, so when a link to another page comes into view Gridsome automatically loads that page in the background making the page change almost instantaneous when the link is clicked.

🌄 Progressive image loading: Gridsome has a built-in component for automatic progressive image support. This component renders an ultra-compressed image before the image is ✨ magically ✨ lazy-loaded when in view.

🌍 CDN-based hosting for lightning speeds: The output of Gridsome build is completely static files that can be hosted anywhere, no LAMP stack required. This also means that your website can be hosted on the edge of a CDN so that it can be cached and quickly accessed from any location!

3. Business concerns 📈

Security: If your content lives in a CMS and it’s publicly accessible, it can cause security issues. If you don’t believe me, Google "WordPress hacked." When working with the JAMstack it’s usually only necessary for your build process to query your backend for content. You can put your backend behind a strict firewall, or within your intranet, to decrease the surface area of possible attacks and vulnerabilities.

Scalability: As mentioned earlier, Gridsome outputs fully static files that don’t require servers. This makes scaling your website or application simpler and cheaper because you’re not scaling up servers to handle the request load.

---

Further reading

Gridsome is great for building static sites that are performant and secure, and it’s easy and fun for development teams to work with. If you’re interested in developing with Gridsome, below are some additional resources:

• Gridsome Documentation
• Getting Started with Gridsome
• Static Vue With Gridsome (video tutorial)