Redesigning Bilibili PC Web: Front‑end Architecture, Vue3 SSR, Grid Layout and Performance Optimization

This article, authored by senior front‑end engineer Liu Lei from the High‑Energy Chain Open Platform, describes the motivation, technical方案, challenges and solutions behind the 2021 redesign of Bilibili's PC web homepage.

Background: With the rise of widescreen monitors, the existing Bilibili web design could no longer efficiently distribute content on large screens. The team decided to overhaul the visual style to support both large and small screens.

Target page: The homepage was chosen as the first pilot because of its high user visibility and complex business logic.

Requirements from stakeholders:

Users (young, tech‑savvy) can accept an aggressive redesign with gradual rollout.

Some niche users need custom themes, so hackability must be preserved.

Product goal: improve content distribution efficiency by increasing screen‑real‑estate and integrating AI recommendations.

Design goal: a grid‑based responsive layout that works on narrow (iPad) and ultra‑wide (ultrawide) screens, with a flat visual language, component‑based structure, and reduced color usage.

Technical方案:

JS: Chose Vue3 as the base framework (SSR support, internal expertise) and built a custom SSR solution (CSR < SSR < ESR).

CSS: Implemented responsive and grid layouts using flex , grid , calc() , percentage widths, @media queries, and Sass.

Theme handling: Adopted CSS variables ( var(--color) ) over pre‑compiled tokens to allow runtime theme injection.

Componentization: Managed the monorepo with Lerna, structuring dependencies as PureJS → Framework UI → Service → Project/Page (e.g., http.ts → VideoCard.vue → BiliHeader.umd.js → Homepage.vue ).

The final stack is: Lerna + Vite + Vue3 (SSR, TypeScript, setup) + Grid + @media + Sass + CSS‑var.

Key challenges and solutions:

Abstracting grid/responsive layout for reuse and modularity.

Implementing a low‑cost Vue3 SSR/CSR hybrid that supports graceful degradation.

Designing a highly reusable API → Store → View (List → Item) pattern for the homepage’s many independent sections.

Balancing user experience, maintainability, and performance.

3.1 Grid/Responsive abstraction: Used CSS nth‑of‑type selectors combined with Sass mixins to hide or show navigation items based on screen width, ensuring the “more” menu always contains the last items.

3.2 Low‑cost Vue3 SSR/CSR solution: Implemented a pure‑JS http.ts that can replay server‑fetched data on the client, enabling page downgrade to CSR if SSR fails.

3.3 API → Component → Component pattern: Skipped a centralized store; each module fetches its own data, transforms it in the API layer, and passes it directly to List and Item components, achieving modularity.

3.4 Balancing UX, maintainability, performance: Discussed asyncData limitations in Vue2 and introduced a server‑side replay strategy to keep requests parallel where possible.

3.5 Performance‑optimization principles: Prefer CSS over JS, master Chrome DevTools performance panel, understand reflow/repaint, focus on first‑paint, idle, and interaction phases.

3.6 Practical optimizations: Examples include CSS‑only text alignment, CSS‑based Lottie replacements, lazy‑loading iframes with setTimeout + requestIdleCallback , deferred SDK scripts with retry logic, IntersectionObserver for viewport checks, component singleton reuse, and skeleton screens to avoid CLS.

After applying these techniques, the homepage’s performance score improved from an initial 22 to a much higher level, though LCP remained limited by high‑resolution images.

Conclusion: The aggressive front‑end refactor in early 2021 delivered a modern, performant, and maintainable Bilibili PC web experience, setting a benchmark for other Chinese ToC video platforms.