Native Server-Side Pre-Rendering for SPA Static HTML Generation

Solution Overview

Problem

Existing pre-rendering methods, such as headless-browser-based approaches, are resource-intensive and slow due to the need for complete browser processes and additional system libraries, which hinder efficient page rendering in Single Page Applications (SPAs).

Innovation Solution

A method utilizing native server-side rendering functions within a web frame to generate static HTML files by acquiring static resources and HTML structure information through specific hooks of the html-webpack-plugin, executing JavaScript scripts in an eval environment, and simulating a browser host environment using JSDOM, thereby avoiding the inefficiencies of headless-browser-based methods.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If headless-browser-based pre-render method is used, then page rendering can be achieved, but resource consumption increases and rendering speed decreases

Engineering Contradiction:

Improvepage rendering capabilityVSAvoidrendering speed

Core Design Contradiction:

ReliabilityVSProductivity

Solution Approach 1:

The patent extracts only the essential rendering capabilities from the complete browser process, using a simplified rendering engine that handles only the critical rendering tasks without the overhead of full browser functionality, thus achieving fast rendering without needing a complete browser

Inventive Principle:

Principle #2Taking out (Extraction)

Solution Approach 2:

The patent creates a lightweight copy of the rendering engine with only the necessary components for static resource rendering, eliminating the need for additional system libraries and complex browser processes while maintaining rendering capability

Inventive Principle:

Principle #26Copying

2Reliability

If headless-browser-based pre-render method is used, then page rendering can be achieved, but system library requirements increase

Engineering Contradiction:

Improvepage rendering capabilityVSAvoidsystem library requirements

Core Design Contradiction:

ReliabilityVSDevice complexity

Solution Approach 1:

The patent extracts only the essential rendering capabilities from the complete browser process, using a simplified rendering engine that handles only the critical rendering tasks without the overhead of full browser functionality, thus achieving fast rendering without needing a complete browser

Inventive Principle:

Principle #2Taking out (Extraction)

Solution Approach 2:

The patent designs a universal rendering solution that integrates multiple functions (JavaScript execution, DOM manipulation, rendering) into a single lightweight component, eliminating the need for separate system libraries and reducing overall system complexity

Inventive Principle:

Principle #6Universality (Multi-functionality)

3Manufacturing precision

If complete browser process is used for each page routing, then rendering accuracy is maintained, but resource consumption increases

Engineering Contradiction:

Improverendering accuracyVSAvoidresource consumption

Core Design Contradiction:

Manufacturing precisionVSUse of energy by moving object

Solution Approach 1:

The patent applies partial action by executing only the necessary JavaScript scripts required for rendering specific page elements rather than running the complete browser process, thereby maintaining rendering accuracy for critical content while significantly reducing resource consumption

Inventive Principle:

Principle #16Partial or excessive action

Solution Approach 2:

The patent creates a lightweight copy of the rendering engine with only the necessary components for static resource rendering, eliminating the need for additional system libraries and complex browser processes while maintaining rendering capability

Inventive Principle:

Principle #26Copying

Data Source

PatentUS11829436B2Method and apparatus of pre-rendering page, electronic device, and storage medium

Publication Date: 2023.11.28 BAIDU ONLINE NETWORK TECH (BEIJIBG) CO LTD

AI summary

The present disclosure provides a method and apparatus of pre-rending a page, an electronic device, and a storage medium. The method of pre-rendering the page may include: acquiring a static resource of a page to be processed; acquiring a hypertext markup language structure information compiled of the page; and generating a static hypertext markup language file of the page by using a native server-side rendering function of a web frame according to the static resource and the hypertext markup language structure information.