Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what does the ssr project in react refer to". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what does the ssr project in react refer to" can help you solve the problem.

In react, ssr is the abbreviation of "Server Side Rendering", which means server-side rendering; the splicing of data and HTML is completed on the server side, and the client side sends a request to the server side, and the server side returns the spliced HTML, which only needs to be displayed by the client side.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is react's ssr project?

SSR:Server Side Rendering

The splicing of data and HTML is completed on the server side, the client sends a request to the server, the server returns the spliced HTML, and the client only needs to display it.

Now many front-end projects are single-page applications, for a good user experience and front-end separation, we will create separate client programs. Now there are many mature frameworks for building client applications, which we can directly use and modify to meet the needs of the project. Of course, we can also build them entirely according to our own needs.

By default, you can output components in a browser to generate DOM and manipulate DOM for user interaction. However, sometimes you can render the same component as server-side HTML strings, send them directly to the browser, and finally "activate" these static tags into a fully interactive application on the client side, which is server-side rendering.

Why use SSR

Compared with traditional SPA (single page application (Single-Page Application)), the main advantages of server-side rendering (SSR) are:

Better SEO, because the search engine crawler crawler can view fully rendered pages directly.

The pages of single-page applications are all through ajax to request data and dynamically generate pages, while search engine crawlers cannot grab the content generated by JS and encounter single-page application projects, which is not conducive to SEO, while SSR will generate pages on the server side and send them to the client to view complete pages, which is more convenient for pages such as about and contact pages.

Solve the problem of white screen on the first screen. For slow network conditions or slow devices, you don't have to wait for all the JavaScript to be downloaded and executed before displaying the server-rendered markup, so your users will see the fully rendered page more quickly. It usually produces a better user experience.

When a single-page application is loaded for the first time, you need to send a packaged (requirejs or webpack packaged js) to the browser before you can start the application, which is a bit slow. If you finish rendering the web page in advance on the server side and send it directly to the browser, the user will see the fully rendered page more quickly, usually resulting in a better user experience.

SSR workflow

As you can see from the figure above, the server only generates HTML code, while the front end generates a copy of main.js that is provided to the server's HTML for use. This is how React SSR works.

This is the end of the content about "what does the ssr project in react refer to". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.