首页 / REACT / 详解React服务端渲染从入门到精通

详解React服务端渲染从入门到精通

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解React服务端渲染从入门到精通，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11119字，纯文字阅读大概需要16分钟。

内容图文

前言

这篇文章是我自己在搭建个人网站的过程中，用到了服务端渲染，看了一些教程，踩了一些坑。想把这个过程分享出来。
我会尽力把每个步骤讲明白，将我理解的全部讲出来。

文中的示例代码来自于这个仓库，也是我正在搭建的个人网站，大家可以一起交流一下。示例代码因为简化，与仓库代码有些许出入

本文中用到的技术
React V16 | React-Router v4 | Redux | Redux-thunk | express

React 服务端渲染

服务端渲染的基本套路就是用户请求过来的时候，在服务端生成一个我们希望看到的网页内容的HTML字符串，返回给浏览器去展示。

浏览器拿到了这个HTML之后，渲染出页面，但是并没有事件交互，这时候浏览器发现HTML中加载了一些js文件（也就是浏览器端渲染的js），就直接去加载。

加载好并执行完以后，事件就会被绑定上了。这时候页面被浏览器端接管了。也就是到了我们熟悉的js渲染页面的过程。

需要实现的目标：

React组件服务端渲染
路由的服务端渲染
保证服务端和浏览器的数据唯一
css的服务端渲染（样式直出）

一般的渲染方式

服务端渲染：服务端生成html字符串，发送给浏览器进行渲染。
浏览器端渲染：服务端返回空的html文件，内部加载js完全由js与css，由js完成页面的渲染

优点与缺点

服务端渲染解决了首屏加载速度慢以及seo不友好的缺点（Google已经可以检索到浏览器渲染的网页，但不是所有搜索引擎都可以）

但增加了项目的复杂程度，提高维护成本。

如果非必须，尽量不要用服务端渲染

整体思路

需要两个端：服务端、浏览器端（浏览器渲染的部分）

第一：打包浏览器端代码

第二：打包服务端代码并启动服务

第三：用户访问，服务端读取浏览器端打包好的index.html文件为字符串，将渲染好的组件、样式、数据塞入html字符串，返回给浏览器

第四：浏览器直接渲染接收到的html内容，并且加载打包好的浏览器端js文件，进行事件绑定，初始化状态数据，完成同构

React组件的服务端渲染

让我们来看一个最简单的React服务端渲染的过程。

要进行服务端渲染的话那必然得需要一个根组件，来负责生成HTML结构

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.hydrate(<Container />, document.getElementById('root'));

当然这里用ReactDOM.render也是可以的，只不过hydrate会尽量复用接收到的服务端返回的内容，

来补充事件绑定和浏览器端其他特有的过程

引入浏览器端需要渲染的根组件，利用react的 renderToString API进行渲染

import { renderToString } from 'react-dom/server'
import Container from '../containers'
// 产生html
const content = renderToString(<Container/>)
const html = `
  <html>
   <body>${content}</body>
  </html>
`
res.send(html)

在这里，renderToString也可以替换成renderToNodeStream，区别在于前者是同步地产生HTML，也就是如果生成HTML用了1000毫秒，

那么就会在1000毫秒之后才将内容返回给浏览器，显然耗时过长。而后者则是以流的形式，将渲染结果塞给response对象，就是出来多少就

返回给浏览器多少，可以相对减少耗时

路由的服务端渲染

一般场景下，我们的应用不可能只有一个页面，肯定会有路由跳转。我们一般这么用：

import { BrowserRouter, Route } from 'react-router-dom'
const App = () => (
  <BrowserRouter>
    {/*...Routes*/}
  <BrowserRouter/>
)

但这是浏览器端渲染时候的用法。在做服务端渲染时，需要使用将BrowserRouter 替换为 StaticRouter
区别在于，BrowserRouter 会通过HTML5 提供的 history API来保持页面与URL的同步，而StaticRouter
则不会改变URL

import { createServer } from 'http'
import { StaticRouter } from 'react-router-dom'
createServer((req, res) => {
  const html = renderToString(
    <StaticRouter
      location={req.url}
      context={{}}
    >
      <Container />
    <StaticRouter/>)

})

这里，StaticRouter要接收两个属性:

location: StaticRouter 会根据这个属性，自动匹配对应的React组件，所以才会实现刷新页面，服务端返回的对应路由的组与浏览器端保持一致
context: 一般用来传递一些数据，相当于一个载体，之后讲到样式的服务端渲染的时候会用到

