Isomorphic Rendering with Webpack
Question
As a thought exercise, I've been trying to create a blogging application using Isomorphic React. After some google searching I've come across these three tutorials:
Medium: A Modern Isomorphic stack:
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057
blog.lunarlogic.org: How to create a universal Reactjs application
http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/
One part that I'm confused in particular is with how the html-webpack-plugin works on the server side.
Both of these tutorials have templates that look like:
<html>
<head>
...
</head>
<body>
...
<%- reactOutput %>
</body>
</html>
However, when I try to run this template through webpack, I get errors that reactOutput is undefined.
On a pure client-side app, I would use html-webpack-plugin to generate my index.html file to be served to the clients. This generation would make it easier for me because I have different configurations in webpack for dev and production. (Common chunks and all of that)
Do I even need to consider that when talking about server side rendering? Or am I going about this all wrong?
1 answers
solution1
0 2017-05-13 20:43:06
I dont think html-webpack-plugin figures in the equation, except to pre-generate the template. Once you have the template content you provide it to the renderer along with the value of reactOutput .
You make a call like shown here in line 42 to grab the rendered content :
var reactOutput = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);
Then you will be giving this var along with the template. In the tutorial they use ejs for templating though you can plug in your own:
res.render('index', {
reactOutput: reactOutput)
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.