服务端渲染(SSR)

Node 代码实现

https://www.yuque.com/easy-team/egg-react/node

• 在 Node 服务端运行 jsbundle，并渲染成完整的 HTML 内容返回给客户端
  
• 使用 ctx.render 进行 React 服务端渲染，文件名为 Webpack entry 文件名，对应文件为 app/view 目录
  
• ctx.render 渲染时，默认渲染失败会自动降级为客户端渲染模式
  

app/controller/render.ts 代码

import { Controller, Context } from '@easy-team/res';
export default class AdminController extends Controller {
  public async reactServerRender() {
    const { ctx } = this;
    // home.js 为 webpack 构建后的 JSBundle 名字，也就是对应 webpack entry 名字
    await ctx.render('home.js', { 
      title: 'React Server Render',
      text: 'Egg + React + TypeScript + Webpack Server Side Render' 
    });
  }
}

app/router.ts 代码

  app.get('/ssr', app.controller.render.reactServerRender);

前端代码实现

${root}/app/web/page/react-server-render/index.tsx

import React, { Component } from 'react';
import Layout from '../../component/layout';
import { SSR } from '../../framework/app';

class Index extends Component {
  componentDidMount() {
    console.log('render');
  }
  render() {
    return <Layout>
      <h1>{this.props.text}</h1>
      <h1><a href="/csr">React Client Render</a></h1>
      <h1><a href="/nun">React + Nunjucks Client Render</a></h1>
    </Layout>;
  }
}

export default SSR(Index);

构建配置实现

${root}/config/res.config.js

const path = require('path');
module.exports = {
  entry: {
    home: 'app/web/page/home/index.tsx'
  }
}