react服務端渲染（四）實現服務端組件渲染與自動重啓

時間 2020-06-21

標籤 react 服務渲染實現組件自動重啓欄目 React 简体版

原文原文鏈接

用了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參數表示對象變化以後執行的命令後面的文件路徑須要加雙引號，因爲外層有引號，使用 \ 進行轉義html

安裝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.gitnode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。