Jamstack Architecture and Its Application in Douyin E‑Commerce 818 Performance Optimization

Introduction

This article, based on the Douyin e‑commerce 818 main‑hall performance optimization project, introduces the Jamstack architecture.

Jamstack Overview

Jamstack, proposed by Netlify in 2016, is an architectural concept where JAM stands for JavaScript, APIs, and Markup.

JavaScript (J): Client‑side logic for rendering and data requests (e.g., React, Vue, Angular).

APIs (A): Data interfaces callable from JavaScript (e.g., Feishu Open API, GitHub API).

Markup (M): Template solutions, site generators, and build tools (e.g., Nunjucks, Webpack, Gatsby).

Traditional Web Architecture

Traditional LAMP or MEAN stacks render pages by querying a database on each request, merging results with templates and plugins to generate HTML, which can slow page load time.

Jamstack Architecture

In Jamstack, HTML files are pre‑generated and cached on a CDN, so a page request does not need a database query; dynamic data is fetched via APIs when required.

Implementation of Jamstack

Jamstack implementation relies on several points:

Front‑end and back‑end separation

Front‑end pre‑build support

CDN cache control to decide whether to pull from origin (commonly based on ETag)

Unified API gateway for interface management

Jamstack Practice

Solution Design

Jamstack is an architectural idea; for the Douyin e‑commerce promotion we made specific adjustments.

In e‑commerce scenarios, data is divided into static and personalized parts Static part is delivered together with static pages Personalized part is requested dynamically via APIs

Because pages cannot be pre‑built and operations change frequently, we provide an online page‑building service that supports CDN origin pull.

Dynamic build Based on a dynamic origin, pages can be adjusted on the fly. For performance, we use a timed origin‑pull strategy to reduce load and achieve faster secondary requests. The origin also allows personalized pull strategies, such as point‑in‑time refresh.

Jamstack Plus

Jamstack primarily targets browser web scenarios, but most traffic now comes from in‑app browsers, so we leverage client capabilities for better performance.

DNS & TCP

Our measurements show DNS and TCP add 150‑200 ms latency. dns‑prefetch and preconnect only solve part of the problem; we use the TTWebview domain keep‑alive feature to maintain long‑living connections, greatly reducing this delay.

API Prefetch

Jamstack separates static and dynamic parts. Normally, after the main document loads, JavaScript requests API data. With client capabilities, we can load API data in parallel while the main document is loading.

Static Resource Offline

We pre‑cache static resources (JavaScript, CSS, images) on the client, dramatically reducing static asset load time.

Code Cache

Using the TTWebview kernel, we cache compiled JavaScript results, further cutting the runtime cost of subsequent page opens.

Future

Cross‑Platform Solutions

Pages are becoming increasingly complex, and JavaScript execution time grows. Exploring pre‑compilation approaches such as Flutter JIT for development and AOT for production is worthwhile.

SSR

If page data is not highly personalized, combining SSR with Jamstack offers an excellent architecture that balances performance and dynamism.

Team Introduction

We are the Douyin e‑commerce front‑end marketing team. If you are interested in building the next‑generation platform, cross‑platform solutions, or performance optimization, contact mengdesen#bytedance.com.