javascript - 使用 Node.js 在服务器上呈现 HTML

Question

假设我有一个网页，其中只包含一个 javascript 引用。当浏览器加载页面时，它会运行执行实际呈现的 javascript。 javascript 很大、很复杂，并且进行了大量的 XHR 调用。

现在我需要使此页面可搜索，即在服务器上呈现该页面。

我尝试在 phantomJS 中加载页面，但速度很慢，有时无法完成整个页面。所以我想知道是否有其他选择。

理想情况下，我需要一个 node.js 脚本来

• 通过 URL 加载网页
• 运行页面javascript然后
• 将 javascript 创建的 DOM 序列化为 HTML。

附言我可以假设 javascript 是基于 React.js

Answer 1

本质上，您需要配置一个 node.js 服务器，该服务器对于每个请求都可以将 React 组件渲染结果响应为纯字符串。关键是React.renderToString .结合 react-router 的示例:

import express from "express";  
import React from "react";  
import Router from "react-router";  
const app = express();

// set up Jade
app.set('views', './views');  
app.set('view engine', 'jade');

import routes from "../shared/routes";

app.get('/*', function (req, res) {  
  Router.run(routes, req.url, Handler => {
    let content = React.renderToString(<Handler />);
    res.render('index', { content: content });
  });
});

var server = app.listen(3000, function () {  
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

React-router 有助于根据 url 加载组件，但并非绝对必要。无论如何，如果您是 React 生态系统的新手，我建议您看看这个 starter kit对于同构 react 应用程序。正如您应该知道的，您正在尝试做的事情称为同构 Javascript。