Adding Dynamic Content to Jamstack Sites

One of the key components of the speed of a Jamstack site are the static, pre-rendered sites which are served upon client request. These pre-rendered files enable the files to be cached and served from a globally distributed CDN. This process enables fast page load times across a broad range of regions and reliable availability of the data.

Because Jamstack sites are inherently built on pre-rendered, static files, the idea of adding dynamic content and still maintaining the static files is not necessarily intuitive. However, there are many use cases where dynamic content is not only helpful but necessary. Teams may still want to benefit from the speed and security of a Jamstack site without giving up some dynamic elements of their content. The amount and types of dynamic content will inform the approach to incorporating dynamic content into the site. At the end of the day, in order to get the full benefits of a static approach, teams should be mindful that adding too much dynamic content may negate some of the benefits of a statically generated site.

#What is Dynamic Content?

Dynamic content is content that changes based on user interaction or user data. In many ways, dynamic content is the opposite of static content because it is personalized to match different data interactions. While it may be counterintuitive to add dynamic content to static pages, there are some instances where it dramatically enhances the user experience or offers functionality that is not possible with static content.

Dynamic functionality can range from loading third-party data asynchronously to commerce flows, and form submissions are all still possible using a mixture of statically generated sites and dynamic content. Depending on the use case, the user base, and capacity, there are several different routes that the teams can take for finding the balance between statically generated sites and the personalized feel of dynamic content.

#Homebrew or Vendor-based?

The question of whether to implement solutions using a homebrew approach or adapting existing services to add dynamic content to existing static projects requires careful evaluation and understanding of the use case and the team which will implement it. A Jamstack ecosystem is no longer a place for solely indie devs, it is now trusted by teams and companies of all sizes. In many cases, it makes more sense to use an existing solution that can be connected to your existing stack rather than trying to reinvent the wheel by creating a homebrew solution to dynamic functionality.

The type of dynamic functionality is also a critical piece of the puzzle. Elements such as online checkout flow and inventory management have a wide range of services that enable this content to be generated dynamically while still having a largely static site. Other functionality is more easily integrated using serverless functions. The options are varied but all demonstrate that teams do not need to sacrifice functionality when working with the Jamstack.

#What kind of dynamic content is possible with Jamstack?

We’ll dive into greater detail on this topic in a later post where we will get into tool suggestions and words of wisdom but here are some of the most common instances where teams add dynamic content to their static sites. Finding the balance of optimizing for SEO and speed with static sites and the interactive elements of dynamic content can be a delicate act, which may require iterations to find the best fit. This is by no means an exhaustive list of what can be achieved by blending static and dynamic content, but just some of the use cases that we see most commonly.

Form submissions

Form submissions are one of the most common use cases necessary for static sites. The applications of users being able to submit forms on a website are endless and are essential to the modern interactions of web software. Form submission can be implemented in a wide range of services to match the needs of the team.

Checkout flow and ecommerce functionality

Having intuitive check-out flows and inventory management are just some of the dynamic elements that may improve the user experience of eCommerce sites. Teams wanting to benefit from the speed, modular developer experience, and SEO optimization that comes with the Jamstack may choose to build a hybrid architecture of serving largely static content while also having some dynamic elements. With the checkout flow and other essential eCommerce functionalities, teams could choose a homebrew approach, SaaS products, open-source solutions, and more. Each choice is largely driven by budget and technical capacity. Content federation can also be used in this instance to have external content housed within a headless CMS, making it easier to preserve the statically generated content while still keeping information up to date.

Personalization

Personalization is also a matter of taste. There is a small level of personalization that can be still achieved using only a headless CMS with the Jamstack, such as localization. For greater degrees of personalization, such as serving specific content based on preferences, are most commonly achieved via external services that are integrated into architectures via serverless functions.

#Just because you can, does that mean you should?

When it comes to adding dynamic content to Jamstack architectures, the biggest thing to consider is: does the extra element of dynamic content lead to a better user experience and ROI than the static options? If the answer is yes, then it is worth exploring the various ways to add dynamic content to your Jamstack site. With a highly flexible architecture that supports Jamstack, such as headless CMS that enables content federation, some functionality can be supported in the backend.

If the answer is no, then you may be better off focusing on how to build a Jamstack site that meets the needs of your use case in the best way possible. Jamstack in its pure form serves many use cases well, without the extra bells and whistles. Keeping architectures simple enables teams to work quickly and keeps troubleshooting to a minimum. Teams reap the full benefits of a pure Jamstack setup and still meet the needs of their use case.