Redux同构

数据的预获取以及脱水与注水我认为是服务端渲染的难点。

这是什么意思呢？也就是说首屏渲染的网页一般要去请求外部数据，我们希望在生成HTML之前，去获取到这个页面需要的所有数据，然后塞到页面中去，这个过程，叫做“脱水”（Dehydrate），生成HTML返回给浏览器。浏览器拿到带着数据的HTML，去请求浏览器端js，接管页面，用这个数据来初始化组件。这个过程叫“注水”（Hydrate）。完成服务端与浏览器端数据的统一。

为什么要这么做呢？试想一下，假设没有数据的预获取，直接返回一个没有数据，只有固定内容的HTML结构，会有什么结果呢？

第一：由于页面内没有有效信息，不利于SEO。

第二：由于返回的页面没有内容，但浏览器端JS接管页面后回去请求数据、渲染数据，页面会闪一下，用户体验不好。

我们使用Redux来管理状态，因为有服务端代码和浏览器端代码，那么就分别需要两个store来管理服务端和浏览器端的数据。

组件的配置

组件要在服务端渲染的时候去请求数据，可以在组件上挂载一个专门发异步请求的方法，这里叫做loadData，接收服务端的store作为参数，然后store.dispatch去扩充服务端的store。

class Home extends React.Component {
  componentDidMount() {
    this.props.callApi()
  }
  render() {
    return <div>{this.props.state.name}</div>
  }
}
Home.loadData = store => {
 return store.dispatch(callApi())
}
const mapState = state => state
const mapDispatch = {callApi}
export default connect(mapState, mapDispatch)(Home)

路由的改造

因为服务端要根据路由判断当前渲染哪个组件，可以在这个时候发送异步请求。所以路由也需要配置一下来支持loadData方法。服务端渲染的时候，路由的渲染可以使用react-router-config这个库，用法如下(重点关注在路由上挂载loadData方法):

import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
import Home from './Home'
export const routes = [
 {
  path: '/',
  component: Home,
  loadData: Home.loadData,
  exact: true,
 }
]
const Routers = <BrowserRouter>
  {renderRoutes(routes)}
<BrowserRouter/>

服务端获取数据

到了服务端，需要判断匹配的路由内的所有组件各自都有没有loadData方法，有就去调用，传入服务端的store，去扩充服务端的store。同时还要注意到，一个页面可能是由多个组件组成的，会发各自的请求，也就意味着我们要等所有的请求都发完，再去返回HTML。

import express from 'express'
import serverRender from './render'
import { matchRoutes } from 'react-router-config'
import { routes } from '../routes'
import serverStore from "../store/serverStore"

const app = express()
app.get('*', (req, res) => {
 const context = {css: []}
 const store = serverStore()
 // 用matchRoutes方法获取匹配到的路由对应的组件数组
 const matchedRoutes = matchRoutes(routes, req.path)
 const promises = []
 for (const item of matchedRoutes) {
  if (item.route.loadData) {
   const promise = new Promise((resolve, reject) => {
    item.route.loadData(store).then(resolve).catch(resolve)
   })
   promises.push(promise)
  }
 }
 // 所有请求响应完毕，将被HTML内容发送给浏览器
 Promise.all(promises).then(() => {
  // 将生成html内容的逻辑封装成了一个函数，接收req, store, context
  res.send(serverRender(req, store, context))
 })
})

细心的同学可能注意到了上边我把每个loadData都包了一个promise。

const promise = new Promise((resolve, reject) => {
 item.route.loadData(store).then(resolve).catch(resolve)
 console.log(item.route.loadData(store));
})
promises.push(promise)

这是为了容错，一旦有一个请求出错，那么下边Promise.all方法则不会执行，所以包一层promise的目的是即使请求出错，也会resolve，不会影响到Promise.all方法，也就是说只有请求出错的组件会没数据，而其他组件不会受影响。

注入数据

我们请求已经发出去了，并且在组件的loadData方法中也扩充了服务端的store，那么可以从服务端的数据取出来注入到要返回给浏览器的HTML中了。

来看 serverRender 方法

const serverRender = (req, store, context) => {
 // 读取客户端生成的HTML
 const template = fs.readFileSync(process.cwd() + '/public/static/index.html', 'utf8')
 const content = renderToString(
  <Provider store={store}>
   <StaticRouter location={req.path} context={context}>
    <Container/>
   </StaticRouter>
  </Provider>
 )
 // 注入数据
 const initialState = `<script>
  window.context = {
   INITIAL_STATE: ${JSON.stringify(store.getState())}
  }
</script>`
 return template.replace('<!--app-->', content)
  .replace('<!--initial-state-->', initialState)
}

