假设我有一个网页,其中只包含一个 javascript 引用。当浏览器加载页面时,它会运行执行实际呈现的 javascript。 javascript 很大、很复杂,并且进行了大量的 XHR
调用。
现在我需要使此页面可搜索,即在服务器上呈现该页面。
我尝试在 phantomJS
中加载页面,但速度很慢,有时无法完成整个页面。所以我想知道是否有其他选择。
理想情况下,我需要一个 node.js
脚本来
- 通过 URL 加载网页
- 运行页面javascript然后
- 将 javascript 创建的 DOM 序列化为 HTML。
附言我可以假设 javascript 是基于 React.js
最佳答案
本质上,您需要配置一个 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。
关于javascript - 使用 Node.js 在服务器上呈现 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34512499/