Uniqy: A Vue2‑Based Front‑End Framework for iQIYI PC Web with Hybrid SSR and PJAX

iQIYI’s main PC Web site has been using the legacy qiyiV2 framework (based on SeaJS and jQuery) for almost six years. While qiyiV2 provides modular and object‑oriented development, it suffers from poor extensibility, heavy compatibility code for IE6‑8, and limited use of modern browser features.

To address these issues, a new framework called Uniqy was built on Vue 2.0. Uniqy integrates popular techniques such as PJAX, component lazy‑loading, slot usage, and decorator‑based class syntax, and it splits its functionality into two packages: core (the framework core) and Qi (utility methods).

Key Features

Based on Vue 2.0, with additional integrations (PJAX, lazy loading, etc.) to suit iQIYI’s component‑rich, high‑iteration business.

Uses Vue slots to combine server‑side rendering (SSR) for SEO‑critical components with client‑side asynchronous rendering for less critical parts.

Introduces PJAX to replace full‑page refreshes with partial HTML fragment swaps, leveraging vue‑router hooks.

Supports decorator and class‑style component declarations, improving code readability and maintainability.

Component lazy‑loading via v‑if toggling and the vue‑lazyload plugin reduces initial load time.

Hybrid Rendering Architecture

High‑end browsers (IE10+, Chrome, etc.) receive the Uniqy bundle, while low‑end browsers continue to use the old qiyiV2 code. For SEO, the server renders the initial view, and the client performs a second‑pass rendering to hydrate components. This approach eliminates the white‑screen problem and ensures crawlers can index the page.

Typical rendering flow (simplified):

1. Server renders initial HTML (critical components).<br/>2. Browser loads Uniqy JS bundle.<br/>3. Vue hydrates the server‑rendered markup.<br/>4. Asynchronous components are fetched and rendered on demand.

The first‑screen load time stabilizes around 1100 ms.

PJAX Integration

PJAX fetches an HTML fragment for the target route, extracts the component template, compiles it with Vue.compile, and replaces the component’s render functions during beforeCreate. The relevant router hooks are:

export default {<br/>  beforeCreate() {<br/>    // Determine if this is a new navigation or same‑route update<br/>    // Replace $options.template or compile with Vue.compile as needed<br/>  },<br/>  beforeRouteEnter(to, from, next) {<br/>    if (from.name || (from.path && from.path !== "/")) {<br/>      // trigger PJAX process<br/>    } else {<br/>      next();<br/>    }<br/>  },<br/>  beforeRouteUpdate(to, from, next) {<br/>    // directly enter PJAX for same‑route updates<br/>  }<br/>};

Decorator & Class‑Style Declarations

Uniqy adopts the @Application, @Component, and @Store decorators to define apps, components, and Vuex stores in a concise, class‑based manner.

import { Application } from "@uniqy/core";<br/><br/>@Application({<br/>  el: "#app",<br/>  template: "<div>{{msg}}</div>"<br/>})<br/>class App {<br/>  msg = "Hello world~";<br/>}

Component example:

import { Component } from "@uniqy/core";<br/><br/>@Component({<br/>  name: "hello-world",<br/>  global: true,<br/>  template: "<h1>{{msg}}</h1>"<br/>})<br/>class HelloWorld {<br/>  msg = "I am a component!";<br/>}

Store example:

import { Store } from "@uniqy/core";<br/><br/>@Store()<br/>class HomeScore {<br/>  scoreDatas = {};<br/>  zhuijuDatas = {};<br/>}<br/><br/>const homeScore = new HomeScore();<br/>export { homeScore };

Component Lazy‑Loading

Components not needed on the first or second screen are wrapped with v‑if="false" and later switched to true when they enter the viewport. The vue‑lazyload plugin is used together with a custom lazy‑component wrapper to defer loading.

<template slot‑scope="props"><br/>  ...<br/></template>

This technique was piloted on the iQIYI VIP channel page, resulting in a noticeable reduction of initial load time.

Summary

The Uniqy framework demonstrates a practical migration from a legacy jQuery/SeaJS stack to a modern Vue 2.0 ecosystem, combining server‑side rendering, PJAX navigation, decorator‑based class syntax, and lazy‑loading to achieve better performance, maintainability, and SEO compliance.