Why do YOU need server-side rendering?
The most popular frameworks in recent years are vue/ React/Angular, which can be used to implement spa single-page applications.
Single-page apps have many benefits:
- Good user experience
- High development efficiency
- Good rendering performance
- Good maintainability
But? Single-page apps also have some problems. The two most common problems are:
- The first screen rendering time is too long
- Bad for SEO: Currently SEO is done by crawling the contents of HTML files, but single-page applications have nothing in the HTML files themselves, instead they generate HTML by executing JS code.
Because of these problems, server-side rendering was born.
rendering
First of all, what do we mean by rendering?
Conclusion: Rendering here is a process of stitching data and templates together to render the real DOM.
Next, let’s look at the history of page rendering:
Traditional server-side rendering
As you can see from the figure, the process of combining data and template rendering is carried out on the server side, and only HTML files are returned to the client side.
We use Node to simulate a server-side render:
const fs = require('fs'); const template = require('art-template'); const express = require('express'); let app = express(); app.get('/', (req, res) => { //1. Const templateStr = fs.readfilesync ('./ SRC /index.html', 'utF-8 '); Parse (fs.readfilesync ('./ SRC /data. JSON ', 'utf-8')); // const data = json. parse(fs.readfilesync ('./ SRC /data. JSON ', 'utf-8')); Let result = template.render(templateStr, data); //4. Return res.send(result); }); app.listen(3000, () => { console.log('running') });Copy the codeHowever, with the increasing complexity of the page, this traditional server-side rendering scheme will also have many problems and shortcomings:
- The front and rear ends are not separated and are coupled together, which is not conducive to maintenance
- There will be a lot of pressure on the server side, and the front end will not have enough room to play, so there will be no front-end thing in essence
- Average user experience
It is because of these deficiencies that the latter: front and rear end separation occurs
Two. Client rendering
It is important to note that the premise of this separation is the popularity of client-side Ajax, which allows client-side rendering to be made possible by client-side requests for server-side data.
The advantages of client-side rendering are also obvious,
- The division of labor at the front and back ends is more clear, and the front end has more space to play
- Reduces the pressure on the server side
But the drawbacks of client-side rendering are also obvious:
- First screen rendering takes a long time
- Is not conducive to SEO
The above two shortcomings, we may often encounter, but many people can not make clear why? So, we’re going to elaborate on that here,
- Why does the client render first screen take a long time to load?
Therefore, to achieve the same page effect, traditional server-side rendering only needs to send one request to obtain HTML, while client-side rendering needs to send multiple requests to load HTML, JS, and Ajax requests, etc. The time gap can also be seen in the figure.
- Why client-side rendering is bad for SEO?
First of all to figure out what is SEO, in fact, is as far as possible to let the search engine grab your website data, so that when users search, they will give priority to your website,
So if you want to SEO, first let the site have data, the traditional server side rendering mode returned to the client is rendered HTML, contains a lot of data or website information, is conducive to our SEO, but the client side rendering, server side returned is an empty HTML file, no information, The search engine is not a browser. It does not parse the JS file. It only crawls the contents of the current HTML file.
3. Modern server-side rendering
From the previous introduction, we know that both traditional server-side rendering and client-side rendering have advantages and disadvantages, so how to choose? This is what modern server-side rendering is all about.
Modern server-side rendering, also called isomorphic rendering, it is the combination of client-side rendering and server-side rendering.
- First render on the server side, so that the first screen is server-side render, also called the first screen straight out.
- After it is returned to the client, the script is executed to activate the SPA application, and the interactions of the page are all client-side interactions.
These are the advantages of isomorphic rendering, we generally use some third-party solutions:
- React ecosystem next-js
- Nuxt.js for vue Ecology
But isomorphic rendering also introduces some new problems:
- Limited development conditions: we usually use some libraries, may not work properly in the server side rendering, some usually in the client side rendering API, also need to make corresponding adjustments, these need to be developed according to the actual situation to distinguish.
- There are more requirements involving build and deployment
- More server side resources required: Because you need to render on the server side, you will definitely need more server side resources and more server side stress.
conclusion
From the above code, we know that either approach has its pros and cons, but is it really needed on the server side? We generally consider it from the following two aspects:
- Does first-screen rendering speed really matter?
- Do you really need SEO?
So in actual development, server side rendering cannot blindly use, such as a background management system, the first screen rendering speed is not particularly important, and it did not need SEO, obviously, this time there is no need for server side rendering, but if you meet some project, clear requirements for SEO, so this situation can only choose the server-side apply colours to a drawing, Because client-side rendering SEO is almost zero.