SSR服务端渲染 | 青训营笔记

Kyrie_Chen
109 阅读3分钟

这是我参与「第五届青训营」笔记创作活动的第 12 天

前言

当我们在浏览器中输入一段URL的时候，浏览器从发送请求到接收请求后，一定会经历一个过程就是渲染你过程，一般的开发中渲染方式主要分为两大类：SSR（服务端渲染）和CSR（浏览器端渲染），本篇文章将为大家介绍SSR服务端渲染。

服务端渲染

什么是SSR

SSR（Server-Side Rendering）表示服务端渲染，其页面上的内容是由服务端渲染生成的，随后服务端会返回HTML代码再由浏览器进行显示即可；与此相反的CSR（Client-Side Rendering）表示浏览器端渲染，这个时候我们的页面内容是由JS文件渲染出来的，而JS文件会运行在浏览器上，而这时的服务端只会返回一个HTML代码

创建一个简单的SSR应用

相信大家对于SSR渲染有了基础的理解后，也能大概明白SSR应用的原理；想要成功创建一个SSR应用需要用到如下几个包：

React，ReactDomServer引入React工具，用于在服务端动态生成HTML的代码，主要用到的方法有ReactDomServer.renderToString() 该方法会接受一个React元素作为参数，用它来把APP渲染成为字符串；React.createElement() 会根据所传入的参数来创建一个React元素。

另外还会用到http这个包，这个包用于创建http服务，在前几篇文章中针对http工具包有更详细的解释。

有了以上几个工具包的预备知识，我们就可以着手创建一个简单的SSR应用了，代码如下

const React = require('react')
const ReactDomServer = require('react-dom/server')
const http = require('http')

function App(props) {
    return React.createElement('h1', {}, props.children || 'hello')
}

//SSR(Server-Side Rendering) 服务端渲染
//返回HTML代码
const server = http.createServer((req, res) => {
    res.end(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>new Page</title>
    </head>
    <body> 
        ${ReactDomServer.renderToString(React.createElement(App, {}, 'my_content'))}
    </body>
    </html>
    `)
})

const port = 3000


server.listen(port, () => {
    console.log('server listen on: http://127.0.0.1:3000/index.html')
})

可以看到这里的函数APP表示的是我们想让服务器渲染的标签内容（h1标签并且内容为props.children || 'hello'），接下来可以在我们的响应体中书写HTML代码，然后再body部分插入我们提前写好的APP，使用renderToString和createElement两个方法将内容挂载。

这样我们启动一下我们的SSR应用，可以看到我们的页面上出现了我们写入的内容并且为一级标题

SSR-test.png

总结

本篇文章结合青训营的课程所学，创建了一个简单的SSR的应用，SSR现在被广泛应用于各大软件的开发，SSR与CSR两种渲染方式都是值得前端工程师去了解学习的，知道如何渲染页面才能抓住根本降低需要渲染的时间。本篇文章分享的内容就到这，更多的前端知识干货以及开发要点都包含在青训营的课程当中，值得大家学习！

avatar
文章
阅读
粉丝