Node 代码实现

https://easy-team.gitee.io/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;
    await ctx.render('react-server-render.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'
  }
}

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
项目配置 项目配置
应用项目规范遵循 Egg 项目开发规范,其中 app/web 目录为前端代码, config/res.config.js 为 webpack 配置文件本地开发 Webpack 内存构建,发布构建静态资源在 app/public 目录,服务端在 app/view 目录TypeScript ...
2019-12-23 sky
Next 
常见问题 常见问题
2019-12-23 sky