Fast sites with GatsbyJS

Home/Stories/Sites with GatsbyJS

Matteo Granzotto - Aug 26, 2019

#GatsbyJS#React#MUG#Yalp#Wavelop

The 18th June we were at MUG to speak about GatsbyJS, a framework that helps developers build blazing-fast websites and apps.

GatsbyJS introduction

Introduction

Make a site is something that everybody can do in these days. Make a blazing-fast website, instead, is not easy.

GatsbyJS helps us promising us to make sites and web apps with high performance. It is an open-source framework based on React that gives us the same experience of development of a modern web app.

The main features of GatsbyJS

The main features of GatsbyJS are:

  • it uses the latest web technologies that have a huge community like React.js, Webpack;
  • it manages the data through Graphql;
  • it generates static files which can be uploaded on CDN;
  • it is based on the JAM Stack;
  • the sites and the web apps generated are PWA (Progressive Web App) too;
  • it uses dns-prefetch, prefetch and preload, this speed up the navigation inside the pages.

How GatsbyJS works

How GatsbyJS works

  • GatsbyJS can read from any data source: CMS, static files, API, Database, etc. There are a lot of plugins which can cover all the need;
  • the framework, after it has read all the data, renders the pages of the site as static files;
  • the React application is then split to use the lazy loading;
  • in the end, the static file generated can be uploaded to any server that serves static files.

JAM Stack

JAM Stack

  • Javascript: any dynamic programming is running entirely on the client;
  • API: data are read via API REST with JavaScript;
  • Markup: templated markup should be prebuilt at build time.

Plugins

GatsbyJS plugins

There are a lot of plugins of any types: it is possible to cover all the need to improve SEO, read and convert images and set up PWA features.

Performance

Wavelop site performance

During the development, it is good to keep in mind the best practice and performance goals. Lighthouse by Google is a good tool to check them. With GatsbyJS you can get great results.

MUG event

The 18th June we were at MUG to speak about GatsbyJS, here you can see the entire presentation (in Italian).

I will conclude by sharing the slides. If you have questions, please write us on the chat or an email to info@wavelop.com.

References