{"id":36305,"date":"2022-09-29T10:30:28","date_gmt":"2022-09-29T08:30:28","guid":{"rendered":"https:\/\/www.inovex.de\/?p=36305"},"modified":"2022-09-29T10:30:28","modified_gmt":"2022-09-29T08:30:28","slug":"state-of-the-jamstack-2022","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/","title":{"rendered":"State of the Jamstack 2022"},"content":{"rendered":"<p>This article gives an overview of the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.<!--more--><\/p>\n<p>The Jamstack is a web architecture or architectural concept designed to make web applications faster, and easier to develop and scale. As explained by Julia Wayrauther in the <a href=\"https:\/\/www.inovex.de\/de\/blog\/jamstack-apps-static-dynamic\/\" target=\"_blank\" rel=\"noopener\">State of the Web from 2019<\/a>,\u00a0 the core principles of the Jamstack are pre-rendering of web pages at build time and decoupling of system elements, such as Frontend and Backend. Content Delivery Networks (CDN) are used to host the Frontend separately at the edge, while APIs such as Headless Content Management Systems (CMS) are preferred as the Backend for a better Separation of Concerns.<\/p>\n<p>More than two years have passed since our last article about the Jamstack. Since then, the Jamstack&#8217;s popularity has stagnated and is no longer rising as steeply as the old numbers suggested.<\/p>\n<figure id=\"attachment_36306\" aria-describedby=\"caption-attachment-36306\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36306 size-large\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-1024x260.png\" alt=\"Graph on Google Trends Jamstack\" width=\"640\" height=\"163\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-1024x260.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-300x76.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-768x195.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-400x102.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43-360x92.png 360w, https:\/\/www.inovex.de\/wp-content\/uploads\/Screenshot-2022-05-02-at-16.00.43.png 1137w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-36306\" class=\"wp-caption-text\">Google Trends graph showing the global search frequency for the term \u201cJamstack\u201c over the last years.<\/figcaption><\/figure>\n<p>There is a good reason for this \u2013 or at least I suspect there is \u2013 which I will talk about at the end.\u00a0 Nevertheless, the Jamstack ecosystem has progressed in many regards and several exciting innovations have been introduced since 2019, which we will take a look at in the following.<\/p>\n<p>First, a selection of the latest build time optimization strategies to bring fresh content to live as fast as possible will be explained, such as <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noopener\">Next.js<\/a>\u2019s Incremental Static Regeneration (ISR) and Netlify\u2019s Distributed Persistent Rendering (DPR). Second, we will look at the newest advances in edge computing using the example of stateless and stateful edge functions. This article concludes, as promised, with an outlook on the future of the Jamstack.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Build-time-optimization-%E2%80%93-static-but-not-static-%F0%9F%8F%8E\" >Build time optimization \u2013 static, but not static \ud83c\udfce<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Incremental-Static-Regeneration\" >Incremental Static Regeneration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Distributed-Persistent-Rendering\" >Distributed Persistent Rendering<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Edge-functions-%E2%80%93-serverless-on-fire-%F0%9F%94%A5\" >Edge functions \u2013 serverless on fire \ud83d\udd25<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Stateless-Edge-Functions\" >Stateless Edge Functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Stateful-Edge-Functions\" >Stateful Edge Functions<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#Jamstack-%E2%80%93-too-capable-for-its-own-good-%F0%9F%A7%90\" >Jamstack \u2013 too capable for its own good? \ud83e\uddd0<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Build-time-optimization-%E2%80%93-static-but-not-static-%F0%9F%8F%8E\"><\/span>Build time optimization \u2013 static, but not static \ud83c\udfce<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the most pressing challenges of the Jamstack has always been long build times. It is a poor user experience and can also burden the maintainer when content updates take a long time to take effect in the live app. For example, if a product is deleted in the CMS, its associated page will still be accessible in the web app until the following build process and deployment finishes. Build time optimization techniques seek to reduce build time so that content updates feel more seamless and provide a more dynamic experience to the user;\u00a0 two of which we will look at in more detail below.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Incremental-Static-Regeneration\"><\/span>Incremental Static Regeneration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Next.js\u2019s <a href=\"https:\/\/github.com\/vercel\/next.js\/discussions\/11552\" target=\"_blank\" rel=\"noopener\">ISR<\/a> is a build time optimization strategy introduced with version 9.5 of the framework. The feature allows to incrementally update the content of existing pages behind the scenes as traffic comes in. With ISR, developers can choose whether a page should be rendered at build time or on-demand, and can update content on a per-page basis without rebuilding the entire site.<\/p>\n<p>Roughly speaking, ISR works as follows: Developers define a <strong>revalidation timer<\/strong> per page. After this timer expires, the first incoming request for a page triggers a check to see if the page has changed since the last rendering (see 1 in the diagram below).<\/p>\n<figure id=\"attachment_36324\" aria-describedby=\"caption-attachment-36324\" style=\"width: 920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36324 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/ISR.png\" alt=\"diagram of a request flow with applied Incremental Static Regeneration (ISR)\" width=\"920\" height=\"460\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/ISR.png 2488w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-300x150.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-1024x512.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-768x384.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-1536x768.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-2048x1024.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-1920x960.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-400x200.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/ISR-360x180.png 360w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><figcaption id=\"caption-attachment-36324\" class=\"wp-caption-text\">Example of a request flow with applied Incremental Static Regeneration (ISR)<\/figcaption><\/figure>\n<p>If yes, a new rendering of this single page is triggered and the old version of the page is replaced with the fresh version both in the cache and in the persistent storage. At the same time, the user&#8217;s request is quickly responded to with the previous version (\u2192<strong> 4<\/strong>). Pages that are excluded from rendering are rendered on-demand and then added to the set of pre-rendered pages to be reused in future requests and builds (\u2192 <strong>7<\/strong> &amp; <strong>8<\/strong>).<\/p>\n<p>This means that ISR allows incremental content updates <em>without<\/em> requiring rebuilds and redeployments. In addition, every request is served static-fast, albeit the served content may be stale. The possibility of excluding certain pages from pre-rendering and providing them on-demand gives you great flexibility.<\/p>\n<p>Unfortunately, ISR is a Next.js-only feature, and the supporting platforms are also limited. For example, Vercel is the only platform that fully supports it without constraints. Furthermore, changing pages and builds after the initial deployment violates their immutability, which can hinder traceability and may cause problems if you want to roll back to a previous state.<\/p>\n<p>One of the biggest criticisms of ISR has been that pages with mutual dependencies, such as a Product Overview and Product Details page, could get out of sync when using different revalidation timers. However, a few weeks ago, the new feature <strong>on-demand ISR<\/strong> was released that allows forcing page updates by calling a so-called <strong>revalidation route<\/strong>. For example, when updating the Product Overview, you can now force an update of the Product Details to keep them in sync.<\/p>\n<p>In summary, ISR is a mixture of pre-rendering and just-in-time server-side rendering (SSR) that allows updating pre-rendered assets incrementally in the background. Even though it requires a running build server, requests can still be served static-fast if that server crashes, unlike with SSR. Nevertheless, this hybrid approach moves away from the Jamstack principles, according to which a web app should be deployed completely statically. Moreover, poorly implemented ISR might cause problems with consistency, although on-demand ISR mitigates this problem. Also, keep in mind that ISR only works for content and not for code updates \u2013 those still require a fresh rebuild and deployment.<\/p>\n<p>ISR is a powerful technique that can be useful for small to mid-sized web apps whose update frequency exceeds blogs but does not reach the level of social media, such as in eCommerce shops. Another build-time optimization strategy is more faithful to traditional static site generation, namely the so-called Distributed Persistent Rendering (DPR).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Distributed-Persistent-Rendering\"><\/span>Distributed Persistent Rendering<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As with ISR, DPR allows excluding selected pages from the initial rendering at the beginning to reduce the build time. In contrast to ISR, no content updates are allowed for pages that have already been rendered, thus <strong>ensuring the immutability<\/strong> of pages and builds. With DPR, deferred pages, i.e., pages that were excluded from the initial rendering, are generated on-demand and cached but not persisted right away.<\/p>\n<p>DPR is a theoretical concept developed by Netlify (see their <a href=\"https:\/\/github.com\/jamstack\/jamstack.org\/discussions\/549\">RFC<\/a> on DPR for more information). Gatsby presented an implementation of the idea in October 2021 called Deferred Static Generation (DSG). Apparently, overly complicated terms are not uncommon in the Jamstack ecosystem.<\/p>\n<figure id=\"attachment_36326\" aria-describedby=\"caption-attachment-36326\" style=\"width: 920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36326\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1.png\" alt=\"Diagram of a request flow with applied Distributed Persistent Rendering (DPR)\" width=\"920\" height=\"383\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1.png 2412w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-300x125.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-1024x426.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-768x320.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-1536x639.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-2048x852.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-1920x799.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-400x167.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/DPR-1-360x150.png 360w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><figcaption id=\"caption-attachment-36326\" class=\"wp-caption-text\">Example of a request flow with applied Distributed Persistent Rendering (DPR)<\/figcaption><\/figure>\n<p>Gatsby\u2019s DSG allows to take a snapshot of the deferred pages&#8216; content at the time of build and then render based on that content later. This guarantees the immutability of builds and pages.<\/p>\n<p>While ISR is a good choice for dynamic use cases, DPR\/DSG is ideally suited for more static use cases such as blogs or magazines because it allows deferring long-tail pages that are rarely accessed, reducing the build time by a substantial amount.<\/p>\n<p>Modern build time optimization strategies such as ISR and DPR\/DSG can shorten build times significantly and thus open up many new (dynamic) use cases for the Jamstack architecture while preserving the inherent benefits of static site generation such as high performance, scalability, reliability, and security \u2013 especially when combined with build caching and techniques like incremental builds. However, they often come at the <strong>cost of added complexity<\/strong> and might introduce <strong>vendor lock-in<\/strong>.<\/p>\n<p>As mentioned before, Jamstack apps are statically deployed and enhanced by client-side JavaScript, e.g., via serverless APIs. Below, we look at some of the latest innovations in edge computing that allow backend functionality to be offloaded to the edge.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Edge-functions-%E2%80%93-serverless-on-fire-%F0%9F%94%A5\"><\/span>Edge functions \u2013 serverless on fire \ud83d\udd25<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Both serverless computing and edge networks are inherent parts of the Jamstack. Thus so-called edge functions achieve great synergy when combined with Jamstack apps. Edge functions, similar to cloud functions such as AWS Lambda, allow serverless code to be executed &#8211; however, not in a centralized manner but <strong>distributed across the globe<\/strong> over many points of presence (PoPs), as displayed in the figure below.<\/p>\n<figure id=\"attachment_36335\" aria-describedby=\"caption-attachment-36335\" style=\"width: 922px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36335 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1.png\" alt=\"Abstract illustration of edge infrastructure and its interplay with the origin server and clients\" width=\"922\" height=\"353\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1.png 2724w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-300x115.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-1024x392.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-768x294.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-1536x589.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-2048x785.png 2048w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-1920x736.png 1920w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-400x153.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/edge_infrastructure-1-360x138.png 360w\" sizes=\"auto, (max-width: 922px) 100vw, 922px\" \/><figcaption id=\"caption-attachment-36335\" class=\"wp-caption-text\">Abstract illustration of edge infrastructure and its interplay with the origin server and clients<\/figcaption><\/figure>\n<p>A distinction can be made between two types of edge functions, namely stateless and stateful edge functions, which we will cover in the following chapter.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Stateless-Edge-Functions\"><\/span>Stateless Edge Functions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As the name suggests, stateless edge functions have no state, i.e., they have no \u201cmemory\u201c and do not persist any data. They allow running code and modifying <strong>requests before the server or CDN processes them<\/strong>. Since these scripts are executed decentrally on the edge, they are very easy to scale. In addition, edge functions also have little to no process overhead and, unlike cloud functions, are not affected by cold starts.<\/p>\n<p>Edge functions have been around for a few years but have just recently begun to pick up momentum when Vercel released Next.js 12 featuring Middleware in a beta state. Middleware functions are an implementation of the aforementioned edge functions that can be deployed as such. Under the hood, they are based on <a href=\"https:\/\/developers.cloudflare.com\/workers\/\" target=\"_blank\" rel=\"noopener\">Cloudflare Workers (CFW)<\/a>. Platforms such as Vercel or Netlify support their API without configuration and automatically deploy them as edge functions alongside the web app. They enable access to the <a href=\"https:\/\/developers.cloudflare.com\/workers\/runtime-apis\/\" target=\"_blank\" rel=\"noopener\">Service Workers API<\/a> on the edge. In contrast to conventional cloud functions such as AWS lambda, which run in sophisticated environments like Node.js inside a container or virtual machine, CFWs run inside <a href=\"https:\/\/v8docs.nodesource.com\/node-0.8\/d5\/dda\/classv8_1_1_isolate.html\" target=\"_blank\" rel=\"noopener\">V8 isolates<\/a>. Isolates are lightweight contexts with their own scope and memory that group variables with the code allowed to mutate them.<\/p>\n<figure id=\"attachment_36330\" aria-describedby=\"caption-attachment-36330\" style=\"width: 921px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36330 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates.png\" alt=\"graphical comparison of VMs\/Containers and V8 Isolates for Serverless Functions\" width=\"921\" height=\"451\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates.png 1160w, https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates-300x147.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates-1024x501.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates-768x376.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates-400x196.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/v8_isolates-360x176.png 360w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><figcaption id=\"caption-attachment-36330\" class=\"wp-caption-text\">Simplified comparison of VMs\/Containers and V8 Isolates for Serverless Functions<\/figcaption><\/figure>\n<p>A single instance of V8 can run a large number of isolates without introducing much additional process overhead.<\/p>\n<p>Even though stateless edge functions lack configurability, being limited to the Service Workers API plus custom APIs depending on the platform, they are still helpful in some cases, especially since support for ECMAScript modules was added. For example, they can be used for:<\/p>\n<ul>\n<li>Stateless authentication, e.g., as displayed in the figure below where the token verification takes place at the edge<\/li>\n<li>Redirects and rewrites, e.g., for A\/B testing, or to route a user directly to the correct locale<\/li>\n<li>Modifying headers, e.g., for feature flags<\/li>\n<li>Conditional blocks, e.g., security (bot detection, old TLS versions), region blocks, etc.<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<figure id=\"attachment_36332\" aria-describedby=\"caption-attachment-36332\" style=\"width: 920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36332 \" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge.png\" alt=\"graphic of Route Protection at the Edge\" width=\"920\" height=\"432\" srcset=\"https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge.png 1722w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-300x141.png 300w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-1024x481.png 1024w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-768x361.png 768w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-1536x722.png 1536w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-400x188.png 400w, https:\/\/www.inovex.de\/wp-content\/uploads\/authentication_at_edge-360x169.png 360w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><figcaption id=\"caption-attachment-36332\" class=\"wp-caption-text\">Route Protection at the Edge using Clerk and Next.js Middleware<\/figcaption><\/figure>\n<p>Still, as stateless edge functions do not persist state, coordinated processing is not possible and individual instances cannot be explicitly addressed. However, this changes with stateful edge functions.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Stateful-Edge-Functions\"><\/span>Stateful Edge Functions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The most advanced technology that allows for stateful processing at the edge comes from Cloudflare, the so-called <a href=\"https:\/\/developers.cloudflare.com\/workers\/runtime-apis\/durable-objects\/\" target=\"_blank\" rel=\"noopener\">Durable Objects (DOB)<\/a>. Instances of DOBs can be specifically targeted by clients and have their own volatile and persistent storage across multiple clients and connections.\u00a0 They can be used to partition the state of an app so that it corresponds to the physical memory units. For example, a shopping cart is a logical unit of a state that can be physically implemented as an encapsulated unit using DOBs. This <strong>aligns logical and physical state<\/strong> and many logistical tasks can then be handled by the infrastructure provider, especially with regard to scaling.<\/p>\n<p>In addition, they support WebAssembly and allow to set up lengthy WebSocket connections. The latter opens up many possibilities in terms of connectivity with databases, but above all many real-time use cases, for example:<\/p>\n<ul>\n<li>Real-time chats, feeds, like counters, notifications, live coding, etc.<\/li>\n<li>Dynamic pricing, product placements or recommendations, etc.<\/li>\n<li>Multiplayer Gaming, as demonstrated <a href=\"https:\/\/blog.cloudflare.com\/doom-multiplayer-workers\/\">here<\/a>.<\/li>\n<li>\u2026<\/li>\n<\/ul>\n<p>In short, using DOBs for these use cases has two advantages: performance and ease of use. DOBs achieve low latency through their lightweight runtime, cold-start prevention, and global distribution while automatically adapting to changed request volumes. Furthermore, they can be used without any infrastructure configuration. Therefore, you can focus on the business logic and do not have to touch the infrastructure, even with hundreds of parallel WebSocket connections.<\/p>\n<p>Despite the innovations of the last years, the environments of edge functions cannot keep up with products like AWS Lambda (yet). However, they are getting closer with each release, and tech like <a href=\"https:\/\/deno.com\/deploy\" target=\"_blank\" rel=\"noopener\">Deno Deploy<\/a>, a third-party hosted edge Deno environment, could close or at least narrow this gap in the near future. As with the above build time optimization strategies, there is again the potential of vendor lock-in. While there are many edge function vendors, most of them only offer stateless edge functions. If you want to take advantage of DOBs, you have to rely on Cloudflare and are therefore bound to their processing limits and pricing models.<\/p>\n<p>Now that we have covered a few of the most recent Jamstack-related innovations let&#8217;s wrap up and talk about the possible future of the architecture.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Jamstack-%E2%80%93-too-capable-for-its-own-good-%F0%9F%A7%90\"><\/span>Jamstack \u2013 too capable for its own good? \ud83e\uddd0<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Since the term Jamstack was coined, architecture has had a rather niche existence. Initially, the Jamstack was associated only with static websites but this has changed over time. We have learned that even very dynamic use cases are now possible on the Jamstack without deviating too much from its principles.\u00a0 On top of blogs, portfolios, magazines, or similar, now even webshops or news apps are quite possible due to innovations such as the ones mentioned above and allow to benefit from all Jamstack advantages without being too much affected by its traditional constraints. However, there are still clear limits to the level of dynamism that can be achieved \u2013 especially regarding the content update frequency. Not even the most modern techniques and technologies can keep up with hundreds of updates per second. This means that use cases such as marketplaces and social media are out-of-reach.<\/p>\n<p>Another significant problem is that the Jamstack has become more capable but also more complicated. Many innovations are trade-offs, e.g., between pre-rendering and on-demand rendering as in ISR. As a result, the architecture is becoming less opinionated and the lines between apps that are referred to as Jamstack and those that do not fit the definition are blurring increasingly. Talking about the Jamstack now quickly drifts into abstract discussions, losing sight of the real goal \u2013 a straightforward architecture that promotes fast, uncomplicated development and provides a good user experience. I predict that if this trend continues, the label \u201cJamstack\u201c could lose its usefulness.<\/p>\n<p>However, this does not mean that its principles are therefore void \u2013 on the contrary. There is a clear trend towards static, e.g., Next.js \u2013 an originally SSR-only framework. It has introduced pre-rendering as a default rendering option, and edge computing is just picking up steam. The API economy is also flourishing, and more and more business models based on specialized APIs are emerging.<\/p>\n<p>2022 could be the year that determines whether Jamstack can sustain itself or ultimately perish, depending on the direction the community takes the concept.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article gives an overview of the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.<\/p>\n","protected":false},"author":291,"featured_media":38606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[68,70],"service":[425,444],"coauthors":[{"id":291,"display_name":"Tim Engel","user_nicename":"tengel"}],"class_list":["post-36305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-backend","tag-web","service-backend","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>State of the Jamstack 2022 - inovex GmbH<\/title>\n<meta name=\"description\" content=\"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"State of the Jamstack 2022 - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T08:30:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tim Engel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tim Engel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"15\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Tim Engel\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\"},\"author\":{\"name\":\"Tim Engel\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9fd2585b5d77024c76b6fc7ab058e3c1\"},\"headline\":\"State of the Jamstack 2022\",\"datePublished\":\"2022-09-29T08:30:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\"},\"wordCount\":2488,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png\",\"keywords\":[\"Backend\",\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\",\"url\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\",\"name\":\"State of the Jamstack 2022 - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png\",\"datePublished\":\"2022-09-29T08:30:28+00:00\",\"description\":\"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png\",\"width\":1366,\"height\":768,\"caption\":\"The jamstack logo floating over the numbers 2022\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inovex.de\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"State of the Jamstack 2022\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inovex.de\/de\/#website\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inovex.de\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inovex.de\/de\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\/\/www.inovex.de\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inovexde\",\"https:\/\/x.com\/inovexgmbh\",\"https:\/\/www.instagram.com\/inovexlife\/\",\"https:\/\/www.linkedin.com\/company\/inovex\",\"https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9fd2585b5d77024c76b6fc7ab058e3c1\",\"name\":\"Tim Engel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/88d24e5e9436395a191812e70a68f54e\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a6ebc2c0caf0b0420ef339245dd66d80cc87122158549cff857ff4532cc7e04c?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a6ebc2c0caf0b0420ef339245dd66d80cc87122158549cff857ff4532cc7e04c?s=96&d=retro&r=g\",\"caption\":\"Tim Engel\"},\"url\":\"https:\/\/www.inovex.de\/de\/blog\/author\/tengel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"State of the Jamstack 2022 - inovex GmbH","description":"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/","og_locale":"de_DE","og_type":"article","og_title":"State of the Jamstack 2022 - inovex GmbH","og_description":"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.","og_url":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2022-09-29T08:30:28+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png","type":"image\/png"}],"author":"Tim Engel","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Tim Engel","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten","Written by":"Tim Engel"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/"},"author":{"name":"Tim Engel","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9fd2585b5d77024c76b6fc7ab058e3c1"},"headline":"State of the Jamstack 2022","datePublished":"2022-09-29T08:30:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/"},"wordCount":2488,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png","keywords":["Backend","Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/","url":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/","name":"State of the Jamstack 2022 - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png","datePublished":"2022-09-29T08:30:28+00:00","description":"Overview about the current state of the Jamstack web architecture in 2022 and an explanation of selected technologies and techniques related to the concept.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/state-of-the-jamstack-2022.png","width":1366,"height":768,"caption":"The jamstack logo floating over the numbers 2022"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/state-of-the-jamstack-2022\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"State of the Jamstack 2022"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/9fd2585b5d77024c76b6fc7ab058e3c1","name":"Tim Engel","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/image\/88d24e5e9436395a191812e70a68f54e","url":"https:\/\/secure.gravatar.com\/avatar\/a6ebc2c0caf0b0420ef339245dd66d80cc87122158549cff857ff4532cc7e04c?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a6ebc2c0caf0b0420ef339245dd66d80cc87122158549cff857ff4532cc7e04c?s=96&d=retro&r=g","caption":"Tim Engel"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/tengel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/36305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/291"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=36305"}],"version-history":[{"count":5,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/36305\/revisions"}],"predecessor-version":[{"id":37956,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/36305\/revisions\/37956"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/38606"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=36305"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=36305"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=36305"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=36305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}