Gridsome: Jamstack Framework for Modern Web Development

Gridsome: Jamstack framework

Overview

Static web development, which traditionally means playing around with HTML and CSS. We’ll naturally call any website built with HTML and CSS a static website as no form of dynamic action is going on. Here to make this process much easier and faster static site generators are introduced. Static Site Generators are a new, hybrid approach to web development that allows you to build a powerful, website locally on your computer but pre-builds the site into static files for deployment.

These Static Site Generators follow Jamstack Architecture. Jamstack, a comparatively new and latest term that is a modern web development architecture, and Gridsome is a framework following Jamstack Architecture, it is a Vue-powered static site generator for building blazing fast static websites. Now you might think that why Jamstack and Gridsome terms are being so popular in a short span of time. So here comes in the picture its advantages over the architectures and frameworks we are using currently and we will discuss the same in this article with its implementation.
So Let’s Hop On It.

Introduction to Jamstack

Jamstack stands for Javascript API Markup, It is a web development architecture used to make the web faster, more secure, and easier to scale. Jamstack works on the core principle of pre-rendering and decouple. Jamstack Architecture is mostly used to develop and generate static web apps. There is a huge community of Jamstacks built on top of multiple modern frameworks like React, Angular, and Vue.js.

Introduction to Gridsome

Gridsome is a Jamstack framework built on top of Vue.js and GraphQL. Gridsome makes it easy for developers to build static generated websites & apps that are fast by default. In Gridsome Vue.js is used for the frontend and GraphQL acts as a data source. Gridsome generates static HTML that hydrates into a Vue SPA once loaded in the browser. This means you can build both static websites & dynamic apps with Gridsome. Gridsome builds ultra-performance into every page automatically. You get code-splitting, asset optimization, progressive images, and link prefetching out of the box. With Gridsome you get almost perfect page speed scores by default.

Architecture of Gridsome

  • Gridsome is built using Vue.js as frontend and GraphQL as the data layer. In Gridsome data can be stored and can be rendered in the frontend using APIs, Databases, AirTable, YAML, CSV, JSON, etc.
  • Gridsome supports any headless CMS like WordPress, Drupal, sanity.io, Netlify CMS, etc to manage the content of the website.
  • GraphQL is responsible to bring all the required data from the data source and pass it to the frontend.
  • Built Gridsome project can be deployed serverless to Netlify hosting, AWS Amplify, Amazon S3, and many other hosting services.
Gridsome Architecture

Working of Gridsome

  • Gridsome generates static HTML that hydrates into a Vue.js SPA once loaded in the browser. This means you can build both static websites & dynamic apps with Gridsome.
  • Gridsome builds one .html file and one .json file for every page. After the first page load, it only uses the .json files to prefetch and load data for the next pages. It also builds a .js bundle for each page that needs it (code splitting).

Installation Process

Install Gridsome CLI tool
-Using YARN:yarn global add @gridsome/cli
-Using NPM:npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to move into project directory
gridsome develop to start local dev server at http://localhost:8080
Happy coding 🎉🙌
3. Next steps
Create .vue components in the src/pages directory to create page routes.
Use gridsome build to generate static files in a /dist folder

Benefits of Using Gridsome

Gridsome is fast by default. Gridsome generates static PWAs. Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline. Simple, safe deployment, no servers, no databases, Only files. Deploy your entire site to a CDN and forget about it. SEO-friendly Gridsome sites load as static HTML before they hydrate into fully Vue. js-powered SPAs.

Conclusion

Gridsome is one of the fastest framework which follows Jamstack Architecture. Gridsome makes it easy for developers to build and deploy seamlessly fast web apps and statically generated websites. Gridsome is lightweight, one of the most secure and SEO-friendly framework, which developers love to use.

Originally published at Reveation Labs Blog Page

--

--

--

Custom Software Development Solutions For Startups and Enterprise Businesses.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Automating SEO Site Speed Analysis Using the PageSpeed API

You don’t remember: Topological sort

Topological sort image

Lightening — A graduate’s story

Family Constellations and Leadership

Reference ‘refs/remotes/origin/master’ not found

Being a Web Developer, or what am I even doing…

Introducing Heighliner

ViaBTC Capital Insight丨BlockVision: Making Blockchain Data Readable

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Reveation Labs

Reveation Labs

Custom Software Development Solutions For Startups and Enterprise Businesses.

More from Medium

Setting up Tailwind v3 with Snowpack

Should we be using 302 or 307 for temporary HTTP redirects?

Top 5 Must-Have Video Call Characteristics

How do I build my first homepage with GitHub Pages and Gatsby

https://licanhua.github.io