Abstract
The rendering of web pages has migrated from the server side to the client side in recent years. Because client side rendering provides better user experience and development efficiency. The development of client-side rendering frameworks such as React, Vue has led to a significant increase in the interactivity and usability of web sites. However, demands for better performance web pages have resulted in server side rendering coming back to the forefront. Since web pages are rendered before sending to the client, the current server side rendering strategy is being referred to as pre-rendering.
In a typical client side rendering web system, during initial web-page loading browsers will first receive web resource files (JavaScript, image, etc.) from the server and then render the content of a webpage based on these resources. Because of the time it takes for initial web resource loading, client side rendering has slower initial load speed. Additionally, because the server does not provide rendered HTML information, it is more challenging for search engines to process web site contents resulting in an inferior search engine page ranking. Modern pre-rendering techniques address both of these shortcomings by computing the HTML content in the server and sending the rendered results to the client for display. In this way the initial loading of the web resources is delayed and does not affect the displaying of the web content, and search engines can have an easier time performing ranking computation based on the actual HTML content.
The goals of this project are to explore, understand, and verify existing pre-rendering solutions. Specifically, this project closely examines relevant technologies, designs and implements an example pre-rendering system based on these technologies, and analyzes the performance of the pre-rendering solution in comparison with the client-side rendered version of the same web system. The project is able to deliver a pre-rendered website providing discount information as a Single Page Application (SPA). Different pre-rendering options (server side rendering, static side generation) are supported by the system, and responsive design is followed such that the site can be coherently viewed on devices with drastically different resolutions.
The system was successfully delivered where users can experience pre-rendering solutions, responsive design and single page routing. The project is deployed with serverless backend support. The performance of the system is evaluated and compared with the client side rendering solution. The results showed that the time to first contentful paint of pre-rendering is a significant improvement, however, the time to interact is not improved.