Feature: React server side rendering

src/main/resources/static/js/app.jsx

@@ -59,7 +59,7 @@ var CommentForm = React.createClass({
 });
 var CommentBox = React.createClass({
 	getInitialState: function() {
-		return {data: []};
+		return {data: this.props.data || []};
 	},
 	loadCommentsFromServer: function() {
 		$.ajax({

src/main/resources/static/js/app.render.jsx

@@ -1,4 +1,14 @@
-ReactDOM.render(
-	<CommentBox url="/api/comments" pollInterval={2000}/>,
-	document.getElementById('content')
-);
+var renderClient = function (comments) {
+    var data = comments || [];
+    ReactDOM.render(
+		<CommentBox data={data} url="/api/comments" pollInterval={2000}/>,
+		document.getElementById('content')
+	);
+};
+
+var renderServer = function (comments) {
+    var data = Java.from(comments);
+    return React.renderToString(
+    	<CommentBox data={data} url="/api/comments" pollInterval={2000} />
+    );
+};

src/main/resources/static/js/nashorn-polyfill.js

@@ -0,0 +1,6 @@
+var global = this;
+
+var console = {};
+console.debug = print;
+console.warn = print;
+console.log = print;

src/main/resources/templates/index.html

@@ -11,7 +11,7 @@
 	<div th:replace="fragments/header"></div>
 
 	<div class="container">
-		<div id="content"></div>
+		<div id="content" th:utext="${markup}"></div>
 	</div>
 
 	<div th:replace="fragments/footer"></div>
@@ -20,6 +20,9 @@
 	<script src="/js/comments.js"></script>
 	<script src="/js/app.js"></script>
 	<script src="/js/app.render.js"></script>
-	<script src="/js/test.js"></script>
+	<script th:inline="javascript">
+        var initialData = JSON.parse(/*[[${data}]]*/ '[]');
+        renderClient(initialData);
+	</script>
 </body>
 </html>