1

我对使用 React.js 为我的 Web 服务进行服务器端渲染感兴趣，但是我在尝试从使用 Express.js 开发的 Web 服务移植时遇到了一个问题。目前，我的网络服务服务于 2 个平台

  1. 网络（Angular.js 客户端）
  2. Android（本机应用程序 - 用 Ja​​va 开发）

我当前的架构是我的所有客户端都使用 JSON 连接到我的服务器。因此，我的客户端将向我的服务器发送一个 HTTP GET/POST 请求，我将返回 JSON。我的服务器不提供 HTML 页面。

下面是我使用 REST 的端点 APIS 的示例：

  • /api/书籍
    1. GET - 返回带有书籍信息数组的 JSON
    2. POST - 发送一个 JSOn 到服务器，添加新书信息

我应该如何更改我的服务器端以包含 React？既然 React 使用服务器端渲染而不是使用 JSON 进行通信？

我当前的 Angular.js 项目，我将它们放在一个公共文件夹中，它用作静态文件。

可能的解决方案：

  • 我应该添加一组新的 URL，一个用于呈现 (/books)，第二个用于 JSON (/api/books)？
  • 服务器检测应用程序的类型（移动或网络）并相应地提供服务？

更新 1

另一种可能的解决方案

res.format({
    'text/html': function() {
        var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
        res.render('main-layout', {
            html: html, 
            data: JSON.stringify({books:books})
        });
    },
    'application/json': function() {
        res.send({
            book: books
        })
    }
})

是使用 Express.js 内容协商（res.format），这样做我为处理 HTML 和 JSON 保持相同的路线？

4

1 回答 1

2

你有你的 api 路由，你有你的页面路由。用户不会去http://example.com/api/books来查看书籍列表，而是去http://example.com/books/之类的地方来查看书籍页面。

当您收到对 /books/ 之类的页面的请求时，您将提供 html。您的 api 仍然可以在客户端上使用。

最简单的方法是制作非常精益的控制器，并将大部分逻辑保留在普通函数中（带有承诺的示例，但不重要）。

function getBooks(){ return /* database thing returns promise */ };

app.get('/api/books', function(req, res){
  getBooks().then(function(books){ res.send(books); });
});

app.get('/books/', function(req, res){
  getBooks().then(function(books){ 
    var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
    res.render('main-layout', {
        html: html, 
        data: JSON.stringify({books:books})
    });
  });
});

假设您的主布局模板最终生成以下内容：

<html><head></head>
<body>
  <div id="root">
    <!-- output of renderToString -->
    <div data-reactid="0">...</div>
  </div>
  <script>
    /* output of the JSON.stringify */
    var __initial_data = [{"id": ...}];
  </script>
  <script src="client-side-code-bundle.js"></script>
</body>
</html>

您使用与服务器使用的数据相同的数据在客户端上进行渲染：

React.render(React.createElement(BooksPage, __initial_data));

你的事件监听器是绑定的，你从那里开始。

于 2015-02-09T17:31:07.657 回答