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

Show file tree
Hide file tree
Changes from all commits
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
121 changes: 121 additions & 0 deletions docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
# React on Rails Pro: Major Performance Breakthroughs - React Server Components, SSR Streaming & Early Hydration

**Subject: 🚀 Revolutionary Performance Breakthroughs: React Server Components, SSR Streaming & Early Hydration Now Available in React on Rails Pro v4 & React on Rails v15**

---

We're thrilled to announce a major update: [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) v4 and [React on Rails](https://github.com/shakacode/react_on_rails) v15 now deliver **unprecedented performance improvements** that will transform your applications. These updates introduce multiple breakthrough technologies that work together to deliver the fastest possible user experience.

## 🎯 What This Means for Your Applications

- **Dramatically faster load times**
- **Smaller JavaScript bundles**
- **Better Core Web Vitals**
- **Improved SEO**
- **Smoother user interactions**
- **Eliminated race conditions**
- **Optimized streaming performance**

## 🔥 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:
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ 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.

Suggested change
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.


- [productonboarding.com experiment](https://frigade.com/blog/bundle-size-reduction-with-rsc-and-frigade):
- **62% reduction** in client‑side bundle size
- **63% improvement** in Google Speed Index
- Total blocking time: **from 110 ms to 1 ms**
- [geekyants.com Case Study](https://geekyants.com/en-gb/blog/boosting-performance-with-nextjs-and-react-server-components-a-geekyantscom-case-study):
- **52% smaller** JavaScript and TypeScript codebase
- Lighthouse scores improved **from ~50 to ~90**
- [Airbnb's RSC migration results](<https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818#:~:text=%22Our%20migration%20to%20React%20Server%20Components%20resulted%20in%20a%2015%25%20improvement%20in%20core%20web%20vitals%20and%20a%2023%25%20reduction%20in%20Time%20to%20First%20Byte%20(TTFB)%20across%20all%20markets.%22%20%2D%20Airbnb%20Engineering%20Team>):
- **15% improvement** in core web vitals
- **23% reduction** in Time to First Byte
- [Meta's developer portal migration](https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818#:~:text=Meta%27s%20RSC%20Implementation%20Results):
- **30% reduction** in JavaScript bundle size
- **60% improvement** in Time to Interactive
- **45% faster** First Contentful Paint
- **50% reduction** in server response time
- **25% decrease** in overall maintenance complexity

Please note that only the first of these directly compares performance of equivalent applications with and without React Server Components.
Other migrations may include React or other dependency upgrades and so on.

## 🌊 SSR Streaming

SSR Streaming sends HTML to the browser in chunks as it's generated, enabling progressive rendering:

- [An experiment at Nordnet comparing equivalent applications with and without streaming SSR](https://www.diva-portal.org/smash/get/diva2:1903931/FULLTEXT01.pdf):
- **32% faster** time to first byte
- **40% faster** total blocking time
- Negative result: **2% increase** in server load
- [Hulu case study](https://www.compilenrun.com/docs/framework/nextjs/nextjs-ecosystem/nextjs-case-studies/#case-study-3-hulus-streaming-platform):
- **30% faster** page load times
- [styled‑components v3.1.0: A massive performance boost and streaming server-side rendering support](https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03)

## ⚡️ **BREAKTHROUGH: Early Hydration Technology**

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

## 🚀 Enhanced Performance Infrastructure

### Fastify-Based Node Renderer

- **Faster Node renderer** based on Fastify instead of Express
- **HTTP/2 Cleartext** communication between Rails and Node renderer
- **Multiplexing and connection reuse** for significantly better performance when deployed separately
- **No code changes required** - automatic performance boost

### Optimized Script Loading Strategies

- New `generated_component_packs_loading_strategy` configuration
- **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

## 💰 Why This Upgrade is Critical

These performance improvements aren't just nice-to-haves—they're essential for:

- **Competitive advantage** in today's performance-focused web landscape
- **SEO improvements** as Core Web Vitals become ranking factors
- **User retention** - faster sites keep users engaged longer
- **Conversion rates** - every millisecond counts for e-commerce
- **Mobile performance** - crucial for global markets with slower connections

---

Adopting these features in React on Rails Pro v4 and React on Rails v15 will help you deliver **dramatically faster, leaner, and more SEO‑friendly applications** with fewer client‑side resources and eliminated performance bottlenecks.

**Ready to get started?**

1. Update to React on Rails v15
2. Update to React on Rails Pro v4
3. Follow our [RSC & SSR Streaming migration guide](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/tutorial/)

Let's make your apps faster—together.

**ShakaCode Team**
_Building the future of Rails + React performance_
65 changes: 0 additions & 65 deletions docs/react-on-rails-pro/react-server-components.md
View file
Open in desktop

This file was deleted.

33 changes: 25 additions & 8 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 @@ -9,17 +9,34 @@ Experience the future of React with full RSC integration in your Rails apps:
- Seamlessly use React Server Components
- Reduce client bundle sizes
- 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)
- ⚡️ 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:

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

### Enhanced Script Loading Strategies

Expand Down
Loading