First off: yeah, isomorphic is a silly word, but there isn’t really a better alternative. If you’re not familiar, it just means the ability to render an app on both the client and the server.<\/p>\r\n\r\n
Why would you want to render a JavaScript app on the server? Mainly, for performance. Not everyone (especially mobile users) is on the instant connection you use while you’re developing, and they end up staring at a blank page while the JS downloads and executes. With server-side rendering, we can give them the full HTML immediately so that they can start looking at the page while the JS loads. It also provide a measure of progressive enhancement — if something in the JS fails, at least the user still gets something. And it also allows search engines to crawl your apps, for better SEO.<\/p>\r\n\r\n
Currently, with the major JS frameworks, server-side rendering of JavaScript apps is really only possible with React, though Angular and Ember have plans to support it in the future.<\/p>\r\n\r\n
This post is a basic introduction for those who are new to the topic and are curious about how it might work. This won’t be a production-ready implementation (there are plenty of starter-kits out there if that’s what you’re looking for), and we won’t deal with loading the JS app in the server-rendered version.<\/p>\r\n\r\n
To start with, let’s check out a very simple React app with a couple routes. We’ll use ES6 with Babel<\/a> and react-router<\/a> for routing, of course.<\/p>\r\n\r\n Here’s our route config, showing our app’s default “Index” route as well as an “About” route.<\/p>\r\n\r\n The app component contains the base HTML for the page, which includes links to each route as well as the So far, this is pretty standard for a routed React app. Here’s the result (or open it in a new window<\/a>). The HTML file itself contains nothing but a <title> and a <script> tag for our built JS.<\/p>\r\n\r\nbrowser.jsx<\/code> will be the starting point for our code when it runs in the browser. It imports our routes, starts up the router, and renders the resulting app into document.body<\/code>.\r\n\r\n\/\/ browser.jsx\r\nimport React from 'react';\r\nimport Router from 'react-router';\r\nimport routes from '.\/routes';\r\n\r\nRouter.run(routes, Router.HashLocation, (Root) => {\r\n React.render(<Root\/>, document.body);\r\n});\r\n<\/code><\/pre>\r\n\r\n\/\/ routes.jsx\r\nimport React from 'react';\r\nimport {Route, DefaultRoute} from 'react-router';\r\nimport App from '.\/app'\r\nimport Index from '.\/routes\/index';\r\nimport About from '.\/routes\/about';\r\n\r\nexport default (\r\n <Route handler={App}>\r\n <DefaultRoute name=\"home\" handler={Index} \/>\r\n <Route name=\"about\" handler={About} \/>\r\n <\/Route>\r\n);\r\n<\/code><\/pre>\r\n\r\nRouteHandler<\/code>, which is where our route components will be displayed.<\/p>\r\n\r\n\/\/ app.jsx\r\nimport React from 'react';\r\nimport {RouteHandler, Link} from 'react-router';\r\n\r\nexport default class extends React.Component {\r\n render() {\r\n return (\r\n <div>\r\n <h1>React Isomorphic Demo<\/h1>\r\n <nav>\r\n Route navigation:\r\n <Link to=\"home\">Home<\/Link> | <Link to=\"about\">About<\/Link>\r\n <\/nav>\r\n <RouteHandler\/>\r\n <\/div>\r\n );\r\n }\r\n}\r\n<\/code><\/pre>\r\n\r\n