Rails + Webpacker + React + Apollo + Hypernova SSR

Complete example for the blog post Server Side Rendering for React + Apollo GraphQL Client.

On the Ruby side we have a Rails 5.2 app, with Webpacker installed, and customized to support Hypernova. On the JS side, we have a couple React components, one using Apollo GraphQL Client.

Setup

# install dependencies
bundle install
yarn install
# boot rails
./bin/rails server
# (optional) boot hypernova for SSR
yarn run hypernova

Points of Interest

There's plenty of Rails + Webpacker boilerplate here, so here's some key places to look for implementation details:

• ./config/initializers/hypernova.rb - Hypernova configuration, including a Rails error logger on failure, which really helps when debugging!
• ./script/hypernova.js - the Hypernova server script, to run in production for SSR, and optionally in development for testing SSR (though Hypernova will fall back to just client side rendering just fine)
• ./config/webpack/server.js - a new Webpacker environment for outputting Hypernova compatible JS.
• ./config/webpack/{development,production}.js - slightly changed from default scaffolding to also build server.js
• ./app/javascript/packs/hypernova-server.js - the Hypernova server entry point, all SSR components must be registered in this (as well as application.js for client rendering too)
• ./app/javascript/hypernovaApolloRenderer.js - customized component renderer, extending the hypernova-react package's source to also include react-apollo data pre-fetching
• ./app/javascript/containers/withApollo.js - HOC providing to the client a self-rehydrating Apollo Client Provider