How we build Jamstack websites to benefit our clients

At Ample, we often reach for the Jamstack (Javascript, API & Markup) in order to build our websites. In one of our previous blogs, we went over our preferred tools in 2023. We love utilizing the tools in this stack as it can simplify the developer workflow, reducing the time we spend setting up the infrastructure. This, in turn, allows us to solve other problems in order to deliver the greatest value to our clients. It’s a pleasure to work with these tools that benefit our developers, but how do they benefit you?

Flexibility

Different clients (or even the same client) have different needs in terms of how certain pages should be served to the user. When working with a client, we ask questions to find out the needs and requirements for certain pages to try to find the best solution. Content on the pages can have serious implications with regards to the best way of serving them to the end user. Is it a page with just some text that rarely requires updating, or does certain content rely on being up-to-date? And would a couple of minutes delay pose a potential problem? Is there only one page of this type, or could there potentially be thousands? With those ideas in mind, let’s explore a couple of examples with a fictional eCommerce website:

• eCommerce catalog - This site has a number of products with pricing that could change at any moment. The information that is displayed on the catalog page consists of the category, price, image and a short description. Given that almost all the data on this page is dynamic, the price is time-sensitive, and the amount of data is not that large, we can opt for a dynamic approach. This is still entirely feasible while utilizing the Jamstack as we are by no means locked in.
• eCommerce product page - This page has a much larger product description, a number of different images to showcase the product, a video, and some reviews of your customers raving about the quality of your products. Most of this data remains pretty stable, with only small sections such as the price and reviews requiring more immediate updates. We can utilize a static page while still using targeted techniques in order to only update crucial, time-sensitive information. This gives us the best of both worlds with a page that loads quickly, as it has been pre-generated. The page only has to grab small pieces of time-sensitive data when the user visits the page.
• eCommerce ‘about’ page - This page mostly has some content and some cute images of the team. Nothing is really subject to change, and we can safely say that if there is an edit that needs to be made, it won’t be crucial to immediately update it (even though we still could!). Knowing this allows us to make sure that the page is cached for a selected amount of time. The content of the page has been generated before, and the user will just be served the content to make everything quicker and more secure.

These are three entirely different page types with different considerations as to how to handle the content and caching. With the tooling of the Jamstack, we are able to build efficient solutions that best serve the specific use cases of the client.

Scalability & Performance

Building on the flexibility aspect, it’s not a big leap to look at the scalability of a Jamstack site. I mentioned the caching above, and that is some of the “secret sauce” that goes into the Jamstack solutions.

A blog that has a total of ten posts (and is not likely to ever grow much larger) requires a different approach than a blog that has hundreds or thousands of entries and can scale even further. The Jamstack offers us the tools to best meet our clients’ demands, and it allows us to think with the client to see which pages are expected to be highly trafficked and which content is expected to change. One approach we can apply is for the ten newest posts to be pre-built for the users, while the rest gets created when a user visits that specific blog. The page gets built and stored in a CDN. The next user that visits that page then gets that same page from the CDN, resulting in a super snappy process. Why don’t we pre-build all the pages? Well, we could for ten pages, but if the client wants to be able to grow their blog to hundreds of blogs, we may want to take an approach that is future proof. Building everything at build time takes more time per added blog page, and the posts beyond the first ten blogs actually don’t receive enough traffic to warrant that.

Having a futuristic eye on these kinds of considerations, reviewing previous patterns, and communicating with our clients regarding future expectations allows us to pick the best tool for the job.

Customizability

Every client has different wants, tastes, requirements, and needs. Our team is here to listen, assess, and advise regarding the best way forward. One of the benefits of building Jamstack web pages is the high degree of customizability that they offer. Jamstack sites are highly modular, which allows us to customize nearly every aspect of the site to meet the needs of the business or the user.

The use of APIs and microservices architecture in Jamstack sites allows us to easily integrate with a wide range of third-party services, such as content management systems (CMSs), e-commerce platforms, and payment gateways. In doing so, we can create customized and flexible web pages that can adapt to the (changing) needs of the business or the user. For example, a Jamstack site might use a static site generator like Gatsby/Vercel for the frontend, a headless CMS like Contentful for managing content, a payment gateway like Stripe for processing payments.

The flexibility and customizability of Jamstack web pages also extends to the design and user experience. Since Jamstack sites are built using modern web technologies, developers have a wide range of options for creating beautiful and engaging user interfaces. The use of client-side JavaScript allows for dynamic and interactive user experiences, and the modular architecture of Jamstack sites makes it easy to create reusable UI components that can be customized and styled to match the design and branding of the site.

Overall, the customizability of Jamstack web pages is one of the key advantages of this architecture, enabling us to create highly customized, flexible, and scalable web applications that meet the unique needs of their business or users.

Security

The key characteristic of a Jamstack site is the separation of the frontend presentation layer from the backend functionality, with APIs acting as the glue between the two. The strict separation of these layers means that Jamstack sites are more secure than traditional web applications. In its purest form, there is no server-side code or database that can be compromised, and no dynamic content that can be injected with malicious code.

Standardization & Time to Delivery

Coming back to the initial statement about how using the Jamstack allows us to focus on the most impactful areas of our expertise: it’s worth noting the ecosystem that surrounds some of the Jamstack tooling. As an agency, we have the luxury of being able to follow industry trends and apply that knowledge across multiple clients. Certain new features may be rolled out for a framework (say Gatsby v5 or NextJS13). The best way to fully embrace these new features, and to understand the benefits as well as some of their limitations, is to implement them and use them in production for a while. We often find that a certain project will be served by the benefits of one of these new features, which after successful implementation can then be rolled out to other clients as well. Work can be transferable because of the stack we have chosen, allowing us to roll out these features in a more efficient manner for our clients.

To wrap it up…

The Jamstack is a joy to work with for our developers as it abstracts away some of the more complex tasks, allowing us to focus on the work that matters the most to the client. The abstraction does not come at a price, as we are still able to customize to our heart’s content with the right third-party integrations. For the client, this means that the work gets delivered quicker, reliably, and with an increased focus on business requirements over technological requirements.

‍