使用Node.js在服务器上进行HTML呈现

Question

假设我有一个网页,其中只包含一个javascript引用.当浏览器加载页面时,它运行javascript,它执行实际渲染.javascript很大,很复杂,并且会进行大量XHR调用.

现在我需要使这个页面可搜索,即在服务器上呈现页面.

我试图加载页面,phantomJS但它很慢,有时没有完成整个页面.所以我想知道是否有替代方案.

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

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

PS我可以假设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 生态系统的新手，我建议您看看这个同构 React 应用程序的入门套件。你应该知道你正在尝试做的事情被称为同构 Javascript。