node.js - React App 和后端 API 最佳实践

Question

我有 React App 和用于客户端路由的 React Router 以及通过 Express Backend 的 Rest API(React App 使用 API 获取数据)

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

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

我想知道将我的应用程序分成两部分是否会更好:React 应用程序和后端 API 并运行两个 Node 实例

最佳实践是什么？

Answer 1

这是我在我的一个项目中使用的简单 server.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 的内部是我的 index.html、styles.css 和 bundle.js。在 app.use('*', ...) 上，服务器将发送 index.html。

更彻底的方法是编写一个使用 react-router 的 match 函数的 express 中间件 server-side rendering而不仅仅是在 * 上发送 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 和重定向。