服务端渲染入门级原理（react为例）

最新推荐文章于 2024-03-04 08:52:09 发布

Jeremy Sun

最新推荐文章于 2024-03-04 08:52:09 发布

阅读量213

点赞数

分类专栏： web 服务端渲染 react 文章标签： react服务端渲染 web服务端渲染客户端和服务端渲染的区别服务端渲染的原理和好处什么是服务端渲染

本文链接：https://blog.csdn.net/weixin_44431295/article/details/100782491

版权

本文以React为例，深入浅出地介绍了服务端渲染（SSR）的基本原理和实现。首先，通过对比SSR与客户端渲染（CSR），阐述了SSR的优势，如解决首屏加载速度和SEO问题。接着，逐步展示了如何创建一个简单的React SSR应用，包括如何将React组件转化为HTML并返回给浏览器。然后，文章讨论了同构的重要性，解释了为什么在SSR中事件绑定无效，并展示了如何通过同构解决这个问题，包括生成浏览器端运行的JS代码和处理路由问题。最后，提醒读者，对于大型项目，当前介绍的内容仅是SSR的冰山一角，需要进一步学习和实践。

摘要由CSDN通过智能技术生成

我们来以React为例，把服务端渲染(Server Side Render，简称“SSR”)学个明明白白。

part1：实现一个基础的React组件SSR 这一部分来简要实现一个React组件的SSR。

一. SSR vs CSR 什么是服务端渲染？

废话不多说，直接起一个express服务器。

app.get('/', (req, res) => {
  res.send(
  `
    <html>
      <head>
        <title>hello</title>
      </head>
      <body>
        <h1>hello</h1>
        <p>world</p>
      </body>
    </html>
  `
  )
})

启动之后打开localhost:3001可以看到页面显示了hello world。而且打开网页源代码，返回的dom结构也能够完全显示。
这就是服务端渲染。其实非常好理解，就是服务器返回一堆html字符串，然后让浏览器显示。与服务端渲染相对的是客户端渲染(Client Side Render)。那什么是客户端渲染？现在创建一个新的React项目，用脚手架生成项目，然后run起来。查看一下网页源代码，是如下情况
在这里插入图片描述
body中除了一系列的script标签之外，只有一个id为root的标签。那首页的内容是从哪来的呢？很明显，是下面的script中拉取的JS代码控制的。因此，CSR和SSR最大的区别在于前者的页面渲染是JS负责进行的，而后者是服务器端直接返回HTML让浏览器直接渲染。为什么要使用服务端渲染呢？
传统CSR的弊端： 1. 由于页面显示过程要进行JS文件拉取和React代码执行，首屏加载时间会比较慢。 2. 对于SEO(Search Engine Optimazition,即搜索引擎优化)，完全无能为力，因为搜索引擎爬虫只认识html结构的内容，而不能识别JS代码内容。SSR的出现，就是为了解决这些传统CSR的弊端。