- 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
- React on rails pro
Copyright 2020 ShakaCode
React on Rails Pro
Support React on Rails development by becoming a Github sponsor and get these benefits:
- 1-hour per month of support via Slack, PR reviews, and Zoom for React on Rails, React-Rails, rails/webpacker, ReScript (ReasonML), TypeScript, Rust, etc.
- React on Rails Pro Software that extends React on Rails with Node server rendering, fragment caching, code-splitting, and other performance enhancements for React on Rails.
See the React on Rails Pro Support Plan.
ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. Because we own HiChee.com, we can leverage that code for your app!
Please email Justin Gordon firstname.lastname@example.org, the maintainer of React on Rails, for more information.
Pro: Fragment Caching
Fragment caching is a React on Rails Pro feature. Fragment caching is a HUGE performance booster for your apps. Use the
cached_react_component_hash. The API is the same as
react_component_hash, but for 2 differences:
cache_keytakes the same parameters as any Rails
- The props are passed via a block so that evaluation of the props is not done unless the cache is broken. Suppose you put your props calculation into some method called
<%= cached_react_component("App", cache_key: [@user, @post], prerender: true) do some_slow_method_that_returns_props end %>
Such fragment caching saves CPU work for your web server and greatly reduces the request time. It completely skips the evaluation costs of:
- Database calls to compute the props.
Note, even without server rendering (without step 3 above), fragment caching is still effective.
Pro: Integration with Node.js for Server Rendering
Default server rendering is done by ExecJS. If you want to use a Node.js server for better performing server rendering, email email@example.com. ShakaCode has built a premium Node rendering server that is part of React on Rails Pro.