- Client vs server rendering
- Hmr and hot reloading with the webpack dev server
- How to use different files for client and server rendering
- React server rendering
- Render functions and railscontext
- Rspec configuration
- Webpack configuration
- Upgrading react on rails
- React on rails overview
- Minitest configuration
- How to conditionally server render based on device type
- How react on rails works
- File system based automated bundle generation
- Installation into an existing rails app
- Rails webpacker react integration options
- Convert rails 5 api only app
- Rails engine integration
- Asset pipeline
- Capistrano deployment
- Converting from custom webpack config to rails webpacker config
- Code splitting
- Angular js integration migration
- Foreman issues
- React and redux
- React router
- React helmet
- Server rendering tips
- Troubleshooting when using webpacker
- Webpack v1 notes
- Node dependencies and npm
- Generator details
- Migrating from react rails
- Updating dependencies
- Upgrade webpacker v3 to v4
- Manual installation overview
- Recommended project structure
Copyright 2020 ShakaCode
React Server Rendering
See also Client vs. Server Rendering.
What is the easiest way to setup a webpack configuration for server-side-rendering?
See the example webpack setup here: github.com/shakacode/react_on_rails_demo_ssr_hmr.
What is Server Rendering?
Here's a decent article to introduce you to server rendering. Note, React on Rails takes care of calling the methods in ReactDOMServer.
See this note.
How do you do Server Rendering with React on Rails?
react_componentview helper method provides the
prerender:option to switch on or off server rendering.
- Configure your Webpack setup to create a different server bundle per your needs. While you may reuse the same bundle as for client rendering, this is not common in larger apps for many reasons, such as code splitting, handling CSS and images, different code paths for React Router on the server vs. client, etc.
- You need to configure
config.server_bundle_js_file = "server-bundle.js"in your
- You should not put a hash on the server-bundle so that you can easily use the webpack-dev-server for client bundles and have the server bundle generated by a watch process.
Do you need server rendering?
Server rendering is used for either SEO or performance reasons.
Considerations for what code can run on in server rendering
- Never access
clearIntervalsimilarly don't make sense when server rendering.
- Promises and file system access don't work when server rendering with ExecJS. Instead, you can use the Node renderer or React on Rails Pro.