August 2022 Summaries

Gatsby, a React-based framework, is highlighted for its superior performance in website loading speeds compared to other frameworks like Next.js and Nuxt.js. Utilizing data from HTTPArchive and Google's Core Web Vitals, Gatsby consistently demonstrates higher pass rates and better Lighthouse scores, particularly in mobile environments where performance challenges are more pronounced. The analysis reveals that Gatsby sites load 1-3 seconds faster and receive 7-10 points higher Lighthouse scores than their competitors, contributing to a potential 10-30% boost in conversion rates. The blog underscores that while Gatsby provides a notable performance advantage, all sites can benefit from optimization, and Gatsby offers resources and services, such as the Concierge Tech Lead program, to assist in enhancing site performance further.

Gatsby's data layer significantly enhances the performance of large-scale content sites by enabling rapid build times through an architecture known as Reactive Site Generation (RSG). This data layer, utilizing a GraphQL API and an embedded database, efficiently synchronizes, invalidates, and renders data from diverse sources like WordPress and Shopify, allowing Gatsby to rebuild sites up to 20 times faster than traditional Static Site Generators (SSGs) such as Next.js. The efficiency stems from minimizing API calls and leveraging an embedded cache, resulting in the ability to render pages at around 1200 pages per second compared to 20 pages per second with frameworks lacking a data layer. Future enhancements, codenamed "Valhalla," aim to further accelerate sourcing and extend the plugin ecosystem, making Gatsby a robust choice for organizations seeking scalable and fast content publishing solutions.

Revere Health, a pioneering multi-specialty physician group in Utah, has enhanced its service delivery to Medicare patients through a new website built using Gatsby by the Utah-based agency HQ. The website leverages the flexibility of Revere's unique structure as an Accountable Care Organization, fostering a patient-centered approach that simplifies navigation through the healthcare system. Gatsby was chosen for its smooth functionality, performance, and ability to accommodate complex customization, supported by technologies like WordPress, WPGraphQL, and Advanced Custom Fields. This platform allows patients easy access to information about Revere's 50+ specialties and medical providers, enhancing transparency and reducing barriers to care. The project exemplifies how innovative web solutions can make healthcare more accessible and less intimidating, reflecting a broader vision to humanize American healthcare.

Gatsby has introduced the Gatsby Tech Lead program, an evolution of its previous Concierge service, aimed at supporting teams of any size or experience level in building dynamic web experiences using Gatsby. This program pairs teams with a dedicated Gatsby Tech Lead and Success Manager who provide guidance on technical requirements, best practices, and cutting-edge Gatsby features, ensuring efficient and effective web development. The service includes Gatsby Cloud onboarding, biweekly pairing sessions for code review and feature planning, live training, and quarterly business reviews to maximize the value teams derive from Gatsby. Designed for both new and experienced teams, the program helps avoid costly mistakes, democratizes Gatsby knowledge within teams, and ensures that teams remain up-to-date with the latest technological advancements. Additionally, the program offers traditional performance audits and strategic guidance, aiming to enhance web performance and development productivity while fostering a thorough understanding of Gatsby's capabilities.

A recent webinar titled "Integrating the Latest Gatsby Module for Drupal," hosted by Kyle Mathews and Jay Callicott, offered insights into effectively integrating Gatsby with Drupal. During the session, attendees posed several questions, which led to in-depth discussions on topics such as handling optional fields using the Gatsby Schema Snapshot Plugin or Schema customization API, configuring permissions for previewing and building using Basic Auth roles, and the potential time-saving benefits of decoupling Drupal backend and Gatsby frontend development. The webinar also addressed integrating Drupal's Bricks module with Gatsby by mapping Bricks to React components and creating GraphQL fragments, and managing multiple Gatsby sites from a single Drupal site using the Gatsby Endpoints module. The event emphasized the value of parallelizing development work and provided resources for further learning, such as the Decoupling Drupal Using Gatsby workshop. The session recording is available on demand for those who missed it.

