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

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

Jeremy Sun

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

阅读量191

点赞数

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

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

版权

我们来以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的弊端。

二、实现React组件的服务端渲染

刚刚起的express服务返回的只是一个普通的html字符串，但我们讨论的是如何进行React的服务端渲染，那么怎么做呢？首先写一个简单的React组件:

// containers/Home.js
imp

最低0.47元/天解锁文章

Jeremy Sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
服务端渲染入门级原理（react为例）

我们来以React为例，把服务端渲染(Server Side Render，简称“SSR”)学个明明白白。part1：实现一个基础的React组件SSR 这一部分来简要实现一个React组件的SSR。一. SSR vs CSR 什么是服务端渲染？废话不多说，直接起一个express服务器。app.get('/', (req, res) => { res.send( ` ...
复制链接

扫一扫

专栏目录