Why you should consider Gridsome for your next project
March 18th 2022
Vue.js is a fantastic toolkit for creating user interfaces, but it (intentionally) lacks some of the bells and whistles of a complete framework. That's where Gridsome comes in! Gridsome is a Vue-based framework that includes features like pre-rendering, a centralised GraphQL data store, and a slew of performance and developer experience enhancements out of the box.
What is Gridsome?
The Gridsome team defines it as follows:
"Gridsome makes it simple for developers to create contemporary, fast-by-default websites, applications, and PWAs."
Gridsome is a JAMstack framework as well. If you're unfamiliar with JAMstack please do check it out. Here's a brief overview from their own website:
"The JAMstack is a technology stack that allows you to build fast and secure webpages and dynamic apps using JavaScript, APIs, and pre-rendered HTML provided without web servers."
Putting it simply, it’s a contemporary website development framework that allows you to build fast and secure websites that can be deployed anywhere. Static HTML files are created to generate SEO-friendly markup that, when loaded in the browser, hydrates into a Vue.js-powered single page application. Gridsome is capable of many things, but one of its main pillars is the creation of static webpages.
What exactly is a "static website"?
It is necessary to grasp the overall landscape in order to understand static websites. Vue apps may be created in three ways:
- Client-side: Client-side apps are totally rendered in the browser. This has benefits, particularly for highly dynamic applications, but it also has the occasional disadvantage of being less performant and perhaps SEO unfriendly.
- Server-side rendering: Rendering your Vue application on a Node server rather than in the browser fixes SEO issues and can improve speed. However, because you must deploy Node servers to fulfil all of your requests, server-rendering makes scaling your service more difficult.
- Static (pre-rendered): Fully pre-rendering your Vue application into HTML/CSS has several advantages, including fantastic performance, built-in SEO, better security, and simple scalability.
Why should you utilise Gridsome?
Gridsome is a Static Site Generator (SSG) that heavily influences Gatsby and delivers many of Gatsby's features to the Vue environment. But what are those advantages? How can you tell if Gridsome is a good fit for your next project?
Gridsome may be right for you if any of the following apply to your situation:
- Do you need a fast-by-default website?
- Do you want to work with Vue?
- Do you need to create a site that is created statically?
- Looking for a good starting point?
- Is GraphQL integration required?
Below, I'll go through the reasons why a developer should consider Gridsome:
Pre-rendered HTML
Gridsome pre-renders HTML during the construction process (Generates static files). Gridsome sites can be hosted anywhere, even on a content delivery network (CDN). A Node.js server is not required. This was an important feature for us.
There are several advantages to using a static website:
- Better Performance. Why wait for pages to build on the fly when you can generate them at deploy time? When it comes to minimizing the time to first byte, nothing beats pre-built files served over a CDN.
- Higher Security. With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced. You can also leverage the domain expertise of specialist third-party services.
- Cheaper, Easier Scaling. When your deployment amounts to a stack of files that can be served anywhere, scaling is a matter of serving those files in more places. CDNs are perfect for this, and often include scaling in all of their plans.
Progressive Images
Progressive Images were another important feature for us. Gridsome has a built-in <g-image> component with automatic progressive image support. In development it lets you do real-time image processing, like resizing and cropping. In production, the <g-image> is served as an ultra-compressed image before the image is lazy-loaded when in view by using Intersection Observer.
Vue
Gridsome comes with vue-meta, dynamic routing (no more v-router settings to configure for each page! ), a Single File Component development framework, and much more. Whether you're a seasoned Vue developer or just starting out, you'll have access to the ecosystem's power where you need it, while Gridsome handles much of the Vue setup maintenance for you.
GraphQL
GraphQL is one of the keystones of empowering developers with Jamstack architecture, and it's embedded into Gridsome, providing development tools when you run gridsome create at / explore, so you can easily build and test queries. Whether the data is coming from a Content Management System (CMS) like Kontent.ai, local markdown files, or APIs, GraphQL can pull it into the site in a developer-friendly manner.
The PRPL pattern
Another important feature for us is the 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. It stands for:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
Smart link prefetching
Gridsome caches internal links in the background, allowing for lightning-fast surfing. When the link is in view, it uses the built-in <g-link> component and Intersection Observer to prefetch.
Gridsome creates two files for each page. A static HTML page with a short JavaScript script. The link prefetching only loads the JavaScript to render the next page when the website hydrates into a Vue.js-SPA. As a consequence, browsing becomes quicker and smoother.
Plugins
Gridsome allows developers to design and share Gridsome plugins. Source plugins allow you to draw material in from any source, such as APIs, markdown files, or even a CMS. Gridsome offers official first-party plugins for a variety of popular CMSs, including WordPress, Kontent.ai, Contentful and Sanity, to mention a few.
Automatic Code splitting
Each import that you define is packed and supplied with each page. This implies that pages will never load superfluous code while you're browsing.
SEO and Page Speed
Probably the most important feature for us and one of the most significant advantages of Gridsome, like with other Jamstack frameworks, is the inclusion of SEO considerations and setup behind the scenes to help keep your pages SEO optimised and ready to contain all of the SEO information you'll need to rank highly in Google Search results.
But SEO is no longer just SEO; recently, Google began emphasising website loading times as a factor in page rankings. Gridsome is a Static Site Generator, thus the pages will load extremely quickly right out of the box, helping to maintain your Lighthouse scores green and healthy!
Vue.js SPA
Gridsome provides SEO-friendly HTML files that may be hosted anywhere. These HTML files have been designed to load as quickly as possible. Vue.js takes over the HTML once it has been loaded and turns it into a fully Vue-powered SPA. When SPA is enabled, it just loads shortcode-splitted JS chunks for subsequent pages.
Starters
We didn’t use these but it’s worth mentioning. It can be intimidating to begin a new project with a fully blank project, especially when utilising a new framework with a specific folder structure. Gridsome Starters are template projects created by other developers that may be used as a jumping-off point to get your site up and running quickly. Many of the starters even have a quick start readme to get the settings pages updated and ready to go, so you don't have to waste time figuring out what setup is required to get started on your new project!
Further enhancements
Of course, you can decide to add to your Gridsome implementation by using some of the countless available plugins, here are two important extra features we have added:
vue-lazy-hydration is a renderless Vue.js component to improve Estimated Input Latency and Time to Interactive server-side rendered Vue.js applications. This can be achieved by using lazy hydration to delay the hydration of pre-rendered HTML.
imagemin-webp-webpack-plugin is a Webpack plugin which converts images to the WebP format while also keeping the original files. Compatible with webpack 5, webpack 4 and previous versions as well. Although WebP images are not currently supported in all browsers, they are at least 25% smaller than PNGs or JPEGs. So, certain users can get a much better experience. WebP also supports Gif-like functionality so this plugin also works for GIF images.
Gridsome vs Google Page Speed Insights (Lighthouse)
It’s important to have good scores on Google Page Speed Insights not only from a ranking point of view but also to appease your own executives and potential investors. Out of the box Gridsome will leave your scores firmly in the green providing you also minimise all the libraries you use, defer as much on load as possible, serve static assets with an efficient cache policy and optimise any imagery.
The biggest impact on the scores of a Gridsome website will be the use of third-party libraries. Since the introduction of Google Tag Manager we have witnessed much of our hard work undone. Third-party code can significantly impact load performance. It’s advised to limit the number of redundant third-party providers and to try and load third-party code after your page has primarily finished loading.
Conclusion
As you can probably guess, I'm a big admirer of Gridsome since it simplifies dealing with some hard development challenges with data and configurations. The biggest compliment I can pay Gridsome is how fast your applications will be. Even when navigating a Gridsome website you can just feel how fast the website is running. Hopefully, you’ve been inspired to give Gridsome a try because Gridsome is great for building static sites that are performant, secure and fast, and it’s easy and fun for development teams to work with.