React App and Backend API 最佳实践

Question

我有 React App 和

React Router 用于客户端路由和 Rest API over Express Back（React App 正在使用 API 获取数据）

目前，我配置为"/"的快速路由转到包装 React javascript 文件的 html 文件，然后路由到后端 API

我有用于客户端路由的反应路由器，它使路由变得复杂。

我想知道将我的应用程序分为两个是否会更好：React 应用程序和后端 API 并运行两个节点实例

最佳实践是什么？

Answer 1

这是一个简单的服务器.js我正在用于我的一个项目。

// server.js
import express from 'express'
import router from './api/router'
import { port } from './config'

express()
  .use(express.static(__dirname + '/public'))
  .use('/api', router)
  .use('*', (_, res) => res.sendFile(__dirname + '/public/index.html'))
  .listen(port, _ => console.log(`listening on ${port}`))

public里面是我的索引.html、样式.css和捆绑.js。app.use('*', ...)服务器将发送索引.html。

更彻底的方法是编写一个快速中间件，该中间件使用 react-router 的 match 函数进行服务器端渲染，而不仅仅是在*上发送 index.html。例如：

import { renderToString } from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from './route-config' // <-- react routes
export const renderPage = ({ url }, res) =>
  match({ routes, location: url }, (err, redirect, renderProps) => {
    if (err)
      return res.status(500).send(err.message)
    if (redirect)
      return res.redirect(302, redirect.pathname + redirect.search)
    if (renderProps) {
      return res
        .status(200)
        .send(renderToString(<RouterContext { ...renderProps }/>))
    }
    res.status(404).send('Not found')
  })

这种方法使您能够正确处理 404 和重定向。