所谓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. 'for' loop initial declarations are only allo

    linux系统下的c编程与windows有所不同,如果你在用gcc编译代码的时候提示‘for’ loop initial declarations are only allowed in C99 mo ...

  2. linux安装x264 ffmpeg

    1. 安装yasm 2. 安装x264 3. 安装ffmpeg 安装网上很多例子,以下是我主要参考的两篇博客: http://www.cnblogs.com/lidabo/p/3987378.html ...

  3. CentOS 下 zookeeper 安装

     搭建zookeeper需要几个条件 a. 配置Java环境  c. centos d. 下载 xshell5 (下载它只是为了更方便的使用linux)     一.新建一个myapp目录: 二.下载 ...

  4. MVC4 Action 两种异步方式

    1. xxxAsync/xxxCompleted 组合方式异步,xxxCompleted  就是他的回调函数,在执行完 xxxAsync 后调用xxxCompleted  . 使用 异步方式必须继承A ...

  5. jquery datepicker 中文

    <script type="text/javascript"> jQuery(function(){ $.datepicker.regional['zh-CN'] =  ...

  6. Discuz!和jQuery冲突的解决办法

    Common.js是官方自带的,我没改过它,所以不可能出错,所以问题就应该是两者冲突了.导致的结果我也发现了,前台的DIY功能不能用了.   我还花了很多时间在那里研究冲突的地方,后来还是没能解决.之 ...

  7. oracle通过job执行procedure

    1. 先创建一个FUNCTION CREATE OR REPLACE FUNCTION GET_TIMEOUT_PROGRAM(i_customerNo IN TK_CUST_PROG_D.CUSTO ...

  8. Crystal Report保留小数位

    If IsNull({DECL_INV_ITEM_I.DECLEAR_NO}) Or Trim({DECL_INV_ITEM_I.DECLEAR_NO}) = "" Then &q ...

  9. Qt自动填写表单并点击按钮，包括调用js方法

    本篇博客参阅了很多其他大牛的文章,具体找不到了,还望包涵>_< 因为其他博客大都是只有主要代码,对于像我这种菜鸟,根本摸不着头脑,以此想总结一下,帮助新手尽快实现功能... 主要是调用了C ...

  10. C# TinyIOC简单用法

    先添加一个接口 namespace IContract { public interface IBase { void ShowMessage(); } } 再添加两个实现类 namespace Co ...