What is rendering
Generally speaking, when people refer to "rendering", they may say: "Any HTML page returned from the server is counted as server-side rendering." This may confuse many people. Simply put, rendering is "data" and "Templates" are spliced together. For example: one of the most common scenarios in our front-end development is to request back-end interface data, and then bind the data to the page through template binding syntax, and finally present it to the user. This process is what we refer to here as rendering.
In summary, the essence of rendering is actually the parsing and replacement of strings, and there are many ways to implement it. But what we need to focus on here is not how to render, but where to render.
Traditional server-side rendering
In the earliest stage, Web page rendering was done on the server side, that is, when the server side is running, the required data is combined with the page template to be rendered as
HTML response to the client browser. So what the browser presents is a page that directly contains content.
This method may be unfamiliar to students who have not played back-end development, so let's take a look at this method through the Node.js that our front-end students are more familiar with.
Installation dependencies:
// 创建 http 服务
npm i express
// 服务端模板引擎
npm i art-template express-art-templateIn the server-side code part, we can use the template engine in the basic web service, and then render a page, as follows:'
const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
// 1. 得到模板内容
const templateStr = fs.readFileSync('./index.html', 'utf-8')
// 2. 得到数据
const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
// 3. 渲染：数据 + 模板 = 完整结果
const html = template.render(templateStr, data)
console.log(html)
// 4. 把渲染结果发送给客户端
res.send(html)
)}
app.listen(3000, () => console.log('running...'))Client code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>{{ message }}</h1>
<ul>
{{ each todos }}
<li>{{ $value.title }}</li>
{{ /each }}
</ul>
</body>
</html>This is the earliest web page rendering method, and it is also the core work step of a dynamic website.
shortcoming:
- The front-end and back-end codes are completely coupled together, which is not conducive to development and maintenance;
- There is not enough room to play in the front end;
- The pressure on the server is greater;
- The user experience is average;
But it has to be said that this method is also desirable when the web application is not complicated.
Client rendering
Traditional server-side rendering has many problems, and these problems can be effectively solved by client-side Ajax technology. Ajax technology makes it possible for the client to dynamically obtain data, which means that the original server-side rendering can also be done by the client.
The following figure is the basic workflow of the SPA application based on client-side rendering:
Let's take a single-page application created by Vue.js as an example to briefly understand the rendering process in this way.
Through this example, we know that we can separate the two things of [data processing] and [page rendering]. The back end is responsible for processing the data interface, and the front end is only responsible for rendering the interface data to the page, which makes the front end no longer limited to the back end and more independent.
shortcoming:
- First screen rendering is slow
- Not good for SEO
Modern server-side rendering
Modern server-side generally choose isomorphic rendering, that is, a piece of code that is executed once on the server side to achieve server-side rendering (straight out of the first screen), and then executed again on the client side to take over page interaction. Simply put, isomorphic rendering is a combination of "back-end rendering" and "front-end rendering". Isomorphic rendering has the advantages of traditional server-side rendering and client-side rendering at the same time, and can effectively solve the core problems of SEO and slow first-screen rendering.
- Client initiates a request
- Server-side rendering of the first screen content + generating client-side SPA related resources
- The server sends the generated first screen resources to the client
- The client directly displays the first screen content rendered by the server
- The SPA-related resources in the first screen will activate the client Vue after execution
- After that, all client interactions are handled by the client SPA
How to use isomorphic rendering
There are two ways to use isomorphic rendering, one is the official solution, and the other is the third-party solution.
Official solutions using frameworks such as Vue and React:
- Advantages: Conducive to understanding the principle
- Disadvantages: the need to set up the environment is more troublesome
Use third-party solutions:
- Next.js in the React ecosystem
- Nuxt.js in the Vue ecosystem
- Angular Universal in the Angular ecosystem
Isomorphic rendering application problem
Isomorphic rendering also has the following problems in applications:
- Limited development conditions
- Higher requirements involving build setup and deployment
- More server load
The above is some of my talk about server-side rendering, I hope it can be helpful to everyone.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。