Skip to content

Update v15 release notes #1753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 26, 2025
Merged

Update v15 release notes #1753

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
96275f5
update v15 release notes
AbanoubGhadban Aug 25, 2025
18ef203
fix links to the RSC tutorial
AbanoubGhadban Aug 25, 2025
b25f683
Add major performance breakthroughs guide for React on Rails Pro v4 a…
AbanoubGhadban Aug 25, 2025
4ef663b
Remove the date from the major performance breakthroughs upgrade guide
AbanoubGhadban Aug 25, 2025
f06a99e
Update major performance breakthroughs upgrade guide to clarify Node …
AbanoubGhadban Aug 25, 2025
9cd187d
linting
AbanoubGhadban Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions docs/release-notes/15.0.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,31 @@ Experience the future of React with full RSC integration in your Rails apps:
- Enable powerful new patterns for data fetching
- ⚡️ Requires React on Rails Pro - [See the full tutorial](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components-tutorial)

### Improved Component Hydration
### 🚀 Major Performance Breakthrough: Early Hydration

Major improvements to component and store hydration:
**React on Rails now starts hydration even before the full page is loaded!** This revolutionary change delivers significant performance improvements across all pages:

- **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

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

*Performance improvement visualization:*

![Performance comparison showing early hydration improvement](https://github.com/user-attachments/assets/ae33fe14-42f1-4cc1-bde3-9c5bb570cdbf)

*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
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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:*

-![Performance comparison showing early hydration improvement](https://github.com/user-attachments/assets/ae33fe14-42f1-4cc1-bde3-9c5bb570cdbf)
+![Early hydration: before vs. after](../assets/early-hydration-before-after.png)

-*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 delays

If 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:*
-![Performance comparison showing early hydration improvement](https://github.com/user-attachments/assets/ae33fe14-42f1-4cc1-bde3-9c5bb570cdbf)
+![Early hydration: before vs. after](../assets/early-hydration-before-after.png)

-*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 delays

Committable 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”).

Copy link
Member

@justin808 justin808 Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AbanoubGhadban ?

Copy link
Contributor

@coderabbitai coderabbitai bot Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!


- Components and stores now hydrate immediately rather than waiting for page load
- Enables faster hydration, especially beneficial for streamed pages
- Components can hydrate before the page is fully streamed
- Can use `async` scripts in the page with no fear of race condition
- No need to use `defer` anymore

### Enhanced Script Loading Strategies

Expand Down
Loading