This app works best with JavaScript enabled.
Overview
Getting Started
Features
🚀 Next-Gen Server Rendering: Streaming with React 18's Latest APIs
Caching
Clearing of Global State
React On Rails Pro Node Renderer
Bundle Caching
Other Utility Methods
References
Code Splitting
Caching
Server Rendering
Pro: Fragment Caching
React On Rails Pro Node React Render
Overall Management Memory and CPU on both the Rendering and Ruby Servers
Proper Node Tooling
Caching of React Rendering
Rolling Restart of Node Workers
Docs
Other Utility Methods
Why should I use React on Rails Pro if ExecJS seems to work?
Bundle Caching
Why?
Solution
Bonus for local development with multiple directories building production builds
Configuration
1. React on Rails Configuration
2. React on Rails Pro Configuration
3. Remove any call to rake task react_on_rails_pro:pre_stage_bundle_for_node_renderer
Custom ENV cache keys
Disabling via an ENV value
Examples of remote_bundle_cache_adapter:
S3BundleCacheAdapter
LocalBundleCacheAdapter
Caching
Overview
Tracing
Prerender (Server Side Rendering) Caching
Why?
Why not?
When?
How?
Diagnostics
React on Rails Fragment Caching
Why Use Fragment Caching?
Why Not Use Fragment Caching?
Considerations for Determining Your Cache Key
How: API
API Usage examples
Your JavaScript Bundles and Cache Keys
Code Splitting Loadable Components
Introduction
Installation
Summary
Configuration
Webpack
Server Bundle Configuration
Client config
Babel
Convert components into loadable components
Resolving issue with ChunkLoadError
Server and client entries
Client
Server
Configure react_on_rails_pro
React on Rails Pro
Node Renderer
Rails View
Making HMR Work
Webpack configuration
Routes file
Client-Side Startup
Server-Side Startup
Installation
Gem Installation
Gemfile Change
Alternate installation keeping the key out of your Gemfile
Using a branch in your Gemfile
Rails Configuration
Installation
Instructions for using a branch
Using Github packages
Configuration
Webpack Configuration
Authentication when using Github packages
Js Memory Leaks
Finding Memory Leaks
Causes of Memory Leaks
Mobx (mobx-react)
Code Splitting
Flickering
Profiling Server Side Rendering Code
Profiling Server-Side Code Running On Node Renderer
Profile Analysis
Profiling Renderer With High Loads
ExecJS
Profiling ExecJS with Older Versions of React on Rails Pro
Configuration
Example of Configuration
Ruby Api
View Helpers
Utility Methods
Streaming Server Rendering
Prerequisites
Benefits of Streaming Server Rendering
Implementation Steps
When to Use Streaming
Ideal Use Cases
Best Practices for Streaming
Troubleshooting
Invalid Token Workaround
Updating
Get the oauth token from
[email protected]
Update the Gemfile
Update the client/package.json
React Server Components
Add Streaming And Interactivity
Make the React Server Component Page Progressively Load
Run the Development Server
How The Streaming Works
Add Interactivity
Checking The Network Requests
Next Steps
Create Without Ssr
Prepare RORP Project to use Server Components
Create a React Server Component
Create a React Server Component Page
Register the React Server Component Page
Add the React Server Component Rendering URL Path to the Rails Routes
Add Route to the React Server Component Page
Create the React Server Component Page View
Run the Development Server
Checking the React Server Component Page
How the React Server Component Page is Rendered on Browser?
Next Steps
Glossary
RSC (React Server Component)
Types of Components
Server Components
Client Components
Bundle Related
React Server Components Bundle (RSC Bundle) (usually rsc-bundle.js)
Client Bundle
Concepts
Flight Format (RSC Format)
Hydration
RSC Payload (Flight Payload)
Selective Hydration
Streaming
Technical
Client Component Manifest
RSC URL Path
How React Server Components Work
Bundling Process
RSC Webpack Loader
RSC Client Plugin
React Server Component Payload (RSC Payload)
Automatically Generate the RSC Payload
Next Steps
Inside Client Components
Overview
Basic Usage
Before
After
Setup Steps
1. Register your server components
2. Create your client component
3. Wrap your client component
Client version:
Server version:
4. Use in Rails view
Use Cases and Examples
❌ Bad Example - Frequently Changing Props
✅ Good Example - Router Integration
Advanced Usage
Nested Routes with Server Components
Using Outlet in Server Components
Auto-Loading Bundles
Component Lifecycle
Performance Considerations
Common Patterns
Using a Loading State
Conditional Rendering
Best Practices
Purpose And Benefits
Why RSC with Streaming?
Waterfall Loading Pattern Benefits
How RSC Fixes Waterfall Server Rendering Issues:
Bundle Size Benefits
Selective Hydration Benefits
Comparison with Other Approaches:
Migration Guide
1. Enable RSC Support
2. Update Webpack Configuration
3. Gradual Component Migration
1. Mark Entry Points as Client Components
2. Identify Server Component Candidates:
3. Progressive Migration Pattern (Top-Down Approach):
4. Convert Lazy-Loaded Entry Points:
Rendering Flow
Types of Bundles
RSC Bundle (rsc-bundle.js)
Server Bundle (server-bundle.js)
Client Bundle
React Server Component Rendering Flow
Next Steps
Selective Hydration In Streamed Components
Introduction
Try Selective Hydration with React Server Component Page
Fixing Compatibility Issue that Blocks Hydration
Conclusion
Next Steps
Server Side Rendering
Update the React Server Component Page
Next Steps
Tutorial
Release Notes
4.0
🚀 Major New Features
React Server Components (RSC) - Full Production Support
Advanced Streaming Server Rendering
Enhanced Error Reporting & Tracing
Performance Improvements
Node Renderer Architecture
Changes Specific For RSC Rendering Optimization
Breaking Changes
Configuration Updates
Dependency Requirements
Package.json Resolutions (for Node < 20)
Getting Started
Support & Community
V4 React Server Components
🎯 What This Means for Your Applications
🔥 React Server Components
🌊 SSR Streaming
📊 Core Web Vitals & TTI Improvements
📚 References
Node Renderer
Basics
Simple Command Line for node-renderer
JavaScript Configuration File
Troublshooting
Upgrading
References
Debugging
Debugging using the Node debugger
Debugging Jest tests
Error Reporting And Tracing
Sentry
Sentry Tracing
Sentry Profiling
Honeybadger
Other services
Error reporting services
Tracing services
Fastify integrations
Heroku
Deploying to the Same Server As Your App Server
Procfile
Procfile.web
bin/node-renderer
node-renderer
Modifying Precompile Task
Troubleshooting
Separate Rails and Node Render Instances
Deploy Node renderer to Heroku
Deploy react_on_rails application to Heroku
References
Js Configuration
Example Launch Files
Testing example:
Simple example:
Troubleshooting
Contributors Info
Onboarding Customers
Style
Client Side JavaScript and React
Style Guides to Follow
Ruby Coding Standards
JavaScript Coding Standards
Git coding Standards
Sass Coding Standards
Shakacode logo
ShakaCode
Developed by
Copyright 2020 ShakaCode
React on rails logo
React on Rails Pro
ShakaCode Website
Community
React on Rails Pro
Search
Ctrl+K
Press
Ctrl+K
to search anytime
✕
Node Renderer Troubleshooting
If you enabled restarts (having
allWorkersRestartInterval
and
delayBetweenIndividualWorkerRestarts
), you should set it with a high number to avoid the app from crashing because all Node renderer workers are stopped/killed.