🔴 Prismic Meetup
New Media Library, Find & Organize Assets IntuitivelyWatch the replay
Prismic Announcements
·3 min read

Gatsby + Prismic v6: Faster and Simpler

Gatsby is a website framework designed to build fast React-based websites. Prismic’s Gatsby plugins work great. They provide:

  • Easy access to your website content
  • Immediate content preview sessions
  • The ability to host on Gatsby Cloud

Today, we’re releasing a new version of our Gatsby integration, Version 6.

The new version includes the following updates:

  • 5️⃣ Gatsby 5 support
  • 🏎️ Faster, more performant previews
  • 🦾 A complete rewrite to simplify the plugins’ underlying code

Most projects can be upgraded in less than an hour.

Gatsby + Prismic v6 will be the last major version to be officially released by Prismic. Documentation for Prismic’s Gatsby plugins has moved from the Prismic Docs website to the plugins’ GitHub repository.

For more details on what this change means for you and your projects, see Our future plans for Gatsby + Prismic below.

The Road Ahead for React Developers

While we support Gatsby v6, it's important to note the framework's evolution has paused (as per this announcement). For React developers seeking cutting-edge solutions, we recommend exploring Next.js for its ongoing advancements.

Check out our Next.js tutorial.

New Features

Prismic plugins are now compatible with Gatsby 5

Gatsby 5 includes a number of improvements and optimizations that make building better websites even easier than before. Take advantage of Gatsby’s new Head API, Script component, and Slice API (not to be confused with Prismic’s Slices!) once you update.

Note: gatsby-plugin-prismic-previews does not currently support Gatsby’s Partial Hydration feature, currently in beta.

Prismic previews in Gatsby sites are now quicker

Previewing content while writing is crucial to many content writers’ workflow. A fast feedback loop leads to quick iterations and a shorter time to publish.

Prismic previews in Gatsby sites are now quicker, especially when previewing from Prismic repositories with many documents (think: >500 documents). gatsby-plugin-prismic-previews uses a new strategy that minimizes the amount of Prismic documents fetched during a preview session, leading to shorter loading times.

Code from gatsby-plugin-prismic-previews is now only loaded during a preview session. That means all of your website’s visitors won’t need to download code that only content writers need for previewing.

A complete rewrite

The new plugins have been rewritten from the ground up not only to improve performance but also to make it simpler to understand and contribute to.

If you ever ran into a bug with the previous versions and jumped into their code to debug it, you’ll know it wasn’t the most intuitive code to read. The new versions avoid clever code making it easier for everyone in the Gatsby + Prismic community to work on the plugins together.

As always, pull requests to improve the plugins or fix bugs are always welcome!

How to upgrade

First, update your project to Gatsby 5 (see the official migration guide).

Next, install the updated plugins:

npm install gatsby-source-prismic@latest
npm install gatsby-plugin-prismic-previews@latest

Finally, update your project’s code to be compatible with the latest changes. The Gatsby + Prismic V5 to V6 Migration Guide walks you through each step.

View the Gatsby + Prismic V5 to V6 Migration Guide

Our future plans for Gatsby + Prismic

Today, we are releasing new versions of our Gatsby plugins: gatsby-source-prismic and gatsby-plugin-prismic-previews.

Over the next two months, we will provide support to fix bugs in the new plugins and help developers upgrade their projects.

After that time, we plan to reduce our support and encourage the Gatsby + Prismic community to help maintain the plugins. We will continue to review and guide community contributions to the plugins.

We recommend building new React-based websites using Next.js rather than Gatsby going forward. We see more innovation from the Next.js team and believe simpler, more stable websites can be built with Next.js when compared to Gatsby. Our Next.js support is stronger than ever, with full support for the App Router, TypeScript, and Slice Machine.

If you have any questions about the updated plugins or our plans to reduce official support for Gatsby, please post them the Prismic Community forum.

Article written by

Angelo Ashmore

Senior Developer Experience Engineer at Prismic focusing on Next.js, Gatsby, React, and TypeScript, in no particular order.

More posts

Join the discussion

Hit your website goals

Websites success stories from the Prismic Community

How Arcadia is Telling a Consistent Brand Story

Read Case Study

How Evri Cut their Time to Ship

Read Case Study

How Pallyy Grew Daily Visitors from 500 to 10,000

Read Case Study