所谓server render 即服务端渲染，这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题。

react 的SSR主要思路就是

1.将应用的根组件导出 如 <App />

2.在服务器node端 引用 <App /> ,通过'react-dom/server'下的ReactSSR将组件转换成真实的DOM字符串，像这种

<div data-reactroot="">this is app component</div>

3.然后通过node 的fs 模块 导入要渲染的HTML文件，注意，此处要指定编码格式

const template = fs.readFileSync(path.join(__dirname,'../../dist/index.html'),'utf8')

该HTML文件即前端打包后的HTML文件，比如这种

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app"><!-- app --></div>

<script type="text/javascript" src="/public/vendor.197e0591260e3f2808db.js"></script><script type="text/javascript" src="/public/app.197e0591260e3f2808db.js"></script></body>

</html>

这里面的<!-- app -->左右都不能有空格有换行，否则会有一个warning

4.通过fs模块取到的html是个字符串，这里面包含了打包后的js，我们的目的是不让js去渲染页面，也就是一打开就必须有内容，不能白屏，所以返回的页面中要包含之前取到的真实DOM字符串

，那么只要将html中的<!-- app -->替换了就行了

最后启动node 又报了个warning

react-dom.development.js:10253 Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.

意思就是要把之前的render换成hydrate，由于返回的页面已经带有内容，这个方法会检查页面上的内容跟js要生成的DOM是否一直，如果不一致则会按jS中的重新渲染。

代码组织

由于要使用node的服务器返回页面，所以会有两套环境，一套前端一套后端

由于在服务器端没有dom，

render(<App />,document.getElementById('app'))

所以这段代码是不能运行在Node上的,只需要将<App />导出就行了

由于服务器端和前端用的js不一样 所以webpack会有两个，服务器用的webpack.config.js可在之前的文件上修改

1.添加target:"node",

2.打包后的文件名不需要加hash

3.在output中添加libraryTarget:'commonjs2'

4.删除多余元素

最后像这样

import path from "path"

export default {

    target:"node",

    entry:{

        serverEntry: path.join(__dirname,"../src/client/server-entry.js")

    },

    output:{

        filename:"[name].js",

        path: path.join(__dirname,"../dist"),

        publicPath:'/public',

        libraryTarget:'commonjs2'

    },

    module:{

        rules:[

            {

                test:/\.jsx$/,

                loader:'babel-loader'

            },

            {

                test: /\.js$/,

                exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,

                loader: "babel-loader"

            },

        ]

    }

}

最后运行脚本

React 的 server render 初步学习的更多相关文章

  1. React初步学习-利用React构建个人博客

    React初步学习-利用React构建个人博客 用React和Webpack写了一个很简单的个人博客,主要是想要熟悉一下react中各种基本基本属性及方法的使用.在构建过程中碰到不少问题,通过阅读官方 ...

  2. 状态保持以及AJAX的初步学习

    嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...

  3. 初步学习pg_control文件之十五

    接前文  初步学习pg_control文件之十四 再看如下这个: int MaxConnections; 应该说,它是一个参考值,在global.c中有如下定义 /* * Primary determ ...

  4. 初步学习pg_control文件之十三

    接前文,初步学习pg_control文件之十二 看这个: * backupStartPoint is the redo pointer of the backup start checkpoint, ...

  5. 初步学习pg_control文件之九

    接前文,初步学习pg_control文件之八 来看这个: pg_time_t time; /* time stamp of last pg_control update */ 当初初始化的时候,是这样 ...

  6. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  7. 老周的ABP框架系列教程 -》　一、框架理论初步学习

    老周的ABP框架系列教程 -- 一.框架理论初步学习   1. ABP框架的来源与作用简介 1.1  简介 1.1.1       ABP框架全称为"ASP.NET Boilerplate ...

  8. 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  9. EF Codefirst 初步学习（二）—— 程序管理命令 更新数据库

    前提:搭建成功codefirst相关代码,参见EF Codefirst  初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...

随机推荐

  1. 第01章 ElasticSearch简介

    本章内容 Apache Lucene是什么. Lucene的整体架构. 文本分析过程是如何实现的. Apache Lucene的查询语言及其使用方法. ElasticSearch的基本概念. ELas ...

  2. JS各种情况处理

    1.获取URL及其参数 实例:URL:file:///C:/Program%20Files/nodejs/test/jumbTarget.html?a=1&&b=2&& ...

  3. Verilog HDL VGA Driver for Xilinx Nexys 4 适用于Nexys4的VGA驱动

    /* * Function: VGA Timing Generator * Author: Liutianchen * Date: 2016-12-5 * Version: 6.0 * Environ ...

  4. 使用System.Data.SQLite及其EF模块操作SQLite数据库（文件）

    SQLite for .NET (System.Data.SQLite) introduction An ADO.NET provider for SQLite including EF and Li ...

  5. HTML5中本地储存概念是什么，什么优点 ，与cookie有什么区别？

    html5中的Web Storage 包括了两种存储方式: sessionStorage  和  localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...

  6. linux的档案权限和目录配置

    Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others /etc/passwd  账号信息 /etc/shadow 个人密码 /etc/group    组名记录 ...

  7. Kid的某些跳刺套路

    需要按二段方向键的跳跃: 中途松开方向键的跳跃: 中途按下方向键的跳跃: 意想不到的小跳(如果上方有墙,小跳比大跳磕头跳的更远)(kid站的是最后的位置): 意想不到的小跳*2: 意想不到的小跳*3( ...

  8. SP16549 QTREE6 - Query on a tree VI（LCT）

    题意翻译 题目描述 给你一棵n个点的树,编号1~n.每个点可以是黑色,可以是白色.初始时所有点都是黑色.下面有两种操作请你操作给我们看: 0 u:询问有多少个节点v满足路径u到v上所有节点(包括)都拥 ...

  9. php面向对象编程_2

    1, 抽象类 ,用abstract关键字来修饰一个类,这个类就是抽象类:如果用abstract关键字来修饰一个方法,这个方法就是抽象方法,如果是抽象方法就不能实现(即抽象方法只能声明,不能定义). 抽 ...

  10. CentOS下TFTP服务安装

    CentOS下TFTP服务安装 今天和同学做交换机恢复DCN操作系统的任务,然后需要用到tftp,然后就开始研究.这里对TFTP服务进行介绍以及安装. tftp 比 ftp 更易于管理 tftp 比 ...