Recently, our extensions team built a Gatsby project for the Harte Research Institute for Gulf of Mexico Studies BlueValue website. The entire team was so excited to build the next feature because it meant playing more with this shiny, amazing new tool.
Gatsby.js is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby's rich data plugin ecosystem lets you build sites with the data you want – from one or many sources. (Source: Gatsby.js)
Initially, we were going to build the site with Drupal, but since the website's content doesn’t change frequently, and the main updates are via spreadsheets, we realized that a more lightweight solution would help with speedier search results with a less complex technical infrastructure.
The amazing part was how easily the plugin system worked and how quickly we were able to prototype the first iteration of the site with real data. We used gatsby-source-graphql plugin and the gatsby-source-google-sheets plugin to pull in data from Google Sheets.
We started off with ~4000 rows of data but tested 10 000 rows and the site was still blazingly fast. On Gatsby build, all the initial data is bundled in, so we could paginate and display the results from GraphQL in less than a second. One caveat is that the larger the initial data, the larger the payload, causing the initial load time of the page to be slightly slower. Subsequent searches are fast!
Because the site would be viewed on all devices, we looked at responsive images and were pleased to find gatsby-background-image-es5 (with IE11 support) and the gatsby-image set of packages which allow you to show responsive images as needed on various devices.
Gatsby-image is designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and Sharp. To produce perfect images, you need only:
- Import gatsby-image and use it in place of the built-in img
- Write a GraphQL query using one of the included GraphQL “fragments” which specify the fields needed by gatsby-image.
The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The gatsby-image component automatically sets up the “blur-up” effect as well as lazy loading of images further down the screen.
We found plugins for exporting to PDF and CSV which worked right out the box. For the contact form, we used Formik with a reCaptcha integration. We did face some challenges because some external npm packages needed to be tweaked to work with Typescript, such as the range input filter and React pagination, but all in all, the numerous plugins available worked with ease – Such a breath of fresh air!
Gatsby also easily allows for multiple data sources which made schema stitching a breeze. See our webinar video on this here to find out more.
Here are some before and after shots of the Gecoserv and BlueValue sites - view the case study here.
Overall the advantages of Gatsby for projects that need fast, static data to dynamic sites and in the box image optimization are clear: it uses asset optimization, smart image loading, code splitting, and server-side rendering, all of which add up to lightning-fast sites. We really can't wait to get our hands on more Gatsby web development projects.
If you're as excited about Gatsby as we are, and would like to find out more, get in touch!