You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Update README to document Pro and React Server Components
- Headline + lead bullet bumped to React on Rails Pro + Node Renderer
- New "Demoed Functionality" entries for Pro NodeRenderer, RSC features,
and the donut pattern
- Technologies + Version Targets refreshed (Pro 16.6.0, shakapacker
10.0.0, react ~19.0.4, SWC; removed Turbolinks)
- New "React Server Components (RSC)" section: demo overview, three-
bundle build architecture, env-var dispatch, setup notes, and links
to reactonrails.com docs
- Configuration Files list expanded with rscWebpackConfig.js and
bundlerUtils.js
- Small "currently on webpack, temporarily" note under "Why Rspack"
pointing at the upstream blocker (no section rename — flips back
once shakacode/react_on_rails_rsc#29 ships)
- Process Management section lists the six Procfile.dev processes with
bundler-agnostic descriptions
- TOC: added RSC entry, removed stale Rendering with Express Server
entry (no matching section in content)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
# React, Redux, Tailwind CSS, React Server Components, ES2024, Rspack, Ruby on Rails Demo
4
4
5
-
* Server-Side Rendering of React via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
5
+
* Server-Side Rendering and React Server Components via [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) with the Node Renderer
6
6
* Live at [www.reactrails.com](http://www.reactrails.com/)
7
7
8
8
## Control Plane Deployment Example
@@ -82,20 +82,22 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
82
82
+[Rspack](#rspack-with-shakapacker)
83
83
+[Configuration Files](#configuration-files)
84
84
+[Additional Resources](#additional-resources)
85
+
+[React Server Components (RSC)](#react-server-components-rsc)
85
86
+[Thruster HTTP/2 Proxy](#thruster-http2-proxy)
86
87
+[Sass, CSS Modules, and Tailwind CSS integration](#sass-css-modules-and-tailwind-css-integration)
87
88
+[Fonts with SASS](#fonts-with-sass)
88
89
+[Process Management during Development](#process-management-during-development)
89
-
+[Rendering with Express Server](#rendering-with-express-server)
90
-
+[Setup](#setup)
91
90
+[Contributors](#contributors)
92
91
+[About ShakaCode](#about-shakacode)
93
92
+[RubyMine and WebStorm](#rubymine-and-webstorm)
94
93
+[Open Code of Conduct](#open-code-of-conduct)
95
94
96
95
## Demoed Functionality
97
96
98
-
- Example of using the [react_on_rails gem](https://github.com/shakacode/react_on_rails) for easy React + Rspack integration with Rails.
97
+
- Example of using [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) with the Node Renderer for server-side rendering and React Server Components.
98
+
- Example of [React Server Components](#react-server-components-rsc) with streaming, Suspense fallbacks, error boundaries, and client-driven re-fetching — see the `/server-components` page.
99
+
- Example of `'use client'` directives splitting a tree between server-rendered and client-hydrated components (the "donut pattern").
100
+
- Example of using the [react_on_rails gem](https://github.com/shakacode/react_on_rails) (via React on Rails Pro) for React + Rspack integration with Rails.
99
101
- Example of React with [CSS Modules](http://glenmaddern.com/articles/css-modules) inside Rails using modern Shakapacker/Rspack builds.
100
102
- Example of enabling hot reloading of both JS and CSS (modules) from your Rails app in development mode. Change your code. Save. Browser updates without a refresh!
101
103
- Example of React/Redux with Rails Action Cable.
@@ -110,18 +112,17 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
-`react`: `~19.0.4` (minimum for React Server Components)
190
193
191
194
### Why Rspack
192
195
193
196
- Faster dev/test/prod compile times
194
197
- Better incremental rebuild performance for local development
195
198
- One bundler path for browser bundles and SSR bundles
196
199
200
+
> **Currently on webpack, temporarily.** The repo is built on webpack instead of rspack while [shakacode/react_on_rails_rsc#29](https://github.com/shakacode/react_on_rails_rsc/pull/29) ships rspack support for the RSC plugin. Tracked as a `TODO` in `config/shakapacker.yml`; flips back once that lands.
201
+
197
202
### Configuration Files
198
203
199
204
All bundler configuration is in `config/webpack/`:
200
-
-`webpackConfig.js` - Main Shakapacker entry point
This project demonstrates React Server Components running on top of the React on Rails Pro Node Renderer. With the dev stack running, visit [`/server-components`](http://localhost:3000/server-components) to see the demo.
220
+
221
+
### What the demo shows
222
+
223
+
| Section | What it demonstrates |
224
+
|---------|----------------------|
225
+
| Server Environment | A server-only component reads Node's `os` module and `lodash`; neither library reaches the browser. |
226
+
| Interactive Client Component | A `'use client'` component nested inside a server-component tree, hydrated normally — the "donut pattern". |
227
+
| Live Server Activity | Client-driven server-component re-fetching via `useRSC().refetchComponent` + `RSCRoute`, with `react-error-boundary` catching simulated errors and a Retry button. |
228
+
| Streamed Comments | An async server component receives comments as props from the controller and streams in via `<Suspense>` after the page shell. |
229
+
230
+
### How the build works
231
+
232
+
The app produces three bundles, all sharing the `client/app/packs/server-bundle.js` entry:
233
+
234
+
-**Client bundle** — Browser JavaScript with HMR; emits `react-client-manifest.json` for client-component resolution.
235
+
-**SSR bundle** — Traditional server-side rendering; runs in the Pro Node Renderer (port 3800).
236
+
-**RSC bundle** — RSC payload generation; runs in the Pro Node Renderer with the `react-server` resolve condition and an extra loader that classifies `'use client'` modules as client references.
237
+
238
+
The three bundles are gated by env vars:
239
+
240
+
| Env var | Result |
241
+
|---------|--------|
242
+
| (default for `bin/shakapacker-dev-server`) | Client bundle only |
243
+
|`SERVER_BUNDLE_ONLY=yes`| SSR bundle only |
244
+
|`RSC_BUNDLE_ONLY=yes`| RSC bundle only |
245
+
| (none, default for `bin/shakapacker`) | All three |
246
+
247
+
`Procfile.dev` runs three watchers (`wp-client`, `wp-server`, `wp-rsc`), each gated by its own env var, alongside the Rails server and the Pro Node Renderer.
248
+
249
+
### Setup notes
250
+
251
+
In addition to the [Basic Demo Setup](#basic-demo-setup) prerequisites:
252
+
253
+
- A `REACT_ON_RAILS_PRO_LICENSE` environment variable. Development and test environments don't require one (the Pro engine logs an info-level notice instead). Production deploys must set it to a JWT from [pro.reactonrails.com](https://www.shakacode.com/react-on-rails-pro/).
254
+
-`RENDERER_PASSWORD` (shared between Rails and the Node Renderer for SSR auth). The dev/test default is provided in `.env.example`; production must override.
255
+
- Optional: `RSC_SUSPENSE_DEMO_DELAY=true` adds a small artificial server delay so Suspense fallbacks are visible during the demo. Off by default; enabled on the QA review-app.
256
+
257
+
### Further reading
258
+
259
+
-[How React Server Components work](https://www.reactonrails.com/docs/pro/react-server-components/how-react-server-components-work) — RoR Pro's RSC overview
260
+
-[Preparing your app for RSC](https://www.reactonrails.com/docs/migrating/rsc-preparing-app) — `'use client'` directive rules
261
+
-[Component patterns](https://www.reactonrails.com/docs/migrating/rsc-component-patterns) — async server components and Suspense
262
+
-[Data fetching](https://www.reactonrails.com/docs/migrating/rsc-data-fetching) — controller-props pattern (used by `CommentsFeed`)
263
+
210
264
## Thruster HTTP/2 Proxy
211
265
212
266
This project uses [Thruster](https://github.com/basecamp/thruster), a zero-config HTTP/2 proxy from Basecamp, for optimized asset delivery and improved performance.
The tutorial makes use of a custom font OpenSans-Light. We're doing this to show how to add assets for the CSS processing. The font files are located under [client/app/assets/fonts](client/app/assets/fonts) and are loaded by both the Rails asset pipeline and the Rspack HMR server.
272
326
273
-
## Process management during development
327
+
## Process Management during Development
274
328
```bash
275
329
bundle exec foreman start -f <Procfile>
276
330
```
277
331
278
-
1.[`Procfile.dev`](Procfile.dev): Starts the Rspack Dev Server and Rails with Hot Reloading.
332
+
1.[`Procfile.dev`](Procfile.dev): Starts the full development stack with Hot Reloading. Six processes:
333
+
-`rescript` — ReScript watch mode
334
+
-`rails` — Rails server via Thruster on port 3000
335
+
-`wp-client` — Shakapacker dev server with HMR (client bundle)
336
+
-`wp-server` — Shakapacker watcher for the SSR bundle
337
+
-`wp-rsc` — Shakapacker watcher for the React Server Components bundle
338
+
-`node-renderer` — React on Rails Pro Node Renderer on port 3800
279
339
1.[`Procfile.dev-static`](Procfile.dev-static): Starts the Rails server and generates static assets that are used for tests.
0 commit comments