This document discusses server rendering for isomorphic React web apps. It explains that server rendering allows search engines to crawl single page apps by pre-rendering content on the server. This involves using React.renderToString to generate HTML on the server and then hydrating the app on the client with React.render. It also recommends designing URLs first, using common libraries for both client and server, and addressing differences between synchronous server rendering and asynchronous client fetching.

1. Isomorphic Web Apps
with React

2. Don’t we have solutions for SEO with
single page apps already?
Is server rendering necessary?

3. https://developers.google.com/webmasters/
ajax-crawling/docs/specification
The Google AJAX
Crawling Spec

5. “Server Rendering”
App
Server
Prerender
Intarwebs
Amazon S3

6. “Yak shaving is what you are doing when
you're doing some stupid, fiddly little task
that bears no obvious relationship to what
you're supposed to be working on, but yet a
chain of twelve causal relations links what
you're doing to the original meta-task.”
- Jeremy H. Brown. http://projects.csail.mit.edu/gsb/old-archive/gsb-archive/gsb2000-02-
11.html

7. Server Rendering with React
App
Server
Intarwebs

8. ● Design your URLs first, they are important.
● Choose libraries that work in node and the
browser
● Use CommonJS and a module bundler
Core Architecture

9. Fetching data is typically an
asynchronous process.
React.renderToString is a
synchronous process.

10. React.render vs React.renderToString
getInitialState
componentWillMount
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
componentDidMount
componentWillUnmount
getInitialState
componentWillMount
render

11. Initial Render
Server
React.renderToString(App(data))
Browser
React.render(App(data))
HTML, JSON.stringify(data)

12. Demo
https://github.com/larrymyers/react-isomorphic-demo