Skip to content
Merged
Changes from all commits
Commits
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
58 changes: 28 additions & 30 deletions docs/react-on-rails-pro/react-server-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,39 @@ We're thrilled to announce a major update: [React on Rails Pro](https://www.shak

## 🔥 React Server Components

Server Components execute on the server and stream HTML to the client—no extra JavaScript in your bundle. Real‑world results include:

- **62% reduction** in client‑side bundle size on productonboarding.com when migrating to RSC [[1]]
- **63% improvement** in Google Speed Index on the RSC version of the same site [[1]]
- **52% smaller** JavaScript codebase and Lighthouse scores rising from \~50 to 90+ on GeekyAnts.com [[2]]
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](<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:

- **30% faster** full‑page load times at Hulu by combining streaming SSR with Server Components [[3]]
- Popular libraries like styled‑components v3.1.0 have introduced streaming SSR support as the next generation of React app rendering [[4]]

## 📊 Core Web Vitals & TTI Improvements

- **60% faster** Time to Interactive on Meta’s developer portal after adopting RSC (from 3.5 s to \~1.4 s) [[5]]
- **45% quicker** First Contentful Paint in the same migration [[5]]
- **50% lower** server response time with Server Components [[5]]
- **15% improvement** in Core Web Vitals and **23% reduction** in Time to First Byte at Airbnb after RSC migration [[5]]
- [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):
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's actually a migration from some other unspecified framework to Next.js, I am not sure we want to advertise it.

Copy link
Contributor

Choose a reason for hiding this comment

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

It definitely doesn't seem to make sense in the SSR section.

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

---

Expand All @@ -49,19 +63,3 @@ Adopting these features in React on Rails Pro will help you deliver faster, lean
3. Follow our [RSC & SSR Streaming migration guide](https://www.shakacode.com/react-on-rails-pro/docs/react-server-components-tutorial.md)

Let’s make your apps faster—together.

---

## 📚 References

1. productonboarding.com experiment: 62% bundle reduction, 63% Speed Index gain ([frigade.com][1])
2. GeekyAnts.com case study: 52% code reduction, Lighthouse 50→90+ ([geekyants.com][2])
3. Hulu—30% faster full‑page loads with streaming SSR + RSC ([questlab.pro][3])
4. styled‑components v3.1.0: introduced streaming SSR support as the next generation of React rendering. ([medium.com][4])
5. QuestLab: Meta’s RSC migration—30% JS reduction, 60% faster TTI, 45% faster FCP, 50% lower server response ([questlab.pro][5])

[1]: https://frigade.com/blog/bundle-size-reduction-with-rsc-and-frigade
[2]: https://geekyants.com/en-gb/blog/boosting-performance-with-nextjs-and-react-server-components-a-geekyantscom-case-study
[3]: https://www.compilenrun.com/docs/framework/nextjs/nextjs-ecosystem/nextjs-case-studies/#case-study-3-hulus-streaming-platform
[4]: https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03
[5]: https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818
Loading