Highlighting HTML on a server using Node.js

Question

Suppose I have a webpage that contains only a link to javascript. When the browser loads the page, it runs javascript, which does the actual rendering. Javascript is large, complex, and makes many XHR calls.

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

I tried loading the page in phantomJS , but it was slow and sometimes did not fill the whole page. So I wonder if there is an alternative.

Ideally, I need a node.js script to

• load webpage at url
• run javascript pages and then
• serialize the DOM created using javascript for HTML.

PS I can assume that javascript is based on React.js

Answer 1

Essentially, you need to configure the node.js server, which for each request can respond to the result of rendering the response component as a regular string. Key React.renderToString . An example combined 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 useful for loading url-based components, but this is not strictly necessary. In any case, if you are new to ecosystem response, I suggest you take a look at this starter kit for isomorphic responsive applications. How you should know what you are trying to do is called isomorphic Javascript.

Answer 2

I think PhantomJS and good caching is your best hope far beyond the correct server-rendered architecture (which would be the right thing). Trying to emulate a browser in a node is a crazy errand. You will never finish it and will constantly find "oops, I forgot one more thing about it" endlessly.

Many of your peers in the industry are facing the same problem. Don't mess around to order. Either make the node rendering of the first class explicit ReactDOM.renderToString() and unlock the code on the browser side (XHR, etc.), Or use a fully functional browser without a browser such as PhantomJS.

Answer 3

If you are going to hack things, why don't you do this:

• Use the lightweight proxy module node.
• Paste a small javascript file into the page that will be sent to the client. You can use harmony for this ( https://github.com/No9/harmon ).
• In this javascript file, wait until the page is loaded, and then post the resulting HTML back to your server.
• On the server, check if you have this page. If you do not, save it.

You can decide when and how you will serve the "frozen" versions of pages compared to dynamic ones.

Please note that this makes your React pages static rather than dynamic, but they are searchable. Perhaps you need a searchable archive along with dynamically displayed pages like the application. This will allow you to do this. It disables rendering for clients.

There may be problems with logins and confidential information, if, for example, it was an application like GMail.

But I have not read anything in your question that prompts this.