使用Node.js在服务器上进行HTML渲染

HTML rendering on server with Node.js

本文关键字：HTML 渲染 服务器 Node js 使用      更新时间：2023-09-26

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

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

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

理想情况下，我需要的node.js脚本

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

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

本质上，您需要配置一个node.js服务器，该服务器可以为每个请求以纯字符串形式响应react组件渲染结果。密钥是React.renderToString。一个与React路由器结合的例子：

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路由器有助于加载基于url的组件，但这并不是绝对必要的。无论如何，如果你是react生态系统的新手，我建议你看看这个同构react应用程序的入门工具包。正如您应该知道的，您正在尝试做的被称为同构Javascript。

如果你要破解东西，为什么不这样做：

  1. 使用轻量级节点代理模块
  2. 在提供给客户端的页面中注入一个小的javascript文件。你可以用哈蒙(https://github.com/No9/harmon)
  3. 在该javascript文件中，等待页面加载，然后将渲染的HTML发布回服务器
  4. 在服务器上，检查您是否已经拥有该页面。如果你没有，那就把它储存起来

您可以决定何时以及如何提供"冻结"版本的页面与动态版本的页面。

请注意，这使React页面是静态的，而不是动态的，但它们是可搜索的。也许你想要一个可搜索的档案和动态呈现的类似应用程序的页面。这将允许你这样做。它将渲染卸载到客户端。

登录和机密信息可能存在问题，例如，如果这是一个GMail类型的应用程序。

但我在你的问题中没有读到任何暗示。

我认为PhantomJS和良好的缓存是你迄今为止最大的希望，除了做一个合适的服务器可渲染架构（这将是真正正确的做法）。试图在节点中模拟浏览器是一件愚蠢的事。你永远不会完成它，并且会不断地发现"哎呀，我忘了另一件事"。

许多业内同行都面临着同样的问题。不要随便拼凑一些定制的解决方案。要么通过显式ReactDOM.renderToString()和分解浏览器端代码（XHR等）使节点渲染成为一流的，要么使用像PhantomJS这样功能齐全的无头浏览器。

相关文章：