欢迎吐槽 : ）

　　　　本demo地址( 前端库React+mobx+ReactRouter )：https://github.com/Penggggg/react-ssr。本文为笔者自学总结，有错误的地方恳请各位指出 O(∩_∩)O

　          序：前言、原因与思路、注意事项与问题、详解。

      一、前言

　　　　为什么需要服务端渲染？什么情况下进行服务端渲染？笔者认为，当我们要求渲染时间尽量快、页面响应速度快时（优点），才会采用服务器渲染，并且应该“按需”对页面进行渲染 ——“首次加载/首屏”。即服务端渲染的优势在于：由中间层( node端 )为客户端请求初始数据、并由node渲染页面。那客户端渲染和服务端渲染有什么差别？服务端渲染究竟快在哪里呢？

　　二、原因与思路

　　　　客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面

　　　　服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

　　　　说明：对同一个组件，服务端渲染“可视的”一部分( render/componentWillMount部分代码  )，为确保组件有完善的生命周期及事件处理，客户端需要再次渲染。即：服务端渲染，实际上也是需要客户端进行 再次地、但开销很小的二次渲染。

　　　　时间耗时比较：

　　　　　　1. 数据请求：由服务端请求数据而不是客户端请求数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差（主要原因）。

　　　　　　2. 步骤：服务端是先请求数据然后渲染“可视”部分，而客户端是等待js代码下载、加载完成再请求数据、渲染。即：服务端渲染不用等待js代码下载完成再请求数据，并会返回一个已经有内容的页面。

　　　　　　3. 渲染性能：服务端性能比客户端高，渲染速度快( 猜测，该项数据不详 )。

　　　　　　4. 渲染内容：服务端渲染会把”可视“部分先渲染，然后交给客户端再作部分渲染。而客户端渲染，则是从无到有，需要经历完整的渲染步骤。　　　　

　

　　三、注意事项与问题

　　　　0. 项目依赖什么？答：node端：express、react-dom/server、webpack。前端：React、mobx（一个更好的redux）、React-router、webpack

　　　　1. 前端/node端共用那部分代码？答：node端/前端有各自的入口文件，server.js/client.js，通过react-router的路由配置文件routes.js作中间层

// routes.js

module.exports = (

    <Route path="/" component={ IComponent } >

        <Route path="/todo" component={ AComponent }>

        </Route>

    </Route>

)

　　　　2. 代码是由前后端共享，那如何分平台地操作不同代码？答：通过webpack。对共享代码，进行不同平台的，webpack(babel)编译，通过在webpack.config.js中加入

// webpack.client.config.js

plugins: [

      new webpack.DefinePlugin({

          '__isServer__': false,

          '__isClient__': true

      })

  ]

// webpack.server.config.js

plugins: [

      new webpack.DefinePlugin({

          '__isServer__': true,

          '__isClient__': false

      })

  ]

// xxx.js

if( __isServer__ ) {

   ...

}else { ... }

　　　　4. 组件的生命周期是如何的呢？答：componentWillMount( node端 ) -> render( node端 ) -> 客户端生命周期和以前一样

　　　　5. 拉取数据后如何处理呢？答：先在node端根据数据渲染好，再把数据随页面返回至前端，再由React根据数据进行渲染校对( 若前后端渲染结果不一致将报错 )。应该在componentWillMount让组件进行本地的数据同步

// 组件.js

componentWillMount() {

    if( __isClient__ ) {

         this.todoStore.todos = window.initTodos;

    }

}

// node端返回

`

<!doctype html>

<html lang="utf-8">

       <head>

       <script> window.initTodo = ${...}</script>

       </head>

       <body> ... </body>

       <script src="/static/vendor.js"></script>

       <script src="/static/client.bundle.js"></script>

`

　　　　6. 前端/node端“入口文件”通过webpack构建有什么不同？答：前端是为了解析JSX与es6代码（包括mobx的es6 decorator），node端除了以上，还需要加入babel-plugin-transform-runtime，是为了在node良好地运行es7 async / awatit

　　　　7. 如何保证node端能够先请求数据然后再渲染？答：es7的async / await语法　　

　　　　8. 前端的react-router路由与node端路由如何配合？node如何知道该路由是渲染哪个数据呢？答：前端是以前的react-router配置，node端是react-router的match/RouterContext// 共享文件routes.js

const routes = (

    <Route path="/" component={ IComponent } >

        <Route path="/todo" component={ AComponent }>

        </Route>

    </Route>

)

// 前端入口文件client.js

render(

    <Router routes={ routes } history={ browserHistory } />,

    ele

)

