How to Build a High‑Performance Poster System with Server‑Side Rendering

This article introduces the business background and design implementation of the poster system, authored by Liu Zhenli, former front‑end infrastructure lead at New Oriental Online, responsible for the poster system and courseware platform.

Foreword

Posters are a common advertising medium and, with the rise of online marketing, digital posters have become essential for user acquisition and viral campaigns. Unlike traditional print posters, online posters must be flexible and often personalized for each user, making stable and efficient production crucial. This series of articles describes how to build an efficient front‑end poster system.

The term “poster” here refers to an image that typically contains a QR code or mini‑program code to direct users to activities, WeChat accounts, or public accounts. An example poster created by the system is shown below.

Business Background

In growth‑related scenarios such as group‑buying or referral campaigns, posters serve as the carrier to attract users via social groups or Moments. To evaluate campaign effectiveness, posters include personalized copy and user‑specific information. Because designers cannot create a unique poster for every user, a tool or system is needed to generate posters automatically. Our self‑developed poster system streamlines creation, reduces development cost, and improves production efficiency.

The system integrates the company’s design asset library, offering abundant resources for designers, product managers, and operators. It supports online editing and one‑click conversion of design drafts into posters, while server‑side generation ensures image clarity and stability. Like any product, the system evolves through continuous iteration.

Technical Solution

A poster is essentially an image; the solution separates poster production into

templating

and

engine

stages. Poster elements are classified into two categories:

Basic elements: lines, geometric shapes, images, text, etc.

Business elements: QR codes, mini‑program codes, avatars, and other business‑specific items.

Templating treats these elements as minimal units described by a configurable data structure, called a poster template. The template editor generates such templates.

Engineization provides a unified rendering capability: the engine parses a template, receives personalized parameters, and draws the final poster image.

Poster Template

The templating approach defines a DSL using JSON to describe a poster template. The core workflow stores the drag‑generated template as JSON, which is later re‑rendered for user display. An example JSON template is shown below:

<code>{
  "width": 1920,
  "height": 720,
  "textArr": [
    {
      "id": 3,
      "drawType": "text",
      "text": "《前端实现高效的海报系统》",
      "x": 100,
      "y": 102.6,
      "zIndex": 3
      // ...
    }
    // ...
  ]
}</code>

Poster Rendering

Initially, poster rendering was performed on the client side. However, client‑side rendering suffered from performance bottlenecks, image quality issues, and incompatibility on low‑end Android devices. After evaluating two client‑side approaches—HTML‑to‑canvas conversion (html2canvas) and direct Canvas drawing—we found html2canvas produced blurry images and unreliable QR code recognition.

Consequently, we migrated rendering to the server side. Server‑side rendering can be implemented in two ways:

Using Puppeteer or PhantomJS to capture screenshots of a rendered page.

Using

node‑canvas

to draw and export images directly.

We chose

node‑canvas

because it aligns with our existing client‑side Canvas workflow and allows a unified rendering SDK for both web and Node environments. The client‑side editor still provides real‑time preview, but final image generation occurs on the server.

System Implementation

The poster system consists of two main components: the Poster Management Backend and the Poster Rendering Service.

Poster Management Backend : Designers, operators, or product managers create posters or templates via a visual editor, using drag‑and‑drop or design‑import methods.

Poster Rendering Service : This service renders templates into poster images, uploads them to a CDN, and provides API endpoints for business systems to retrieve the CDN URLs.

Poster Management Backend

The backend includes modules for template management, asset management, and poster editing. The editor supports both static poster editing and dynamic template editing. Screenshots of the editor interface are shown below.

Poster Rendering Service

Service Registration : Integrators must register to obtain a service ID and secret, which are used for request authentication.

Rendering Process : Before rendering, the service checks a cache for an existing poster. If absent, it parses the template, draws each element onto a Canvas, generates a PNG, uploads it to the CDN, and stores the link.

Storage Control : Rendered posters are cached in Redis for repeated accesses within a short period, and their CDN URLs are persisted in MySQL to reduce server load and improve throughput.

Online Effects

The poster system is now widely used in growth, dual‑teacher, and sales scenarios, enabling rapid poster generation for business systems. It lowers the barrier for product and operation teams to create posters without design expertise, supports batch generation via templates, and offers APIs for developers to generate custom posters dynamically.

As usage expands, performance requirements increase. Server‑side rendering guarantees speed and quality, typically rendering a simple poster in

90ms

and a complex one in around

300ms

.

Conclusion

In multiple New Oriental Online business scenarios, the poster system plays an indispensable role. This article covered the system’s business background, technical solution, and implementation. Detailed topics such as rendering performance optimization, DSL parsing, and editor implementation will be explored in future articles. Scan the QR code in the poster to stay updated.