React服务端渲染详解-简易教程（1）

为什么需要服务端渲染，服务端渲染能解决什么问题，这里不做赘述。

• 一是这种文章到处都是。
• 二是能看到这篇文章相信你已知晓。
• 相信文章很多好的却不多，很多文章都是大篇文字、代码、截图到处混合而且长的令人厌烦。所以我决定写一些简易清晰的。

react服务端渲染react-dom/server下的renderToString()方法,这个方法可以输出html字符串。通过node服务将编译好的字符串输出到前台浏览器解析达。废话少说上代码...

步骤：main.js(入口)、App.js(根组件)、server.js(node服务)、webpack.config.js(由于react是jsx需要webpack编译)

• main.js入口

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

export function ssrHtml(){
    return renderToString(<App/>);
    //关键一步，这步可以将<App/>及所有组件转换为html字符串
};

• App.js根组件

import React,{Component} from 'react';

class App extends Component{
    constructor(props){
        super(props)
    }
    
    render(){
        return (
            <div>
                <h2>hello,react-ssr</h2>
            </div>
        )
    }
}
export default App;

• webpack.config.js

由于需要转换jsx，先安装 yarn add babel-loader @babel/core @babel/preset-react -D

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './main.js',
    target: 'node',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist'),
        libraryTarget: 'umd'
    },
    module: {
        rules:[
            {
                test:/\.js$/,
                use: {
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        presets: ['@babel/preset-react']
                    }
                }
            }
        ]
    }
}

• server.js服务端

const Koa = require('koa');
const router = require('koa-router')();
const {ssrHtml} = require('./dist/bundle');//引入编译好文件
const app = new Koa();
router.get('/', async(ctx)=>{
    ctx.body = ssrHtml();//输出html字符串
});

app.use(router.routes());
app.listen(6000,()=>{
    console.log('server runing http://localhost:6000');
})

至此已经能利react提供的方法输出实现第一步的服务端渲染，但是目前事件、状态还无法使用，明天继续更新...