使用Node.js在服务器上进行HTML渲染 [英] HTML rendering on server with Node.js

问题描述

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

现在我需要创建此页面 ，即在服务器上呈现页面。

我试图在 phantomJS 但它很慢，有时没有完成整个页面。所以我想知道是否有其他选择。

理想情况下，我需要一个 node.js > b
$ b

• 通过URL加载网页


• 运行页面javascript然后


• 将JavaScript创建的DOM序列化为HTML。

PS我可以假设JavaScript基于 React.js

解决方案

本质上，您需要配置一个node.js服务器，以便每个请求都可以将反应组件渲染结果作为纯字符串进行响应。关键是 React.renderToString 。与反应路由器相结合的示例：

 从express导入express; 
导入从反应中反应; 
从react-router导入路由器; 
 const app = express（）; 
 
 //设置Jade 
 app.set（'views'，'./views'）; 
 app.set（'view engine'，'jade'）; 
 
从../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（'在http：//％s：％s'，主机，端口上侦听的示例应用程序）; 
}）; 
  

React-router有助于基于url加载组件，但并非绝对必要。无论如何，如果你是新来的反应生态系统，我建议你看看这个入门套件用于同构反应应用。正如你应该知道你所要做的是称为同构的Javascript。

Suppose I've got a web page, which contains nothing but a javascript reference. When a browser loads the page it runs the javascript, which does the actual rendering. The javascript is large, complex, and makes a lot of XHR calls.

Now I need to make this page searchable, i.e. render the page on the server.

I tried to load the page in phantomJS but the it was slow and sometimes did not complete the whole page. So I'm wondering if there is an alternative.

Ideally I need a node.js script to

• load a web page by URL
• run the page javascript and then
• serialize the DOM created by the javascript to HTML.

P.S. I can assume that the javascript is based on React.js

解决方案

Essentially you need to configure a node.js server that for every request can respond the react component rendering result as plain string. The key is React.renderToString. An example in combination with 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 is helpful to load components based on url but it is not strictly necessary. Anyway if you are new to react ecosystem I suggest you to take a look at this starter kit for isomorphic react applications. As you should know what you are trying to do is called isomorphic Javascript.

这篇关于使用Node.js在服务器上进行HTML渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！