October 2022 Summaries

Solera Health, a healthcare platform focused on guiding chronic patients to evidence-based interventions, faced challenges with their legacy CMS, Sitecore, which hindered the efficiency of their conversion funnel due to difficulty in editing landing pages. To resolve this, Solera transitioned to using Gatsby and Contentful, enabling the marketing team to efficiently create and manage landing pages. The collaboration with the Gatsby team facilitated the architecture redesign and optimization of web components, performance, and dynamic capabilities, leading to a more maintainable codebase. This transition allowed Solera's content teams to independently build and update landing pages swiftly, significantly improving workflow and reducing dependency on developer time. The process also involved integrating the marketing work into broader engineering processes, allowing for seamless onboarding of new team members. The successful implementation highlighted the benefits of Gatsby's support and the resulting agile, efficient, and scalable content management system for Solera.

Gatsby Cloud recently addressed a high-risk security vulnerability in its Image CDN service, which allowed the exploitation of arbitrary URLs via a Server Side Request Forgery (SSRF) or Cross Site Scripting (XSS) attack. The issue, identified by security researchers Shubham Shah and Sam Curry, was related to the u= URL parameter on certain routes, affecting only sites with Image CDN enabled. Gatsby released updates to gatsby-plugin-utils and Gatsby Cloud to mitigate the vulnerability, encrypting CDN URLs and preventing unauthorized URL rendering. Site operators are advised to upgrade to the latest version of the plugin or disable the Image CDN to ensure security. Gatsby has informed affected customers and offered guidance on remediation, emphasizing the importance of these updates for maintaining site safety.

The Gatsby Slice API, introduced in Gatsby 5, enhances the efficiency of web development by enabling High Precision Incremental Builds, allowing developers to update only specific components of a site rather than rebuilding entire pages. This feature builds on previous innovations like Incremental Builds and Incremental Deploys by focusing on shared components such as headers or footers, which often require updates across numerous pages. By using the new createSlice action in the gatsby-node.js file, developers can isolate and update these components, significantly reducing build times. This process is akin to replacing a single slice of pizza in a full box rather than taking the entire box, allowing for faster, more efficient updates. When paired with Gatsby Cloud, these optimizations can lead to even faster builds, as demonstrated in testing with content-rich sites where build times improved by up to 80%. The Slice API is part of Gatsby's ongoing efforts to improve build speeds and web scalability, and it is available in the Gatsby 5 Beta, with resources like the gatsby-starter-slices sample starter and migration guides available for developers looking to upgrade.

Deferred Static Generation (DSG) is a notable feature in Gatsby 4, particularly beneficial for large sites as it allows for the deferral of static page builds until they are requested at run-time, effectively optimizing build time for sites with multiple pages. This method prioritizes the immediate build of frequently visited pages while deferring less accessed ones until they are needed, such as older blog posts or less popular product pages, which can be especially advantageous for content-heavy sites like blogs and ecommerce platforms. Enabling DSG in a Gatsby project involves modifying the `gatsby-node.js` file to pass `defer: true` to the `CreatePage` function for specific pages, and it can be tested and deployed locally or on Gatsby Cloud. This approach offers flexibility and efficiency, enhancing user experience by minimizing initial build times and allowing for dynamic page generation when necessary.

Maddie Wolf discusses how agencies can enhance their capabilities by leveraging Gatsby, a modern framework that offers security, performance, and scalability benefits. She highlights the creation of the Agency Directory to connect agencies with potential clients and introduces the new Agency Plan designed to support agencies with up to 100 sites and seamless client handoff. Gatsby provides early access to features and co-marketing opportunities to agencies, encouraging collaborations and strategic partnerships. The importance of staying updated with Gatsby's frequent feature releases is emphasized, including the ease of upgrading to newer versions for improved performance. Wolf also stresses the benefits of using Gatsby Cloud for businesses, offering rapid deployment and performance features that significantly enhance site speed and efficiency.

MXS Solutions developed over 100 auto dealership websites using Gatsby through their site templating solution, Dealer Masters, and discovered significant improvements in web performance and user engagement metrics compared to competitors. The company found that slower page load times negatively impacted bounce rates and session durations, with every extra second of load time increasing bounce rates by 1.6% and decreasing session duration by about 6%. Comparing their sites to others, Dealer Masters' Gatsby-built websites achieved a 39.92% lower bounce rate and a 53.81% faster load speed. This performance advantage is attributed to the efficient design of Gatsby, which aligns with other studies that emphasize the importance of web speed for user experience. As a result, MXS Solutions has committed to further enhancing their platform's performance, positioning themselves ahead of competitors still relying on outdated technology.