React App 和后端 API 最佳实践

Question

我有 React 应用程序和 React Router 用于客户端路由和 Rest API 通过 Express 后端（React 应用程序正在使用 API 获取数据）

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

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

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

最佳做法是什么？

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 函数用于 server-side rendering 的快速中间件，而不是仅在 [=16] 上发送 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 和重定向。

React App 和后端 API 最佳实践

React App and Backend API best practice

url-routing

node.js

express

reactjs