浏览器端用服务端获取到的数据初始化store

经过上边的过程，我们已经可以从window.context中拿到服务端预获取的数据了，此时需要做的事就是用这份数据去初始化浏览器端的store。保证两端数据的统一。

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from '../reducers'

const defaultStore = window.context && window.context.INITIAL_STATE
const clientStore = createStore(
 rootReducer,
 defaultStore,// 利用服务端的数据初始化浏览器端的store
 compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f=>f
 )
)

至此，服务端渲染的数据统一问题就解决了，再来回顾一下整个流程：

用户访问路由，服务端根据路由匹配出对应路由内的组件数组
循环数组，调用组件上挂载的loadData方法，发送请求，扩充服务端store
所有请求完成后，通过store.getState，获取到服务端预获取的数据，注入到window.context中
浏览器渲染返回的HTML，加载浏览器端js，从window.context中取数据来初始化浏览器端的store，渲染组件

这里还有个点，也就是当我们从路由进入到其他页面的时候，组件内的loadData方法并不会执行，它只会在刷新，服务端渲染路由的时候执行。

这时候会没有数据。所以我们还需要在componentDidMount中去发请求，来解决这个问题。因为componentDidMount不会在服务端渲染执行，所以不用担心请求重复发送。

样式的服务端渲染

以上我们所做的事情只是让网页的内容经过了服务端的渲染，但是样式要在浏览器加载css后才会加上，所以最开始返回的网页内容没有样式，页面依然会闪一下。为了解决这个问题，我们需要让样式也一并在服务端渲染的时候返回。

首先，服务端渲染的时候，解析css文件，不能使用style-loader了，要使用isomorphic-style-loader。

{
  test: /\.css$/,
  use: [
    'isomorphic-style-loader',
    'css-loader',
    'postcss-loader'
  ],
}

但是，如何在服务端获取到当前路由内的组件样式呢？回想一下，我们在做路由的服务端渲染时，用到了StaticRouter，它会接收一个context对象，这个context对象可以作为一个载体来传递一些信息。我们就用它！

思路就是在渲染组件的时候，在组件内接收context对象，获取组件样式，放到context中，服务端拿到样式，插入到返回的HTML中的style标签中。

来看看组件是如何读取样式的吧:

import style from './style/index.css'
class Index extends React.Component {
  componentWillMount() {
   if (this.props.staticContext) {
    const css = styles._getCss()
    this.props.staticContext.css.push(css)
   }
  }
}

在路由内的组件可以在props里接收到staticContext，也就是通过StaticRouter传递过来的context，
isomorphic-style-loader 提供了一个 _getCss() 方法，让我们能读取到css样式，然后放到staticContext里。
不在路由之内的组件，可以通过父级组件，传递props的方法，或者用react-router的withRouter包裹一下

其实这部分提取css的逻辑可以写成高阶组件，这样就可以做到复用了

import React, { Component } from 'react'

export default (DecoratedComponent, styles) => {
 return class NewComponent extends Component {
  componentWillMount() {
   if (this.props.staticContext) {
    const css = styles._getCss()
    this.props.staticContext.css.push(css)
   }
  }
  render() {
   return <DecoratedComponent {...this.props}/>
  }
 }
}

在服务端，经过组件的渲染之后，context中已经有内容了，我们这时候把样式处理一下，返回给浏览器，就可以做到样式的服务端渲染了

const serverRender = (req, store) => {
 const context = {css: []}
 const template = fs.readFileSync(process.cwd() + '/public/static/index.html', 'utf8')
 const content = renderToString(
  <Provider store={store}>
   <StaticRouter location={req.path} context={context}>
    <Container/>
   </StaticRouter>
  </Provider>
 )
 // 经过渲染之后，context.css内已经有了样式
 const cssStr = context.css.length ? context.css.join('\n') : ''
 const initialState = `<script>
  window.context = {
   INITIAL_STATE: ${JSON.stringify(store.getState())}
  }
</script>`
 return template.replace('<!--app-->', content)
  .replace('server-render-css', cssStr)
  .replace('<!--initial-state-->', initialState)
}

至此，服务端渲染就全部完成了。

总结

React的服务端渲染，最好的解决方案就是Next.js。如果你的应用没有SEO优化的需求，又或者不太注重首屏渲染的速度，那么尽量就不要用服务端渲染。