// node端入口文件server.js

let app = express();

app.get('/todo', (req, res) => {

   match({ routes: routes, location: req.url }, async (err, redirect, props) => {

         // match会帮我们找到要渲染的组件链，注：上面一行使用了async语法，因此可以在render之前使用await运行拉取数据的代码

         let html = renderToString(<RouterContext {...props}  />)

         res.send( indexPage(html) )

    }

})

// node端返回

let indexPage = (html)=>{

    return `

    <!doctype html>

        <html lang="utf-8">

            <head>

                <script>

                </script>

            </head>

            <body>

                <section id="hzpapp" >${html}</section>

            </body>

            <script src="/static/vendor.js"></script>

            <script src="/static/client.bundle.js"></script>

        </html>

    `

}

　　　　9. client.js中是否还能继续使用webpack的require.ensure ? 答：可以。但闪白明显，且node端返回html后会有报错，在加载脚本后该错误能忽略。　

　　　　11. 若我使用的是mobx，该如何实例化store ? 答：每一个node请求，都应该返回一个新的独立的store实例，而不是每个node请求共用一个store实例（笔者易犯）。

　　　　　　　　

　　四、详解

　　　　待续　　

React服务端渲染总结的更多相关文章

  1. react服务端渲染（同构）

    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...

  2. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  3. （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  4. React 服务端渲染最佳解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  5. react服务端渲染

    一.服务端渲染的好处 1.SEO, 让搜索引擎更容易读取页面内容: 2.首屏渲染速度更快(重点),无需等待JS文件下载执行过程: 3.更易于维护,服务端和客户端可以共享某些代码: 二.实现原理 服务端 ...

  6. react服务端渲染框架

    客户端渲染 加载一个空的html页面,然后请求一个打包的js文件,然后再客户端执行这个js文件 动态生成html内容然后插入到DOM元素上,在源代码查询中也只能看到空的html文档 没有任何其他内容 ...

  7. React 服务端渲染方案完美的解决方案

    最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法.在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务 ...

  8. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  9. react+redux教程（六）redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

随机推荐

  1. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  2. Hibernate（5）—— 联合主键 、一对一关联关系映射（xml和注解） 和 领域驱动设计

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: One to One 映射关系 一对一单向外键(XML/Annotation) 一对一双向外键关联(XML/A ...

  3. Vertica删除历史分区数据

    假设test用户下创建的t_jingyu表 vsql -Utest -wtestpwd create table t_jingyu( col1 int, col2 varchar, col3 time ...

  4. 如何写复杂的SQL

    经常有人问我那非常复杂的sql是怎么写出来的,我一直不知道该怎么回答.         因为虽然我写这样的sql很顺手,可是我却不知道怎么告诉别人怎么写. 很多人将这个问题归结为天赋,我却不这么看,我 ...

  5. 3.C#WinForm基础累加器

    功能:实现累加计算. 知识点: bool int.TryParse(string s,out int result)(+1重载) 将数字的字符串形式转换为它的等效的32位有效的有符号整数,一个指示操作 ...

  6. Windows下Git多账号配置，同一电脑多个ssh-key的管理

    这一篇文章是对上一篇文章<Git-TortoiseGit完整配置流程>的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有一些提到一些基础的操作. <Git-Tort ...

  7. 代码的坏味道（13）——过多的注释(Comments)

    坏味道--过多的注释(Comments) 特征 注释本身并不是坏事.但是常常有这样的情况:一段代码中出现长长的注释,而它之所以存在,是因为代码很糟糕. 问题原因 注释的作者意识到自己的代码不直观或不明 ...

  8. C#开发微信门户及应用(30)--消息的群发处理和预览功能

    在很多场合下,我们可能需要利用微信公众号的优势,定期给指定用户群发送一些推广消息或者新闻内容,以便给关注客户一种经常更新公众号内容的感觉,同时也方便我们经常和用户进行互动.微信公众号的高级群发接口就是 ...

  9. flhs笔试题-回家上机实践

    这是最近参加的一个公司的笔试题,回家上机写了下代码,希望对有需要的小伙伴有用,简单实现字符串和数组在指定位置的插入: package org.flhs; import com.google.commo ...

  10. 【原】tomcat 7 启动报错：java.lang.NoSuchMethodError: javax.servlet.ServletContext.getSessionCookieConfig()Ljavax/servlet/SessionCookieConfig的解决

    现象: tomcat 7 启动报错:java.lang.NoSuchMethodError: javax.servlet.ServletContext.getSessionCookieConfig() ...