To help us understand server-side rendering, we can begin this article with a few questions: What is server-side rendering? Why use server-side rendering? When is server-side rendering used? How to use server-side rendering?

What is server rendering

To understand server-side rendering, it’s important to understand the concept of rendering: data and templates assembled into HTML

Client Side Rendering (CSR) vs. Server Side Rendering (SSR)

To better understand server-side rendering, we can compare server-side rendering to client-side rendering.

Client-side rendering

The front end does view and interaction, while the back end only provides interface data. The front end requests data from the server side through Ajax, generates DOM through JS after obtaining the data, inserts HTML pages, and finally renders to the user. The page code is not visible in the browser source code. Client-side rendering advantages:

  1. Makes the server calculation pressure lighter
  2. Do the separation of the front and back end, in the team development as long as responsible for their own tasks, so that the development efficiency has been significantly improved.

Disadvantages of client rendering:

  1. Not conducive to SEO, search engine crawler can not see the complete program source code
  2. When the number of requests increases, the user waits longer, resulting in slow rendering of the first screen
  3. The cost is the performance of the user’s browser

Server side rendering

Before the server returns the HTML, it generates the HTML by filling it with data in certain fields, symbols, and then sending it to the client, which parses the HTML and renders the page to the user, which is visible in the browser source code. Server-side rendering advantages:

  1. Fast response, good user experience, fast first screen rendering
  2. Search engine friendly, search engine crawler can see the complete program source code, conducive to SEO

Disadvantages of server-side rendering:

  1. This increases the computing pressure of the server and consumes the server performance
  2. It is not easy to maintain. If the node middle layer is not used, the division of labor of the front and back ends is unclear, and good parallel development cannot be carried out

Two render comparisons

Both rendering are essentially the same as string concatenation to generate HTML, and the difference between the two is ultimately time and performance. When the client makes data request in different network environment, the client needs to experience the time period from js loading to data request and then to page rendering. This leads to significant time consumption and browser performance consumption. However, when the server requests on the Intranet, the data responds quickly and there is no need to wait for the LOADING of JS code. It can first request the data and render the visual part and then return it to the client, and the client will render the visual part again. In this way, the performance of the server is mostly consumed. Client page response times are also faster. See the rendering roadmap below:

Why use server-side rendering

When it comes to why server-side rendering is used, the first thing to think about is what problem server-side rendering solves. According to the above, we can briefly sum up two points.

The first screen loads fast

Under client rendering, in addition to loading HTML, it also needs to wait for js/ CSS to complete loading, and then execute JS rendering to render the page. During this period, the user has been waiting, while the server only needs to load the content of the current page, instead of loading all JS files at one time. The wait time is greatly reduced and the first screen loads faster.

Conducive to SEO optimization

Servers render pages that help search engines recognize page content, which is good for SEO, which is the use of search engine rules to improve a site’s natural ranking within the relevant search engines. The current search engine crawler generally adopts the mode of full-text analysis, which covers the content of three main parts of a website: text, multimedia (mainly pictures) and external links, through which the type and theme of a website can be judged. For client-side rendering, search engines can’t capture pages that ajax crawls and then renders dynamically. The server-side rendered page code can be seen in the source code, which helps search engines identify.

When is server-side rendering used

We already know that the two advantages of server-side rendering are first screen rendering and SEO optimization. If the user experience requirements are high or SEO optimization is needed, we can use server-side rendering. But isn’t it necessary to use server-side rendering? The answer is not necessarily, because the server rendering cost is more expensive than the client rendering (server resources are scarce and precious), if not for the user experience or SEO requirements to the extreme, we can still choose the client rendering, and in client rendering to solve the shortcomings of slow first-screen optimization and not conducive to SEO.

  • Use prerender and upgrade search engines when dealing with SEO issues.
  • White Screen can be loaded, Skeleton Screen.

In a word: actual development is based on actual scenarios.

How to use server-side rendering

Next. Js is a lightweight react server rendering application framework. . Next. Js is a lightweight React server rendering application framework. Nuxt.js framework is recommended for vue based server-side rendering development. Nuxt.js is a lightweight application framework based on Vue. It can be used to create server-side rendering (SSR) applications, and can also act as a static site engine to generate static site applications, with elegant code structure layering and hot loading features Let’s build a server-side rendering framework based on Typescript+ ant-Design + Redux+ next.js

Refer to the link

Server Side Rendering (SSR)

The last

GitHub if there are omissions, please correct!!

If feel helpful to you! Please don’t forget to like or follow! Your attention will be my motivation to move forward! Rush duck!!

“Fearless front end” updates the community excellent technical articles from time to time!