因为会让项目变得复杂。此外，除了服务端渲染，SEO优化的办法还有很多，比如预渲染（pre-render）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解React服务端渲染从入门到精通全部内容，希望文章能够帮你解决详解React服务端渲染从入门到精通所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/332669.html

来源：【匿名】

【上一篇】详解React项目如何修改打包地址（编译输出文件地址）【下一篇】Reactv16.3.0:NewlifecyclesandcontextAPI

更多 ►

【详解React服务端渲染从入门到精通】教程文章相关的互联网学习教程文章

架构大迁移：从Java Spring到ReactJS +API微服务架构【图】

原文链接：https://baijiahao.baidu.com/s?id=1622180186813748852&wfr=spider&for=pc大家可能手头都维护着一定数量旧系统，系统可能还能跑，但是跑的怎么样，可能没有人能说清楚，还时常需要维护：重启、应对安全检查啥的，它代码可以追溯到张山、李四到王二麻子好多代秃顶的码农。面对着这样的窘境，你能做的，而且唯一需要做的就是对其重构，重新开发一个全新架构的，高性能的，流行的系统。本文中虫虫给大家介绍实例Java平台重...

react native实现往服务器上传网络图片的实例

如下所示： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function uploadImage(url,params){return new Promise(function (resolve, reject) {let formData = new FormData();for (var key in params){formData.append(key, params[key]);}let fi...

javascript-如何从PHP服务器端渲染React？

先前我们的项目是把所有的View都写在前端，这样也导致了前端打包之后的bundle.js很大，影响加载速度，现在我考虑将部分初始状态的代码移植到后端渲染。但是我们的后台是用PHP写的，各位大神，有没有什么资料可以提供给我参考？O(∩_∩)O谢谢回复内容：先前我们的项目是把所有的View都写在前端，这样也导致了前端打包之后的bundle.js很大，影响加载速度，现在我考虑将部分初始状态的代码移植到后端渲染。但是我们的后台是用PHP写的...

react.js-关于在服务端(PHP)调用V8进行页面渲染的疑惑

目前在探索如何前后端共用一套编译器把模板编译成html，所以尝试了react在php端的渲染（2013-09-13）这篇文章的思路，但有这个异常得不到解决，作者也是联系不上：V8Js::compileString():15: TypeError: Cannot read property '__reactAutoBindMap' of undefined 在N次不断修改不断失败之后，换用了riot来做，结果更是走不通，riot甚至没考虑无document对象的情况下的处理，所以问下前辈们都是怎么在服务端做页面渲染的？当然这个...

React对服务端进行渲染改造

这次给大家带来React对服务端进行渲染改造，React对服务端进行渲染改造的注意事项有哪些，下面就是实战案例，一起来看一下。因为对网页SEO的需要，要把之前的React项目改造为服务端渲染，经过一番调查和研究，查阅了大量互联网资料。成功踩坑。选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写项目地址：https://github.com/wlx200510/react_ko...

BrowserRouter如何配合react-router服务器

这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter，现在分享给大家，也给大家做个参考。react-router作为react框架路由解决方案在react项目中举足轻重。在react-router 4.0版本中，API与先前版本相比有了很大的修改，在2.0、3.0中常用的<Router>组件作为路由底层配置组件不再常用，取而代之的是四个各有不同的路由组件：<BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter>其中<MemoryRouter>组...

首页 / REACT / 详解React服务端渲染从入门到精通

详解React服务端渲染从入门到精通

内容导读

内容图文

内容总结

内容备注

内容手机端

【详解React服务端渲染从入门到精通】教程文章相关的互联网学习教程文章

架构大迁移：从Java Spring到ReactJS +API微服务架构【图】

react native实现往服务器上传网络图片的实例

javascript-如何从PHP服务器端渲染React？

react.js-关于在服务端(PHP)调用V8进行页面渲染的疑惑

React对服务端进行渲染改造

BrowserRouter如何配合react-router服务器

详细讲解有关实现react服务器渲染问题【图】

怎样使用React服务器端渲染

怎样高效的使用React服务器端渲染

React项目服务端渲染优化

实现react服务器渲染的步奏详解

react的服务器渲染【图】

React项目的服务端渲染改造详解

实现react服务器渲染基础方法【图】

vue、react等单页面项目部署到服务器方法【图】

REACT - 相关标签

服务端 - 相关标签

REACT - 技术教程分类

REACT - 最新教程

REACT - 最热教程