Gatsby has introduced an innovative approach called Reactive Site Generation (RSG) that significantly accelerates the process of updating content on websites by leveraging reactive programming principles. This advancement allows Gatsby Cloud to publish updates to its content delivery network (CDN) in approximately one second, a process that is about 100 times faster than traditional Static Site Generators (SSG) hosted on platforms like Netlify. RSG utilizes a real-time data layer fed by GraphQL and enables instant updates to the CDN cache, ensuring that changes from a content management system or ecommerce backend are reflected almost immediately. Benchmarks show that RSG outperforms SSG and compares favorably with Server-Side Rendering (SSR) methods like maxAge caching and stale-while-revalidate techniques. By focusing on reactive builds, Gatsby has constructed a more efficient framework that can handle rapid data changes, making it especially beneficial for sites that require real-time updates, such as news portals and ecommerce platforms. This development marks a significant milestone in Gatsby's evolution from its beginnings as a React meta-framework to a comprehensive solution for building fast, scalable websites.

Shane Thomas reflects on his previous experience presenting at Decoupled Days in 2019, where he discussed live previews with Gatsby and Drupal, and hinted at upcoming features like incremental builds. Now a part of the Gatsby team, Thomas is preparing for another presentation at the 2022 Decoupled Days, focusing on significant advancements in Gatsby's capabilities. His upcoming talk will highlight five key areas of improvement: dynamic capabilities through SSR and DSG, enhanced content editor experiences with Content Sync and Preview UI, increased build speed via Image CDN, improved deploy speed with Incremental Deploys, and enhanced frontend speed through the Script Component. He invites attendees to join him and engage with the Gatsby team, also noting that Gatsby's founder, Kyle Mathews, will discuss Gatsby Cloud’s streaming architecture. Additionally, the Gatsby team offers exclusive swag for those who interact with them on social media before the event.

Gatsby Cloud Enterprise provides a robust solution for organizations seeking to optimize their Gatsby projects through faster build times, enhanced collaboration, and improved performance. It serves a diverse range of clients, including large enterprises like Penn State News and SocietyOne, by supporting their migration from other platforms to a headless architecture and providing ongoing technical support. With expertise in site optimization and specialized workflows, Gatsby Cloud helps businesses like Pela Case and Brightcove overcome challenges such as slow builds and preview workflows, ultimately leading to significant improvements in Lighthouse scores and website traffic management. The platform's flexibility allows it to cater to the needs of smaller companies and large global businesses alike, offering tools for seamless content management and site performance enhancement. As companies grow or require more sophisticated solutions, Gatsby Cloud's Enterprise plans offer added value by addressing technical constraints and enabling the management of extensive site portfolios efficiently, as seen with clients like Spinmaster and AutoGenius.

Gatsby has introduced two new built-in APIs, the Script and Head APIs, which address the management of different types of scripts within the framework. The distinction between dynamic scripts and data block scripts is crucial, as defined by the HTML specification: dynamic scripts typically have a missing or JavaScript MIME type in their type attribute, while data block scripts have other types like application/ld+json. For optimal performance and functionality, dynamic scripts should be loaded using the Gatsby Script API within pages or components, as they load scripts in the browser runtime after hydration, enhancing performance without blocking. In contrast, data block scripts should be included using the regular `<script>` tag in the Gatsby Head, ensuring that static metadata is properly integrated into the document for search engines and users without causing performance issues. This approach ensures that both dynamic and static scripts are managed efficiently, making the most of Gatsby's capabilities for enhanced website performance.

Gatsby has introduced the Gatsby Head API, a new feature available in Gatsby version 4.19 and later, designed to enhance the management of metadata in web development without relying on third-party libraries like react-helmet. This API allows developers to fluently update the document head of a page with zero additional add-ons, utilizing a Head function that returns JSX in page templates. Unlike component-based solutions, the Head API ensures a predictable and consistent rendering order of tags, addressing issues that arise with React's concurrent features like streaming and selective hydration. This approach is advantageous for its compatibility with React's latest capabilities, eliminating the unpredictability of tag loading sequences and enhancing performance. Developers can now co-locate head additions within page templates, making the process more efficient and integrated, while still allowing the use of SEO components across pages. The Gatsby team encourages feedback and discussion on this new API, emphasizing its ease of use, performance benefits, and alignment with modern React practices.