react服务端渲染（四）实现服务端组件渲染与自动重启

最新推荐文章于 2022-04-17 11:00:00 发布

ding1885

最新推荐文章于 2022-04-17 11:00:00 发布

阅读量172

点赞数

文章标签： javascript webpack git ViewUI

原文链接：http://www.cnblogs.com/longlongdan/p/11271537.html

版权

用了webpack的stage-0进行打包所以可以支持使用es6 modules语法

import React from "react"
const Home = () => {
    return <div>Home1233333</div>
}
export default Home;

借助react-dom提供的renderToString方法完成组件到字符串的转换

import React from 'react';
import { renderToString } from 'react-dom/server'

import Home from './containers/Home'

app.get("/",(req,res)=>{
    res.send(renderToString(<Home />))
})

直接渲染的home在浏览器端显示只是一个dom节点

我们最好拼接为html模板返回

var home = renderToString(<Home />);
app.get("/",(req,res)=>{
    res.send(`<html>
        <head>
            <title>服务端渲染</title>
        </head>
        <body>
        ${home}
        </body>
    </html>`)
})

webpack添加--watch参数，完成对入口文件以及依赖文件的监听实现自动重新打包
nodemo安装实现监听文件/文件夹实现自动重启
```
    "start": "nodemon --watch build --exec node \"./build/bundle.js\"",
    "build": "webpack --config webpack.server.js --watch"
```
nodemon --watch参数表示监听的对象 --exec参数表示对象变化之后执行的命令后面的文件路径需要加双引号，由于外层有引号，使用 \ 进行转义

安装npm-run-all来同时实现两个命令(--parallel参数代表并行执行)https://www.npmjs.com/package/npm-run-all

    "dev": "npm-run-all --parallel dev:**",
    "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"",
    "dev:build": "webpack --config webpack.server.js --watch"

项目地址：git@github.com:longlongdan/Reactssr.git

转载于:https://www.cnblogs.com/longlongdan/p/11271537.html

ding1885

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react服务端渲染（四）实现服务端组件渲染与自动重启

用了webpack的stage-0进行打包所以可以支持使用es6 modules语法import React from "react"const Home = () => { return <div>Home1233333</div>}export default Home;借助react-dom提供的rende...
复制链接

扫一扫