How Serverless Is Redefining Frontend Development: Challenges and Solutions

Serverless Front‑End Challenges

In 2018 the front‑end landscape featured PWA, SSR, AMP, Web Components, Polymer, GraphQL, Truffle (blockchain) and TensorFlow.js, but 2019 saw Serverless grow fastest, making it essential to analyze front‑end pain points under this new paradigm.

Industry Investment in Serverless

Chinese tech giants are heavily investing in Serverless: Tencent launched Serverless 2.0 and Alibaba Cloud introduced a reservation mode, both aiming to accelerate migration of traditional applications to Serverless and share its benefits.

Key Questions for Front‑End Engineers

What value does Serverless bring?

Which development frameworks suit Serverless?

How should traditional rendering be handled under Serverless?

Will development models differ significantly from the past?

Exploring Framework Migration

Attempts to move frameworks like Egg.js to Serverless retain familiar experiences but encounter issues such as lack of cross‑cloud support and insufficient toolchain adaptation for specific Serverless features.

Upgrading the FaaS Architecture

The rise of Node.js web has turned front‑end engineers into full‑stack developers, and Serverless offers a shift from DevOps to NoOps. Alibaba responded by creating the midway‑faas framework, integrating a complete toolchain to redesign the entire development, debugging, release, gray‑release and rollback processes for Serverless.

The upgrade pursues two goals: front‑end empowerment—breaking technical barriers and diving deeper into data and business logic—and efficiency—reducing development cost, lowering entry barriers, and enabling rapid, low‑overhead delivery.

Core Technical Stack

User code bridges functions and BaaS services, with HTTP gateway, function runtime, and containers forming the three core technologies.

Rendering Layer in Serverless

Server‑Side Rendering (SSR) remains crucial. Using Functions as a Service (FaaS) simplifies API development: no operations, function‑level code, and easy scalability. In Serverless, rendering can go beyond simple CSR by adopting approaches such as:

Unified client and server rendering with Next.js or egg‑react‑ssr.

Umi SSR generating a standalone umi.server.js for rendering.

Umi’s built‑in Webpack and React to simplify development and enable graceful degradation with CDN.

Integrating FaaS APIs for seamless rendering integration.

Example server.yml configuration for a Lambda function maps the HTTP path “/” to app.server, and the function uses ctx.ssrRender to load Page.server.js for SSR.

Four Stages of Architecture Upgrade

CSR: developers manage React and Webpack.

SSR: developers manage React, Webpack, and Egg.js.

Umi SSR (isomorphic): developers manage React and Egg.js; Webpack is hidden by Umi.

Future FaaS rendering: developers only need to manage React, without Webpack or Egg.js.

Future Opportunities in Serverless

Automation still has gaps from domain registration to gateway and cluster provisioning. Page‑centric development raises management costs, as pages and APIs exist as functions. Multi‑stack integration (micro‑frontends, widgets) and monitoring of fragmented large applications become critical.

Envisioned future: developers write only components, configure pages, and integrate systems, achieving higher business ownership, innovation, and breaking front‑end limits.

Looking Ahead for Front‑End

Alibaba’s four pillars—Serverless, infrastructure building, intelligence, and IDE—signal rising expectations for front‑end talent to be multi‑disciplinary, algorithm‑savvy, and globally influential.

D2 Serverless Special Session

The event gathers international and domestic experts to discuss Serverless‑enabled front‑end development, component‑as‑service, SSR practices, framework upgrades, and NPM CDN synchronization, offering a platform for knowledge sharing and community building.