Skip to content

Commit 90a5666

Browse files
alexeyr-ci2alexeyr
andauthored
Update RSC docs (#1744)
Co-authored-by: Alexey Romanov <[email protected]>
1 parent 900f526 commit 90a5666

File tree

1 file changed

+28
-30
lines changed

1 file changed

+28
-30
lines changed

docs/react-on-rails-pro/react-server-components.md

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,39 @@ We're thrilled to announce a major update: [React on Rails Pro](https://www.shak
1818

1919
## 🔥 React Server Components
2020

21-
Server Components execute on the server and stream HTML to the client—no extra JavaScript in your bundle. Real‑world results include:
22-
23-
- **62% reduction** in client‑side bundle size on productonboarding.com when migrating to RSC [[1]]
24-
- **63% improvement** in Google Speed Index on the RSC version of the same site [[1]]
25-
- **52% smaller** JavaScript codebase and Lighthouse scores rising from \~50 to 90+ on GeekyAnts.com [[2]]
21+
Server Components execute on the server and stream HTML to the client—no server-side JavaScript in your bundle. Real‑world results include:
22+
23+
- [productonboarding.com experiment](https://frigade.com/blog/bundle-size-reduction-with-rsc-and-frigade):
24+
- **62% reduction** in client‑side bundle size
25+
- **63% improvement** in Google Speed Index
26+
- Total blocking time: **from 110 ms to 1 ms**
27+
- [geekyants.com Case Study](https://geekyants.com/en-gb/blog/boosting-performance-with-nextjs-and-react-server-components-a-geekyantscom-case-study):
28+
- **52% smaller** JavaScript and TypeScript codebase
29+
- Lighthouse scores improved **from \~50 to \~90**
30+
- [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>):
31+
- **15% improvement** in core web vitals
32+
- **23% reduction** in Time to First Byte
33+
- [Meta’s developer portal migration](https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818#:~:text=Meta%27s%20RSC%20Implementation%20Results):
34+
- **30% reduction** in JavaScript bundle size
35+
- **60% improvement** in Time to Interactive
36+
- **45% faster** First Contentful Paint
37+
- **50% reduction** in server response time
38+
- **25% decrease** in overall maintenance complexity
39+
40+
Please note that only the first of these directly compares performance of equivalent applications with and without React Server Components.
41+
Other migrations may include React or other dependency upgrades and so on.
2642

2743
## 🌊 SSR Streaming
2844

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

31-
- **30% faster** full‑page load times at Hulu by combining streaming SSR with Server Components [[3]]
32-
- Popular libraries like styled‑components v3.1.0 have introduced streaming SSR support as the next generation of React app rendering [[4]]
33-
34-
## 📊 Core Web Vitals & TTI Improvements
35-
36-
- **60% faster** Time to Interactive on Meta’s developer portal after adopting RSC (from 3.5 s to \~1.4 s) [[5]]
37-
- **45% quicker** First Contentful Paint in the same migration [[5]]
38-
- **50% lower** server response time with Server Components [[5]]
39-
- **15% improvement** in Core Web Vitals and **23% reduction** in Time to First Byte at Airbnb after RSC migration [[5]]
47+
- [An experiment at Nordnet comparing equivalent applications with and without streaming SSR](https://www.diva-portal.org/smash/get/diva2:1903931/FULLTEXT01.pdf):
48+
- **32% faster** time to first byte
49+
- **40% faster** total blocking time
50+
- Negative result: **2% increase** in server load
51+
- [Hulu case study](https://www.compilenrun.com/docs/framework/nextjs/nextjs-ecosystem/nextjs-case-studies/#case-study-3-hulus-streaming-platform):
52+
- **30% faster** page load times
53+
- [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)
4054

4155
---
4256

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

5165
Let’s make your apps faster—together.
52-
53-
---
54-
55-
## 📚 References
56-
57-
1. productonboarding.com experiment: 62% bundle reduction, 63% Speed Index gain ([frigade.com][1])
58-
2. GeekyAnts.com case study: 52% code reduction, Lighthouse 50→90+ ([geekyants.com][2])
59-
3. Hulu—30% faster full‑page loads with streaming SSR + RSC ([questlab.pro][3])
60-
4. styled‑components v3.1.0: introduced streaming SSR support as the next generation of React rendering. ([medium.com][4])
61-
5. QuestLab: Meta’s RSC migration—30% JS reduction, 60% faster TTI, 45% faster FCP, 50% lower server response ([questlab.pro][5])
62-
63-
[1]: https://frigade.com/blog/bundle-size-reduction-with-rsc-and-frigade
64-
[2]: https://geekyants.com/en-gb/blog/boosting-performance-with-nextjs-and-react-server-components-a-geekyantscom-case-study
65-
[3]: https://www.compilenrun.com/docs/framework/nextjs/nextjs-ecosystem/nextjs-case-studies/#case-study-3-hulus-streaming-platform
66-
[4]: https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03
67-
[5]: https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818

0 commit comments

Comments
 (0)