From 96275f54378620ffb546abcf7260dc126d9cefe9 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 10:46:23 +0300 Subject: [PATCH 1/6] update v15 release notes --- docs/release-notes/15.0.0.md | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/docs/release-notes/15.0.0.md b/docs/release-notes/15.0.0.md index c2066fa441..f429d5393a 100644 --- a/docs/release-notes/15.0.0.md +++ b/docs/release-notes/15.0.0.md @@ -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 -- 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 From 18ef20372368a4be744455815ef2d8ae3691b2e1 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 11:02:07 +0300 Subject: [PATCH 2/6] fix links to the RSC tutorial --- docs/react-on-rails-pro/react-server-components.md | 5 ++--- docs/release-notes/15.0.0.md | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/react-on-rails-pro/react-server-components.md b/docs/react-on-rails-pro/react-server-components.md index 3fa0abf64c..aa67b3ff1d 100644 --- a/docs/react-on-rails-pro/react-server-components.md +++ b/docs/react-on-rails-pro/react-server-components.md @@ -58,8 +58,7 @@ Adopting these features in React on Rails Pro will help you deliver faster, lean **Ready to get started?** -1. Check out the [docs for RSC with React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components/#why-rsc-with-streaming). -2. Update to the latest React on Rails Pro version -3. Follow our [RSC & SSR Streaming migration guide](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components-tutorial.md) +1. Update to the latest React on Rails Pro version +2. 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. diff --git a/docs/release-notes/15.0.0.md b/docs/release-notes/15.0.0.md index f429d5393a..4884e59108 100644 --- a/docs/release-notes/15.0.0.md +++ b/docs/release-notes/15.0.0.md @@ -9,7 +9,7 @@ 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/) ### 🚀 Major Performance Breakthrough: Early Hydration From b25f683c78c0fed81cc549fee50fe800a36df471 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 11:16:04 +0300 Subject: [PATCH 3/6] Add major performance breakthroughs guide for React on Rails Pro v4 and React on Rails v15 --- ...performance-breakthroughs-upgrade-guide.md | 119 ++++++++++++++++++ .../react-server-components.md | 64 ---------- 2 files changed, 119 insertions(+), 64 deletions(-) create mode 100644 docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md delete mode 100644 docs/react-on-rails-pro/react-server-components.md diff --git a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md new file mode 100644 index 0000000000..260b517e11 --- /dev/null +++ b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md @@ -0,0 +1,119 @@ +# 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** + +--- + +June 24, 2025 + +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: + +- [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](): +- **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 +- **3x 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 +- **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* diff --git a/docs/react-on-rails-pro/react-server-components.md b/docs/react-on-rails-pro/react-server-components.md deleted file mode 100644 index aa67b3ff1d..0000000000 --- a/docs/react-on-rails-pro/react-server-components.md +++ /dev/null @@ -1,64 +0,0 @@ -# React on Rails Pro: Introducing React Server Components & SSR Streaming - -**Subject: 🚀 Revolutionary Performance Boost: React Server Components & SSR Streaming Now Available in React on Rails Pro** - ---- - -June 24, 2025 - -We're thrilled to announce a major update: [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) now supports **React Server Components** and **Server‑Side Rendering (SSR) Streaming**. These features have driven significant performance gains in real‑world applications—here’s how they can transform yours. - -## 🎯 What This Means for Your Applications - -- **Faster load times** -- **Smaller JavaScript bundles** -- **Better Core Web Vitals** -- **Improved SEO** -- **Smoother user interactions** - -## 🔥 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: - -- [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](): -- **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) - ---- - -Adopting these features in React on Rails Pro will help you deliver faster, leaner, and more SEO‑friendly applications with fewer client‑side resources. - -**Ready to get started?** - -1. Update to the latest React on Rails Pro version -2. 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. From 4ef663b376023455b66f97f9a59c98174ef3fc3d Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 11:17:16 +0300 Subject: [PATCH 4/6] Remove the date from the major performance breakthroughs upgrade guide --- .../major-performance-breakthroughs-upgrade-guide.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md index 260b517e11..0c492746e9 100644 --- a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md +++ b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md @@ -4,8 +4,6 @@ --- -June 24, 2025 - 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 From f06a99eecca680c9b0a52536a58f0d43dc5619f4 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 11:18:53 +0300 Subject: [PATCH 5/6] Update major performance breakthroughs upgrade guide to clarify Node renderer improvements and performance benefits --- .../major-performance-breakthroughs-upgrade-guide.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md index 0c492746e9..342334f189 100644 --- a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md +++ b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md @@ -80,9 +80,9 @@ This optimization is particularly impactful for: ## 🚀 Enhanced Performance Infrastructure ### Fastify-Based Node Renderer -- **3x faster** Node renderer based on Fastify instead of Express +- **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 +- **Multiplexing and connection reuse** for significantly better performance when deployed separately - **No code changes required** - automatic performance boost ### Optimized Script Loading Strategies From 9cd187d746729bf688a867e76a89b69c1e0ecc03 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Mon, 25 Aug 2025 12:45:51 +0300 Subject: [PATCH 6/6] linting --- .../major-performance-breakthroughs-upgrade-guide.md | 10 +++++++--- docs/release-notes/15.0.0.md | 7 ++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md index 342334f189..4e41686700 100644 --- a/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md +++ b/docs/react-on-rails-pro/major-performance-breakthroughs-upgrade-guide.md @@ -63,16 +63,18 @@ SSR Streaming sends HTML to the browser in chunks as it's generated, enabling pr - **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 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:* +_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 @@ -80,12 +82,14 @@ This optimization is particularly impactful for: ## 🚀 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 @@ -114,4 +118,4 @@ Adopting these features in React on Rails Pro v4 and React on Rails v15 will hel Let's make your apps faster—together. **ShakaCode Team** -*Building the future of Rails + React performance* +_Building the future of Rails + React performance_ diff --git a/docs/release-notes/15.0.0.md b/docs/release-notes/15.0.0.md index 4884e59108..9b3aa48d83 100644 --- a/docs/release-notes/15.0.0.md +++ b/docs/release-notes/15.0.0.md @@ -22,21 +22,22 @@ Experience the future of React with full RSC integration in your Rails apps: - **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 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:* +_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 - New configuration option `generated_component_packs_loading_strategy` replaces `defer_generated_component_packs`