Update v15 release notes #1753
Update v15 release notes #1753
Conversation
WalkthroughDocumentation updates: release notes reworded to present "Early Hydration" with benefits, narrative, and visualization; one React-on-Rails Pro doc deleted and a new upgrade-guide added; a React Server Components tutorial link path was updated. No code or public API changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Browser
participant Rails
participant NodeRenderer as Node Renderer
Note over Rails,NodeRenderer: Page request triggers server rendering pipeline
Browser->>Rails: GET /page
Rails->>NodeRenderer: request HTML stream (RSC/SSR)
NodeRenderer-->>Rails: streaming HTML chunks (progressive)
Rails-->>Browser: streaming HTML (first chunks arrive)
Note over Browser: Early Hydration starts as soon as interactive chunks arrive
Browser->>Browser: Early Hydration (hydrate components progressively)
Browser->>Browser: Final JS boot completes (full interactivity)
Note over Browser: Result: faster TTI, fewer race conditions
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/release-notes/15.0.0.md (3)
14-23: Soften absolutes, align with Breaking Changes, and fix compound-adjective hyphenation.The bullets overstate guarantees (“Eliminates Race Conditions”) and slightly conflict with the nuanced guidance later (“defer … doesn’t work well with Streamed HTML”). Recommend softening language, adding a brief cross-reference to the defaults that make this work (
generated_component_packs_loading_strategy: :async,force_load: true), and fixing “full page load” → “full-page load.”-### 🚀 Major Performance Breakthrough: Early Hydration +### 🚀 Major Performance Improvement: Early Hydration -**React on Rails now starts hydration even before the full page is loaded!** This revolutionary change delivers significant performance improvements across all pages: +**React on Rails can start hydration before the full-page load.** This change delivers significant performance improvements across many pages (especially with streaming). See “Breaking Changes” for defaults that enable this (`generated_component_packs_loading_strategy: :async`, `force_load: true`). -- **Eliminates Race Conditions**: No more waiting for full page load before hydration begins -- **Faster Time-to-Interactive**: Components hydrate as soon as their server-rendered HTML reaches the client -- **Streaming HTML Optimization**: Perfect for modern streaming responses - components hydrate in parallel with page streaming -- **Async Script Safety**: Can use `async` scripts without fear of race conditions -- **No More Defer Needed**: The previous need for `defer` to prevent race conditions has been eliminated +- **Minimizes race conditions**: Hydration can begin before the full-page load. +- **Faster time-to-interactive (TTI)**: Components hydrate as soon as their server-rendered HTML reaches the client. +- **Optimized for streaming HTML**: Components hydrate as server-rendered chunks arrive, in parallel with page streaming. +- **Async-script friendly**: Safe to use `async` without introducing hydration ordering issues. +- **Defer rarely needed**: In most cases, you no longer need `defer` due to improved hydration handling.Actionable checks:
- Verify terminology consistency: use “full-page load” when used adjectivally.
- Confirm we want to avoid the marketing “revolutionary” tone in release notes.
- Validate the “Defer rarely needed” claim against any known edge-cases (legacy Turbolinks, custom script managers).
24-29: Tighten phrasing and ensure parallel structure for the “impactful for” list.Minor copyedits for clarity/parallelism. Optional, but reads cleaner.
-This optimization is particularly impactful for: -- **Streamed pages** where content loads progressively -- **Large pages** with many components -- **Slow network conditions** where every millisecond counts -- **Modern web apps** requiring fast interactivity +This optimization is particularly impactful for: +- **Streamed pages** (content loads progressively) +- **Very large pages** with many components +- **High-latency or low-bandwidth networks** +- **Apps demanding fast interactivity**
30-37: Use a repo-hosted asset, add descriptive alt/caption, and fix hyphenation.Linking to a GitHub “user-attachments” URL is brittle for long-term docs. Please move the image into the repo (e.g., docs/assets/ or similar), improve the alt text with what’s being measured, and remove contractions. Also fix “full page load” → “full-page load.”
-*Performance improvement visualization:* +*Performance improvement visualization (TTI and hydration start timing):* - + -*The image above demonstrates the dramatic performance improvement:* -- **Left (Before)**: Hydration didn't start until the full page load completed, causing a huge delay before hydration -- **Right (After)**: Hydration starts immediately as soon as components are available, without waiting for full page load +*The image above demonstrates the performance improvement:* +- **Left (Before)**: Hydration did not start until the full-page load completed, causing a large delay. +- **Right (After)**: Hydration starts as soon as server-rendered components are available, without waiting for the full-page load. - **Result**: Components now become interactive much faster, eliminating the previous race condition delaysFollow-ups:
- Add a short “Benchmark methodology” subsection (metrics, environment, steps) to make the chart reproducible.
- Confirm the new image path is added to the repo and referenced correctly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/release-notes/15.0.0.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/release-notes/15.0.0.md
[grammar] ~14-~14: There might be a mistake here.
Context: ...erformance Breakthrough: Early Hydration **React on Rails now starts hydration even ...
(QB_NEW_EN)
[uncategorized] ~18-~18: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Race Conditions**: No more waiting for full page load before hydration begins - **Faster...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~24-~24: There might be a mistake here.
Context: ...imization is particularly impactful for: - Streamed pages where content loads pro...
(QB_NEW_EN)
[grammar] ~25-~25: There might be a mistake here.
Context: ...ages** where content loads progressively - Large pages with many components - **S...
(QB_NEW_EN)
[grammar] ~26-~26: There might be a mistake here.
Context: ...y - Large pages with many components - Slow network conditions where every mi...
(QB_NEW_EN)
[grammar] ~27-~27: There might be a mistake here.
Context: ...ditions** where every millisecond counts - Modern web apps requiring fast interac...
(QB_NEW_EN)
[grammar] ~34-~34: There might be a mistake here.
Context: ...es the dramatic performance improvement:* - Left (Before): Hydration didn't start ...
(QB_NEW_EN)
[uncategorized] ~35-~35: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...re)**: Hydration didn't start until the full page load completed, causing a huge delay be...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~36-~36: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ents are available, without waiting for full page load - Result: Components now becom...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: build-dummy-app-webpack-test-bundles (oldest)
- GitHub Check: build-dummy-app-webpack-test-bundles (newest)
- GitHub Check: examples (oldest)
- GitHub Check: examples (newest)
- GitHub Check: rspec-package-tests (oldest)
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
docs/release-notes/15.0.0.md (4)
14-23: Tighten wording, hyphenate “full‑page load,” and format defer consistently.This keeps the tone professional, reduces absolute claims, and improves consistency.
Apply this diff:
-### 🚀 Major Performance Breakthrough: Early Hydration +### 🚀 Early Hydration: Major performance improvement -**React on Rails now starts hydration even before the full page is loaded!** This revolutionary change delivers significant performance improvements across all pages: +**Hydration can begin before the full page has loaded.** This change improves performance across many pages: -- **Eliminates Race Conditions**: No more waiting for full page load before hydration begins +- **Reduces hydration race conditions**: No more waiting for the full‑page load before hydration begins - **Faster Time-to-Interactive**: Components hydrate as soon as their server-rendered HTML reaches the client -- **Streaming HTML Optimization**: Perfect for modern streaming responses - components hydrate in parallel with page streaming +- **Streaming HTML optimization**: Ideal for modern streaming responses—components hydrate in parallel with page streaming - **Async Script Safety**: Can use `async` scripts without fear of race conditions -- **No More Defer Needed**: The previous need for `defer` to prevent race conditions has been eliminated +- **No `defer` required**: The previous need for `defer` to prevent race conditions has been eliminated
58-63: Clarify breaking-change bullets and add a concise migration snippet.Minor wording/consistency tweaks (code formatting, hyphenation) plus an initializer example to reduce ambiguity for upgraders.
- - The previous need for deferring scripts to prevent race conditions has been eliminated due to improved hydration handling. Making scripts not defer is critical to execute the hydration scripts early before the page is fully loaded. - - The `force_load` configuration makes `react-on-rails` hydrate components immediately as soon as their server-rendered HTML reaches the client, without waiting for the full page load. - - If you want to keep the previous behavior, you can set `generated_component_packs_loading_strategy: :defer` or `force_load: false` in your `config/initializers/react_on_rails.rb` file. + - The previous need for `defer` to prevent hydration race conditions has been eliminated due to improved hydration handling. Executing hydration logic early (no `defer`) helps avoid full‑page‑load stalls. + - `force_load` makes `react-on-rails` hydrate components as soon as their server‑rendered HTML reaches the client, without waiting for the full‑page load. + - To keep prior behavior, set `generated_component_packs_loading_strategy: :defer` or `force_load: false` in `config/initializers/react_on_rails.rb`. - You can also keep it for individual components by passing `force_load: false` to `react_component` or `stream_react_component`. - - Redux store now supports `force_load` option, which defaults to `config.force_load` (and so to `true` if that isn't set). If `true`, the Redux store will hydrate immediately as soon as its server-side data reaches the client. + - Redux store now supports `force_load`, which defaults to `config.force_load` (and thus `true` if not set). If `true`, the Redux store hydrates immediately as soon as its server‑side data reaches the client. - You can override this behavior for individual Redux stores by calling the `redux_store` helper with `force_load: false`, same as `react_component`.Optional initializer example to include below these bullets:
# config/initializers/react_on_rails.rb ReactOnRails.configure do |config| # New defaults in v15: config.generated_component_packs_loading_strategy = :async # Shakapacker ≥ 8.2.0 config.force_load = true # To keep pre-v15 behavior: # config.generated_component_packs_loading_strategy = :defer # config.force_load = false endHappy to open a follow-up PR inserting this snippet in the right place if you prefer.
65-77: Async API change: add TS-friendly example and note about awaiting in non-top-level contexts.Calling code often needs an
awaitsite; providing TS/ESM and script-tag patterns will prevent common mistakes.- If you manually call this function to ensure components are hydrated (e.g., with async script loading), you must now await the promise it returns: ```js // Before ReactOnRails.reactOnRailsPageLoaded(); // Code expecting all components to be hydrated // After await ReactOnRails.reactOnRailsPageLoaded(); // Code expecting all components to be hydrated ``` + + TypeScript/ESM example (no top‑level await in CJS): + ```ts + import ReactOnRails from "react-on-rails"; + (async () => { + await ReactOnRails.reactOnRailsPageLoaded(); + // Safe to access hydrated components/stores here + })(); + ```
79-79: Consider adding a Turbo equivalent note alongside Turbolinks.Many apps have migrated from Turbolinks to Turbo. If the same async‑script caveat applied, add a brief sentence and link to the Turbo note for parity.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
docs/react-on-rails-pro/react-server-components.md(1 hunks)docs/release-notes/15.0.0.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/react-on-rails-pro/react-server-components.md
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: AbanoubGhadban
PR: shakacode/react_on_rails#1644
File: lib/react_on_rails/helper.rb:190-197
Timestamp: 2025-02-18T13:08:01.477Z
Learning: RSC support validation in React on Rails Pro is handled through a chain of validations:
1. Pro version check in `run_stream_inside_fiber`
2. RSC support check during pack generation via `ReactOnRailsPro.configuration.enable_rsc_support`
3. RSC support validation during component registration
This makes additional validation in the helper methods unnecessary.
🪛 LanguageTool
docs/release-notes/15.0.0.md
[grammar] ~14-~14: There might be a mistake here.
Context: ...erformance Breakthrough: Early Hydration **React on Rails now starts hydration even ...
(QB_NEW_EN)
[uncategorized] ~18-~18: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Race Conditions**: No more waiting for full page load before hydration begins - **Faster...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~24-~24: There might be a mistake here.
Context: ...imization is particularly impactful for: - Streamed pages where content loads pro...
(QB_NEW_EN)
[grammar] ~25-~25: There might be a mistake here.
Context: ...ages** where content loads progressively - Large pages with many components - **S...
(QB_NEW_EN)
[grammar] ~26-~26: There might be a mistake here.
Context: ...y - Large pages with many components - Slow network conditions where every mi...
(QB_NEW_EN)
[grammar] ~27-~27: There might be a mistake here.
Context: ...ditions** where every millisecond counts - Modern web apps requiring fast interac...
(QB_NEW_EN)
[grammar] ~34-~34: There might be a mistake here.
Context: ...es the dramatic performance improvement:* - Left (Before): Hydration didn't start ...
(QB_NEW_EN)
[uncategorized] ~35-~35: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...re)**: Hydration didn't start until the full page load completed, causing a huge delay be...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~36-~36: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ents are available, without waiting for full page load - Result: Components now becom...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: dummy-app-integration-tests (oldest)
- GitHub Check: dummy-app-integration-tests (newest)
- GitHub Check: rspec-package-tests (oldest)
🔇 Additional comments (2)
docs/release-notes/15.0.0.md (2)
24-29: Section reads well; impact bullets are clear and actionable.This list crisply communicates where early hydration helps the most. No changes needed.
12-12: Verified RSC tutorial link and added minimum Pro version qualifier
- The tutorial URL returns HTTP/2 200 OK.
- Updated the callout to specify React on Rails Pro >= 15.0.0 as the minimum required version.
Affected file:
- docs/release-notes/15.0.0.md (line 12)
Diff:
- ⚡️ Requires React on Rails Pro - [See the full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/tutorial/) + ⚡️ Requires React on Rails Pro >= 15.0.0 – [See the full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/tutorial/)
docs/release-notes/15.0.0.md
Outdated
| *Performance improvement visualization:* | ||
|
|
||
|  | ||
|
|
||
| *The image above demonstrates the dramatic performance improvement:* | ||
| - **Left (Before)**: Hydration didn't start until the full page load completed, causing a huge delay before hydration | ||
| - **Right (After)**: Hydration starts immediately as soon as components are available, without waiting for full page load | ||
| - **Result**: Components now become interactive much faster, eliminating the previous race condition delays |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Move the visualization asset into the repo for longevity and refine captions.
Links to user-attachments can break. Prefer storing the image under docs assets and referencing it relatively. Also tighten the caption language and hyphenate “full‑page load.”
Suggested diff (assuming image moved to docs/assets/early-hydration-before-after.png):
-*Performance improvement visualization:*
+*Performance improvement visualization:*
-
+
-*The image above demonstrates the dramatic performance improvement:*
+-*The image above illustrates the performance impact:*
- **Left (Before)**: Hydration didn't start until the full page load completed, causing a huge delay before hydration
-- **Right (After)**: Hydration starts immediately as soon as components are available, without waiting for full page load
+- **Right (After)**: Hydration starts as soon as components are available, without waiting for the full‑page load
- **Result**: Components now become interactive much faster, eliminating the previous race condition delaysIf you keep the external asset, please verify it returns 200:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
curl -I -sS "https://github.com/user-attachments/assets/ae33fe14-42f1-4cc1-bde3-9c5bb570cdbf" | sed -n '1,5p'Length of output: 354
Fix broken image link & embed asset locally
The external asset URL currently returns a 404 (Mon, 25 Aug 2025), so the performance visualization won’t render. Embed the image under docs/assets and update its reference. Also tighten the caption language and hyphenate “full-page load.”
• Confirm broken link: https://github.com/user-attachments/assets/ae33fe14-42f1-4cc1-bde3-9c5bb570cdbf returns 404.
• Add image file at docs/assets/early-hydration-before-after.png.
• Update reference in docs/release-notes/15.0.0.md (lines 30–37).
Suggested diff:
*Performance improvement visualization:*
-
+
-*The image above demonstrates the dramatic performance improvement:*
+-*The image above illustrates the performance impact:*
- **Left (Before)**: Hydration didn't start until the full page load completed, causing a huge delay before hydration
- **Right (After)**: Hydration starts as soon as components are available, without waiting for the full-page load
- **Result**: Components now become interactive much faster, eliminating the previous race condition delaysCommittable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 LanguageTool
[grammar] ~34-~34: There might be a mistake here.
Context: ...es the dramatic performance improvement:* - Left (Before): Hydration didn't start ...
(QB_NEW_EN)
[uncategorized] ~35-~35: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...re)**: Hydration didn't start until the full page load completed, causing a huge delay be...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~36-~36: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ents are available, without waiting for full page load - Result: Components now becom...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🤖 Prompt for AI Agents
In docs/release-notes/15.0.0.md around lines 30 to 37 the external image URL
returns 404 so the performance visualization doesn't render; add the image file
docs/assets/early-hydration-before-after.png to the repo, update the markdown
reference to point to that local path, and tighten the caption text by
hyphenating “full-page load” and shortening the caption to remove redundant
phrasing (e.g., “Left (Before): Hydration waited for full-page load; Right
(After): Hydration starts immediately as components are available — components
become interactive much faster”).
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
…nd React on Rails v15
…renderer improvements and performance benefits
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/release-notes/15.0.0.md (1)
80-80: Fix broken relative link to Turbolinks docThe release notes reference an anchor that doesn’t exist in the Turbolinks doc:
- File & Line:
docs/release-notes/15.0.0.md:80
Reference:[Turbolinks](../rails/turbolinks.md#async-script-loading)
Issue:docs/rails/turbolinks.mdexists, but there’s no## async-script-loadingheading to serve as the link target.Next steps:
- Add a
## async-script-loadingsection (with matching ID) todocs/rails/turbolinks.md, or- Update the link in the release notes to point to an existing heading (e.g., adjust to
#async-script-loadingor the correct section ID).
♻️ Duplicate comments (3)
docs/release-notes/15.0.0.md (1)
31-39: Fix broken external image link; store asset locally; refine captionThis external “user-attachments” URL is brittle and currently 404s; embed the asset under docs and link relatively. Also hyphenate “full‑page load” and streamline captions.
-_Performance improvement visualization:_ - - - -_The image above demonstrates the dramatic performance improvement:_ -- **Left (Before)**: Hydration didn't start until the full page load completed, causing a huge delay before hydration -- **Right (After)**: Hydration starts immediately as soon as components are available, without waiting for full page load -- **Result**: Components now become interactive much faster, eliminating the previous race condition delays +_Performance improvement visualization:_ + + + +_The image illustrates the impact:_ +- **Left (Before)**: Hydration waited for the full‑page load, causing a large delay +- **Right (After)**: Hydration starts as soon as components are available—no full‑page load wait +- **Result**: Components become interactive much faster; race‑condition delays are eliminatedAction items:
- Add the image file at docs/assets/early-hydration-before-after.png (lossless PNG preferred).
- If you must keep an external URL, please confirm it returns HTTP 200 and add a fallback local copy.
docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md (2)
55-64: Mirror language edits from release notes: hyphenate “full‑page load” and tighten phrasingKeep the wording consistent between the release notes and this guide.
-**React on Rails now starts hydration even before the full page is loaded!** This revolutionary change delivers significant performance improvements across all pages: +**React on Rails now starts hydration even before the full‑page load!** This delivers significant performance improvements across all pages: -- **Eliminates Race Conditions**: No more waiting for full page load before hydration begins +- **Eliminates Race Conditions**: No more waiting for the full‑page load before hydration begins - **Faster Time-to-Interactive**: Components hydrate as soon as their server-rendered HTML reaches the client - **Streaming HTML Optimization**: Perfect for modern streaming responses - components hydrate in parallel with page streaming - **Async Script Safety**: Can use `async` scripts without fear of race conditions - **No More Defer Needed**: The previous need for `defer` to prevent race conditions has been eliminated
72-80: Localize image asset; improve caption and alt textSame image-link issue here; please embed locally and align caption with the release notes.
-_Performance improvement visualization:_ - - - -_The image above demonstrates the dramatic performance improvement:_ +_Performance improvement visualization:_ + + + +_The image illustrates the impact:_
🧹 Nitpick comments (10)
docs/release-notes/15.0.0.md (5)
12-12: Cross-link upgrade guide and verify tutorial URLNice callout that RSC requires Pro. Consider adding a second link to the new upgrade guide for quicker onboarding, and please verify the tutorial URL is stable.
- - ⚡️ Requires React on Rails Pro - [See the full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/tutorial/) + - ⚡️ Requires React on Rails Pro — see: + - [Full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/tutorial/) + - [Upgrade guide for v15 / Pro v4](../react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md)
16-23: Hyphenate “full‑page load” and tighten phrasingMinor language polish for consistency and readability. Avoid “immediately as soon as,” and hyphenate the compound adjective “full‑page.”
-**React on Rails now starts hydration even before the full page is loaded!** This revolutionary change delivers significant performance improvements across all pages: +**React on Rails now starts hydration even before the full‑page load!** This delivers significant performance improvements across all pages: -- **Eliminates Race Conditions**: No more waiting for full page load before hydration begins +- **Eliminates Race Conditions**: No more waiting for the full‑page load before hydration begins - **Faster Time-to-Interactive**: Components hydrate as soon as their server-rendered HTML reaches the client - **Streaming HTML Optimization**: Perfect for modern streaming responses - components hydrate in parallel with page streaming - **Async Script Safety**: Can use `async` scripts without fear of race conditions -- **No More Defer Needed**: The previous need for `defer` to prevent race conditions has been eliminated +- **No More Defer Needed**: The previous need for `defer` to prevent race conditions has been eliminated
46-47: Clarify defer caveat for streamed HTMLSmall reword for precision and tone.
- - `:defer` - Defers script execution until after page load (doesn't work well with Streamed HTML as it will wait for the full page load before hydrating the components) + - `:defer` - Defers script execution until after the page load (suboptimal with streamed HTML because hydration waits for the full‑page load)
55-65: Verify defaults and add initializer exampleThe defaults for
generated_component_packs_loading_strategyandforce_loadare important. Recommend adding a minimal initializer snippet and verifying these match the shipped code.- The `generated_component_packs_loading_strategy` defaults to `:async` for Shakapacker ≥ 8.2.0 and `:sync` for Shakapacker < 8.2.0. - The `force_load` configuration now defaults to `true`. + +Example initializer: + +```ruby +# config/initializers/react_on_rails.rb +ReactOnRails.configure do |config| + # Shakapacker ≥ 8.2.0 defaults to :async, otherwise :sync + config.generated_component_packs_loading_strategy = :async + # Hydrate as soon as HTML and code are available + config.force_load = true +end +```If helpful, I can open a PR to add a configuration reference page and link it here.
66-78: Include TypeScript signature for async migrationSince
reactOnRailsPageLoadedis now async, include the TS signature to make migration unambiguous.// After - await ReactOnRails.reactOnRailsPageLoaded(); + await ReactOnRails.reactOnRailsPageLoaded(); // Code expecting all components to be hydrated + + // TypeScript + // declare function reactOnRailsPageLoaded(): Promise<void>;docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md (5)
3-5: Fix markdownlint MD036: use a heading instead of bold “Subject” lineConvert the emphasized line into a proper heading or drop “Subject:” entirely.
-**Subject: 🚀 Revolutionary Performance Breakthroughs: React Server Components, SSR Streaming & Early Hydration Now Available in React on Rails Pro v4 & React on Rails v15** +## 🚀 Revolutionary Performance Breakthroughs + +React Server Components, SSR Streaming & Early Hydration now available in React on Rails Pro v4 & React on Rails v15.
86-90: “No code changes required” is too strong; add caveatsInfra and build tooling (e.g., Fastify renderer, HTTP/2/h2c, proxies) often need deployment and config changes. Suggest softening the promise.
-- **No code changes required** - automatic performance boost +- **Minimal code changes in most apps** — expect deployment/config updates (renderer switch, HTTP/2/h2c, proxies). See the upgrade guide for details.
91-97: Link to configuration reference and release notesAdd cross-links so readers can jump to details about
generated_component_packs_loading_strategyand the Early Hydration breaking changes.- **Async loading by default** for Shakapacker ≥ 8.2.0 (optimal performance) - **Smart hydration timing** that works perfectly with streaming HTML - **Eliminated waterfall delays** in component hydration + +See also: +- [Release notes: Early Hydration and breaking changes](../release-notes/15.0.0.md#component-hydration-changes)
110-121: Add support and feedback linksConsider adding links to the issue tracker and discussions/Slack for upgrade support.
Let's make your apps faster—together. **ShakaCode Team** _Building the future of Rails + React performance_ + +Need help? Open an issue or start a discussion: +- GitHub Issues: https://github.com/shakacode/react_on_rails/issues +- Discussions/Slack: https://www.shakacode.com/community
23-39: Prefer primary sources for case studies; update links and mark third-party reports– Replace the “productonboarding.com experiment” link with the Frigade blog post, our primary source for that data (frigade.com).
– Replace the GeekyAnts link with the official case study on geekyants.com (geekyants.com).
– For Airbnb’s “15% improvement in core web vitals and 23% reduction in TTFB” and Meta’s “30% bundle-size reduction, 60% TTI improvement, etc.”, we couldn’t locate an official Airbnb or Meta engineering post—these figures come via a third-party aggregator. Add a parenthetical note:
“(Figures reported by third-party sources.)”No broken functionality; this simply strengthens attribution and transparency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md(1 hunks)docs/react-on-rails-pro/react-server-components.md(0 hunks)docs/release-notes/15.0.0.md(1 hunks)
💤 Files with no reviewable changes (1)
- docs/react-on-rails-pro/react-server-components.md
🧰 Additional context used
🪛 LanguageTool
docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md
[grammar] ~3-~3: There might be a mistake here.
Context: ...act on Rails Pro v4 & React on Rails v15** --- We're thrilled to announce a major update...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: ...🎯 What This Means for Your Applications - Dramatically faster load times - **Smal...
(QB_NEW_EN)
[grammar] ~11-~11: There might be a mistake here.
Context: ...ions - Dramatically faster load times - Smaller JavaScript bundles - **Better ...
(QB_NEW_EN)
[grammar] ~12-~12: There might be a mistake here.
Context: ...d times** - Smaller JavaScript bundles - Better Core Web Vitals - **Improved SE...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...ipt bundles** - Better Core Web Vitals - Improved SEO - **Smoother user interac...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...etter Core Web Vitals** - Improved SEO - Smoother user interactions - **Elimina...
(QB_NEW_EN)
[grammar] ~15-~15: There might be a mistake here.
Context: ...ved SEO** - Smoother user interactions - Eliminated race conditions - **Optimiz...
(QB_NEW_EN)
[grammar] ~16-~16: There might be a mistake here.
Context: ...actions** - Eliminated race conditions - Optimized streaming performance ## 🔥...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ...ormance** ## 🔥 React Server Components Server Components execute on the server a...
(QB_NEW_EN)
[grammar] ~40-~40: There might be a mistake here.
Context: ...e that only the first of these directly compares performance of equivalent applications ...
(QB_NEW_EN)
[grammar] ~40-~40: There might be a mistake here.
Context: ...ith and without React Server Components. Other migrations may include React or ot...
(QB_NEW_EN)
[grammar] ~43-~43: There might be a mistake here.
Context: ...upgrades and so on. ## 🌊 SSR Streaming SSR Streaming sends HTML to the browser i...
(QB_NEW_EN)
[grammar] ~47-~47: There might be a mistake here.
Context: ...smash/get/diva2:1903931/FULLTEXT01.pdf): - 32% faster time to first byte - **40...
(QB_NEW_EN)
[grammar] ~48-~48: There might be a mistake here.
Context: ...): - 32% faster time to first byte - 40% faster total blocking time - Neg...
(QB_NEW_EN)
[grammar] ~49-~49: There might be a mistake here.
Context: ...e - 40% faster total blocking time - Negative result: 2% increase in serv...
(QB_NEW_EN)
[grammar] ~50-~50: There might be a mistake here.
Context: ...e result: 2% increase in server load - [Hulu case study](https://www.compilenrun...
(QB_NEW_EN)
[grammar] ~51-~51: There might be a mistake here.
Context: ...#case-study-3-hulus-streaming-platform): - 30% faster page load times - [styled‑c...
(QB_NEW_EN)
[grammar] ~52-~52: There might be a mistake here.
Context: ...orm): - 30% faster page load times - [styled‑components v3.1.0: A massive perf...
(QB_NEW_EN)
[uncategorized] ~59-~59: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Race Conditions**: No more waiting for full page load before hydration begins - **Faster...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~67-~67: There might be a mistake here.
Context: ...ages** where content loads progressively - Large pages with many components - **S...
(QB_NEW_EN)
[grammar] ~68-~68: There might be a mistake here.
Context: ...y - Large pages with many components - Slow network conditions where every mi...
(QB_NEW_EN)
[grammar] ~69-~69: There might be a mistake here.
Context: ...ditions** where every millisecond counts - Modern web apps requiring fast interac...
(QB_NEW_EN)
[uncategorized] ~78-~78: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...re)**: Hydration didn't start until the full page load completed, causing a huge delay be...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~79-~79: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ents are available, without waiting for full page load - Result: Components now becom...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~82-~82: There might be a mistake here.
Context: ...# 🚀 Enhanced Performance Infrastructure ### Fastify-Based Node Renderer - **Faster N...
(QB_NEW_EN)
[grammar] ~86-~86: There might be a mistake here.
Context: ...er** based on Fastify instead of Express - HTTP/2 Cleartext communication between...
(QB_NEW_EN)
[grammar] ~87-~87: There might be a mistake here.
Context: ...nication between Rails and Node renderer - Multiplexing and connection reuse for ...
(QB_NEW_EN)
[grammar] ~88-~88: There might be a mistake here.
Context: ...ter performance when deployed separately - No code changes required - automatic p...
(QB_NEW_EN)
[grammar] ~93-~93: There might be a mistake here.
Context: ...nt_packs_loading_strategy` configuration - Async loading by default for Shakapack...
(QB_NEW_EN)
[grammar] ~94-~94: There might be a mistake here.
Context: ...hakapacker ≥ 8.2.0 (optimal performance) - Smart hydration timing that works perf...
(QB_NEW_EN)
[grammar] ~95-~95: There might be a mistake here.
Context: ...that works perfectly with streaming HTML - Eliminated waterfall delays in compone...
(QB_NEW_EN)
[grammar] ~98-~98: There might be a mistake here.
Context: ...tion ## 💰 Why This Upgrade is Critical These performance improvements aren't jus...
(QB_NEW_EN)
[grammar] ~102-~102: There might be a mistake here.
Context: ...oday's performance-focused web landscape - SEO improvements as Core Web Vitals be...
(QB_NEW_EN)
[grammar] ~103-~103: There might be a mistake here.
Context: ...s Core Web Vitals become ranking factors - User retention - faster sites keep use...
(QB_NEW_EN)
[grammar] ~104-~104: There might be a mistake here.
Context: ...- faster sites keep users engaged longer - Conversion rates - every millisecond c...
(QB_NEW_EN)
[grammar] ~105-~105: There might be a mistake here.
Context: ... every millisecond counts for e-commerce - Mobile performance - crucial for globa...
(QB_NEW_EN)
docs/release-notes/15.0.0.md
[grammar] ~14-~14: There might be a mistake here.
Context: ...erformance Breakthrough: Early Hydration **React on Rails now starts hydration even ...
(QB_NEW_EN)
[uncategorized] ~18-~18: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Race Conditions**: No more waiting for full page load before hydration begins - **Faster...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~26-~26: There might be a mistake here.
Context: ...ages** where content loads progressively - Large pages with many components - **S...
(QB_NEW_EN)
[grammar] ~27-~27: There might be a mistake here.
Context: ...y - Large pages with many components - Slow network conditions where every mi...
(QB_NEW_EN)
[grammar] ~28-~28: There might be a mistake here.
Context: ...ditions** where every millisecond counts - Modern web apps requiring fast interac...
(QB_NEW_EN)
[uncategorized] ~37-~37: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...re)**: Hydration didn't start until the full page load completed, causing a huge delay be...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[uncategorized] ~38-~38: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ents are available, without waiting for full page load - Result: Components now becom...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.17.2)
docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md
3-3: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: dummy-app-integration-tests (newest)
- GitHub Check: dummy-app-integration-tests (oldest)
- GitHub Check: rspec-package-tests (oldest)
🔇 Additional comments (3)
docs/release-notes/15.0.0.md (2)
88-95: Sanity-check Node/TS version guidance and link targetsClaims about Node versions tolerating require() for ESM and the TypeScript 5.8 link should be verified against current releases.
- Confirm Node versions and behavior (v20.19.0+, v22.12.0+).
- Confirm TypeScript page exists at the linked 5.8 release notes path.
- If versions differ at release time, either pin known-good versions or phrase as “Node ≥ X.Y.Z where …”.
14-23: Overall narrative improvements: LGTMThe Early Hydration narrative, benefits, and migration guidance are clear and materially improve the release notes. Once the image is embedded locally and small wording tweaks are applied, this section will be in great shape.
Also applies to: 31-41, 50-65
docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md (1)
1-18: Overall: strong, actionable upgrade guideGreat job packaging the why + how, quantitative results, and infra improvements. Once link hygiene/wording tweaks are in, this will be a solid landing doc for v15/Pro v4.
Also applies to: 43-55, 82-97, 98-107
|
|
||
| ## 🔥 React Server Components | ||
|
|
||
| Server Components execute on the server and stream HTML to the client—no server-side JavaScript in your bundle. Real‑world results include: |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Tighten RSC description to be technically accurate
RSC streams a component payload (Flight) and doesn't inherently “stream HTML” (that’s SSR). Suggest wording that distinguishes RSC from SSR streaming.
-Server Components execute on the server and stream HTML to the client—no server-side JavaScript in your bundle. Real‑world results include:
+Server Components execute on the server and stream a lightweight component payload to the client (no server‑only code shipped to the browser). Combine with SSR streaming to progressively send HTML. Real‑world results include:📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Server Components execute on the server and stream HTML to the client—no server-side JavaScript in your bundle. Real‑world results include: | |
| Server Components execute on the server and stream a lightweight component payload to the client (no server-only code shipped to the browser). Combine with SSR streaming to progressively send HTML. Real-world results include: |
🤖 Prompt for AI Agents
In docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md
around line 21, the sentence incorrectly states that RSC "stream HTML" — update
the wording to state that Server Components execute on the server and stream a
component payload (Flight) to the client rather than streaming pre-rendered HTML
(which is what SSR does); replace the line with a concise distinction that RSC
streams Flight payloads and SSR streams HTML, and keep the following "Real‑world
results include:" context unchanged.
2 participants
Summary
Remove this paragraph and provide a general description of the code changes in your pull
request... were there any bugs you had fixed? If so, mention them. If
these bugs have open GitHub issues, be sure to tag them here as well,
to keep the conversation linked together.
Pull Request checklist
Remove this line after checking all the items here. If the item is not applicable to the PR, both check it out and wrap it by
~.Add the CHANGELOG entry at the top of the file.
Other Information
Remove this paragraph and mention any other important and relevant information such as benchmarks.
This change is
Summary by CodeRabbit