SSR with Create React App v2

Ben Lu
Ben Lu
Apr 18, 2017 · 7 min read

Core concepts

Browser v Server

Node

Pre-render

Code Splitting

Route Management

State


Structure

Babel

require('babel-register')({ ignore: /\/(build|node_modules)\//, presets: ['react-app'] })
require('ignore-styles')

Running

Setting up Routing

API Changes from v3->v4

Router

ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root')
)
const context = {}
const store = configureStore()
const markup = renderToString(
<Provider store={store}>
<StaticRouter
location={req.url}
context={context}
>
<App/>
</StaticRouter>
</Provider>
)
if (context.url) {
// Somewhere a `<Redirect>` was rendered
redirect(301, context.url)
} else {
// we're good, send the response
const RenderedApp = htmlData.replace('{{SSR}}', markup)
res.send(RenderedApp)
}

What Props do I get?

Use the staticContext Prop

Render Differently on the Server

Express Routes

Testing

Conclusion

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade