What is SSR(Server-side rendering) MUA?

SSR is the abbreviation of Server Side Render, in brief: Server-side rendering is the process in which the content presented on the web page has been generated on the server side. When the user browses the web page, the server responds to the complete HTML structure content generated on the server side to the browser, and the browser directly displays (renders) the complete HTML structure content on the page.

How did SSR(server-side rendering) come about?

SSR server rendering has been around for a long time, or before CSR(client-side rendering) was around for Web pages, such as: JSP, ASP,.net, SMARTY and so on are the server rendering templates used by JAVA, C#, PHP and other developers, so the traditional web development methods are basically server-side rendering.

Why CSR(Client-side rendering)?

Due to the traditional SSR(server-side rendering) development mode, in the continuous expansion, update and iteration of the project, all kinds of complex business needs and business logic are processed by the background, user experience, performance and other natural decline, and the previous Web development is no front-end this term, From the project demand analysis, overall planning, database set up, all kinds of logic processing, page cutting diagram, writing style, business interaction, compatibility processing and so on, are back-end developers to complete, coupled with the user experience requirements are becoming higher and higher, so that back-end developers are unable to do. As partial refresh the popularity of ajax technology, the client can use js to asynchronous network request for data, and in the case of no refresh the entire page dynamically generated HTML, and to organize data in some way as a part of the page or pages, finally presents a complete user interface, this is more efficient and performance is also better, Later, the separation of the front and back ends of the project slowly emerged. The back end was only responsible for providing data API interface, while the front end was only responsible for data rendering and interaction, and the front and back ends did their own work.

Pros and cons of SSR(server rendering) versus CSR(client rendering)

Advantages of SSR:

  • Good for SEO: Different crawlers work similarly, they just crawl the source code and don’t execute any scripts on your site (except for Google, where it’s said that Googlebot can run javaScript). With React or other MVVM frameworks, most of the DOM elements on a page are dynamically generated from JS on the client side, reducing the amount of content available for crawler analysis (see Figure 1). In addition, browser crawlers don’t wait for our data to complete before grabbing our page data. The server render returns to the client the final HTML that has retrieved the asynchronous data and executed the JavaScript script. The network crawl can capture the full page information.

  • The first screen rendering is an HTML string sent from Node, not a JS file, which makes it easier for the user to see the content of the page. Especially for large single-page applications, the file volume is relatively large after packaging, and it takes a long time for ordinary clients to render and load all required files. The home page will have a long white screen waiting time.

Limitations of SSR:

  • Due to the high pressure on the server side, rendering was done by the client side, but now it is done by the server node service. Especially in the case of high concurrent access, it consumes a lot of SERVER CPU resources.

  • The development criteria are limited by the server-side rendering, which only executes lifecycle hooks before componentDidMount, so the library referenced by the project does not use any other lifecycle hooks, which limits the selection of reference libraries.

  • In addition to being familiar with Webpack and React, it is also necessary to master node, Koa2 and other related technologies. Compared to client rendering, the project construction and deployment process is more complex.

Advantages of CSR:

  • The front and back ends are separated, with the front end focused on UI and the server focused on logic.
  • Local refresh can be achieved without requiring a complete page each time, good user experience.
  • Simplifies server deployment.
  • Good interactivity, easy to achieve a variety of effects.

Limitations of CSR:

  • Bad for SEO, crawlers have a hard time picking up content.
  • The first screen rendering is slow and requires loading a bunch of JS and CSS files before rendering.
  • The client is overloaded.

Essential differences between SSR and CSR:

The most important difference between client-side and server-side rendering is who does the full stitching of the HTML file, server-side rendering if it’s done on the server and then returned to the client, and client-side rendering if the front end does more work to finish stitching the HTML.

Use scenarios for SSR(server rendering)

Individual thinks, according to the project application scenario and decide, must be used instead of SSR (rendering) of a service or must use CSR (client rendering), is now the front development, project development is done with the SPA (single page) framework, nature is also a CSR with a little more, so if the project is very care about in the search engine rankings, etc., SSR can be considered, because the biggest advantage of SSR lies in SEO and fast loading speed of the first screen. When enterprises care more about the ranking of search engines and enable users to see and visit their websites as much as possible, SSR can be considered. The importance of first screen loading speed depends on business requirements.