react_on_rails_pro 16.2.0.test.6 → 16.2.0

data/docs/installation.md

@@ -47,16 +47,15 @@ Set your license token as an environment variable:
 export REACT_ON_RAILS_PRO_LICENSE="your-license-token-here"
 ```
 
-Or configure it in your Rails initializer (not recommended for production):
+Or create a config file at `config/react_on_rails_pro_license.key`:
 
-```ruby
-# config/initializers/react_on_rails_pro.rb
-ReactOnRailsPro.configure do |config|
-  config.license_token = ENV["REACT_ON_RAILS_PRO_LICENSE"]
-end
+```bash
+echo "your-license-token-here" > config/react_on_rails_pro_license.key
 ```
 
-⚠️ **Security Warning**: Never commit your license token to version control. Always use environment variables or secure secret management systems (like Rails credentials, Heroku config vars, AWS Secrets Manager, etc.).
+⚠️ **Security Warning**: Never commit your license token to version control. Add `config/react_on_rails_pro_license.key` to your `.gitignore`. For production, use environment variables or secure secret management systems (Rails credentials, Heroku config vars, AWS Secrets Manager, etc.).
+
+For complete license setup instructions, see [LICENSE_SETUP.md](../LICENSE_SETUP.md).
 
 ## Rails Configuration
 
@@ -72,9 +71,58 @@ ReactOnRailsPro.configure do |config|
 end
 ```
 
-# Node Package Installation
+# Client Package Installation
+
+All React on Rails Pro users need to install the `react-on-rails-pro` npm package for client-side React integration.
+
+## Install react-on-rails-pro
+
+### Using npm:
+
+```bash
+npm install react-on-rails-pro
+```
+
+### Using yarn:
+
+```bash
+yarn add react-on-rails-pro
+```
+
+### Using pnpm:
+
+```bash
+pnpm add react-on-rails-pro
+```
+
+## Usage
+
+**Important:** Import from `react-on-rails-pro`, not `react-on-rails`. The Pro package re-exports everything from the core package plus Pro-exclusive features.
+
+```javascript
+// Correct - use react-on-rails-pro
+import ReactOnRails from 'react-on-rails-pro';
+
+// Register components
+ReactOnRails.register({ MyComponent });
+```
+
+Pro-exclusive imports:
+
+```javascript
+// React Server Components
+import { RSCRoute } from 'react-on-rails-pro/RSCRoute';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/client';
+
+// Async component loading
+import { wrapServerComponentRenderer } from 'react-on-rails-pro/wrapServerComponentRenderer/client';
+```
+
+See the [React Server Components tutorial](./react-server-components/tutorial.md) for detailed usage.
+
+# Node Renderer Installation
 
-**Note:** You only need to install the Node Package if you are using the standalone node renderer (`NodeRenderer`). If you're using `ExecJS` (the default), skip this section.
+**Note:** You only need to install the Node Renderer if you are using the standalone node renderer (`NodeRenderer`). If you're using `ExecJS` (the default), skip this section.
 
 ## Install react-on-rails-pro-node-renderer
 

data/docs/js-memory-leaks.md

@@ -1,11 +1,11 @@
 # JS Memory Leaks
 
 ## Finding Memory Leaks
+
 For memory leaks, see [node-memwatch](https://github.com/marcominetti/node-memwatch). Use the `—inspect` flag to make and compare heap snapshots.
 
 ## Causes of Memory Leaks
 
-
 ### Mobx (mobx-react)
 
 ```js
@@ -18,5 +18,4 @@ const App = (props, railsContext) => {
   useStaticRendering(true);
 ```
 
-* See details here: [Mobx site](https://github.com/mobxjs/mobx-react#server-side-rendering-with-usestaticrendering)
-
+- See details here: [Mobx site](https://github.com/mobxjs/mobx-react#server-side-rendering-with-usestaticrendering)

data/docs/node-renderer/debugging.md

@@ -1,12 +1,14 @@
 Because the renderer communicates over a port to the server, you can start a renderer instance in this repo and hack on it.
 
 # Yalc vs Yarn Link
+
 The project is setup to use [yalc](https://github.com/whitecolor/yalc). This means that at the top level
-directory, `yalc publish` will send the node package files to the global yalc store. Running `yarn` in the 
+directory, `yalc publish` will send the node package files to the global yalc store. Running `yarn` in the
 `/spec/dummy/client` directory will copy the files from the global yalc store over to the local `node_modules`
 directory.
 
 # Debugging the Node Renderer
+
 1. cd to the top level of the project.
 1. `yarn` to install any libraries.
 1. To compile renderer files on changes, open console and run `yarn build:dev`.
@@ -17,9 +19,11 @@ directory.
 1. Check out the top level nps task `nps renderer.debug` and `spec/dummy/package.json` which has script `"node-renderer-debug"`.
 
 ## Debugging using the Node debugger
+
 1. See [this article](https://github.com/shakacode/react_on_rails/issues/1196) on setting up the debugger.
 
 ## Debugging Jest tests
+
 1. See [the Jest documentation](https://jestjs.io/docs/troubleshooting) for overall guidance.
 2. For RubyMine, see [the RubyMine documentation](https://www.jetbrains.com/help/ruby/running-unit-tests-on-jest.html) for the current information. The original [Testing With Jest in WebStorm](https://blog.jetbrains.com/webstorm/2018/10/testing-with-jest-in-webstorm/) post can be useful as well.
 

data/docs/node-renderer/error-reporting-and-tracing.md

@@ -13,8 +13,8 @@ It should initialize the services according to your requirements and then enable
 2. Call `Sentry.init` with the desired options according to [the documentation](https://docs.sentry.io/platforms/javascript/guides/fastify/configuration/).
 3. Then load the integration:
 
-    ```js
-    require('react-on-rails-pro-node-renderer/integrations/sentry').init();
+   ```js
+   require('react-on-rails-pro-node-renderer/integrations/sentry').init();
    ```
 
    - Use `react-on-rails-pro-node-renderer/integrations/sentry6` instead of `.../sentry` for versions of Sentry SDK older than 7.63.0.
@@ -22,12 +22,13 @@ It should initialize the services according to your requirements and then enable
 
 ### Sentry Tracing
 
-To enable Sentry Tracing: 
+To enable Sentry Tracing:
+
 1. Include `enableTracing`, `tracesSampleRate`, or `tracesSampler` in your `Sentry.init` call. See [the Sentry documentation](https://docs.sentry.io/platforms/javascript/tracing/) for details, but ignore `Sentry.browserTracingIntegration()`.
-2. Depending on your Sentry SDK version: 
-    - if it is older than 7.63.0, install `@sentry/tracing` as well as `@sentry/node` (with the same exact version) and pass `integrations: [new Sentry.Integrations.Http({ tracing: true })]` to `Sentry.init`.
-    - for newer v7.x.y, pass `integrations: Sentry.autoDiscoverNodePerformanceMonitoringIntegrations()`.
-    - for v8.x.y, Node HTTP tracing is included by default.
+2. Depending on your Sentry SDK version:
+   - if it is older than 7.63.0, install `@sentry/tracing` as well as `@sentry/node` (with the same exact version) and pass `integrations: [new Sentry.Integrations.Http({ tracing: true })]` to `Sentry.init`.
+   - for newer v7.x.y, pass `integrations: Sentry.autoDiscoverNodePerformanceMonitoringIntegrations()`.
+   - for v8.x.y, Node HTTP tracing is included by default.
 3. Pass `{ tracing: true }` to the `init` function of the integration. It can be combined with `fastify: true`.
 
 ### Sentry Profiling
@@ -39,13 +40,14 @@ To enable Sentry Tracing:
 1. [Set up Honeybadger](https://docs.honeybadger.io/lib/javascript/integration/node/). Call `Honeybadger.configure` with the desired options in the configuration script.
 2. Then load the integration:
 
-    ```js
-    require('react-on-rails-pro-node-renderer/integrations/honeybadger').init();
-    ```
+   ```js
+   require('react-on-rails-pro-node-renderer/integrations/honeybadger').init();
+   ```
 
-    Use `init({ fastify: true })` to capture additional Fastify-related information.
+   Use `init({ fastify: true })` to capture additional Fastify-related information.
 
 ## Other services
+
 You can create your own integrations in the same way as the provided ones.
 If you have access to the React on Rails Pro repository,
 you can use [their implementations](https://github.com/shakacode/react_on_rails_pro/tree/master/packages/node-renderer/src/integrations) as examples.
@@ -57,13 +59,18 @@ Import these functions from `react-on-rails-pro-node-renderer/integrations/api`:
 - Use `addNotifier` if the service uses the same reporting function for both JavaScript `Error`s and string messages.
 
 For example, integrating with BugSnag can be as simple as
+
 ```js
 const Bugsnag = require('@bugsnag/js');
 const { addNotifier } = require('react-on-rails-pro-node-renderer/integrations/api');
 
-Bugsnag.start({ /* your options */ });
+Bugsnag.start({
+  /* your options */
+});
 
-addNotifier((msg) => { Bugsnag.notify(msg); });
+addNotifier((msg) => {
+  Bugsnag.notify(msg);
+});
 ```
 
 ### Tracing services
@@ -74,11 +81,14 @@ addNotifier((msg) => { Bugsnag.notify(msg); });
 
 To track requests as [sessions](https://docs.bugsnag.com/platforms/javascript/capturing-sessions/#startsession) in BugSnag 8.x+,
 the above example becomes
+
 ```js
 const Bugsnag = require('@bugsnag/js');
 const { addNotifier, setupTracing } = require('react-on-rails-pro-node-renderer/integrations/api');
 
-Bugsnag.start({ /* your options */ });
+Bugsnag.start({
+  /* your options */
+});
 
 addNotifier((msg) => {
   Bugsnag.notify(msg);
@@ -119,7 +129,9 @@ Bugsnag v7 is a bit more complicated:
 const Bugsnag = require('@bugsnag/js');
 const { addNotifier, setupTracing } = require('react-on-rails-pro-node-renderer/integrations/api');
 
-Bugsnag.start({ /* your options */ });
+Bugsnag.start({
+  /* your options */
+});
 
 addNotifier((msg, { bugsnag = Bugsnag }) => {
   bugsnag.notify(msg);

data/docs/node-renderer/heroku.md

@@ -34,10 +34,12 @@ renderer: bin/node-renderer
 cd client
 yarn run node-renderer
 ```
+
 Be sure your script to run the node-renderer sets some port, like 3800 which is also set as the
 config.renderer_url for your Rails server.
 
 ### node-renderer
+
 Any task in client/package.json that starts the node-renderer
 
 ### Modifying Precompile Task
@@ -76,14 +78,13 @@ Errno::EADDRINUSE: Address already in use - bind(2) for "0.0.0.0" port 21752
   /app/vendor/bundle/ruby/2.6.0/gems/puma-4.3.3/lib/puma/binder.rb:229:in `initialize'
 ```
 
-
 ## Separate Rails and Node Render Instances
 
 ### Deploy Node renderer to Heroku
 
 1. Create your **Heroku** app with **Node.js** buildpack, say `renderer-test.herokuapp.com`.
 2. In your JS configuration file or
-   1. If setting the port, ensure the port uses `process.env.PORT` so it will use port number provided by **Heroku** environment. The default is to use the env value RENDERER_PORT if available. (*TODO: Need to check on this*)
+   1. If setting the port, ensure the port uses `process.env.PORT` so it will use port number provided by **Heroku** environment. The default is to use the env value `RENDERER_PORT` if available.
    2. Set password in your configuration to something like `process.env.RENDERER_PASSWORD` and configure the corresponding **ENV variable** on your **Heroku** dyno so the `config/initializers/react_on_rails_pro.rb` uses this value.
 3. Run deployment process (usually by pushing changes to **Git** repo associated with created **Heroku** app).
 4. Once deployment process is finished, renderer should start listening from something like `renderer-test.herokuapp.com` host.
@@ -95,8 +96,6 @@ Errno::EADDRINUSE: Address already in use - bind(2) for "0.0.0.0" port 21752
 3. Run deployment process (usually by pushing changes to **Git** repo associated with created **Heroku** app).
 4. Once deployment process is finished, all rendering requests form your `react_on_rails` app should be served by `<your-heroku-app>.herokuapp.com` app via **HTTPS**.
 
-
-
 ## References
 
-* [Heroku Node Settings](https://github.com/damianmr/heroku-node-settings)
+- [Heroku Node Settings](https://github.com/damianmr/heroku-node-settings)

data/docs/profiling-server-side-rendering-code.md

@@ -7,53 +7,53 @@ This guide uses the RORP dummy app in profiling the server-side code.
 ## Profiling Server-Side Code Running On Node Renderer
 
 1. Run node-renderer using the `--inspect` node option.
-    
-    Open the `spec/dummy/Procfile.dev` file and update the `node-renderer` process to run the renderer using `node --inspect` command. Change the following line
-    
-    ```bash
-    node-renderer: RENDERER_LOG_LEVEL=debug yarn run node-renderer
-    ```
-    
-    To
-    
-    ```bash
-    node-renderer: RENDERER_LOG_LEVEL=debug RENDERER_PORT=3800 node --inspect client/node-renderer.js
-    ```
+
+   Open the `spec/dummy/Procfile.dev` file and update the `node-renderer` process to run the renderer using `node --inspect` command. Change the following line
+
+   ```bash
+   node-renderer: RENDERER_LOG_LEVEL=debug yarn run node-renderer
+   ```
+
+   To
+
+   ```bash
+   node-renderer: RENDERER_LOG_LEVEL=debug RENDERER_PORT=3800 node --inspect client/node-renderer.js
+   ```
 
 1. Run the App
-    
-    ```bash
-    bin/dev
-    ```
+
+   ```bash
+   bin/dev
+   ```
 
 1. Visit `chrome://inspect` on Chrome browser and you should see something like this:
-    
-    ![Chrome Inspect Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/2a64660f-9381-4bbb-b385-318aa833389d)
+
+   ![Chrome Inspect Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/2a64660f-9381-4bbb-b385-318aa833389d)
 
 1. Click the `inspect` link. This should open a developer tools window. Open the performance tab there
-    
-    ![Chrome Performance Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/ddf572bd-182f-4911-bb8f-4bafa4ec1034)
+
+   ![Chrome Performance Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/ddf572bd-182f-4911-bb8f-4bafa4ec1034)
 
 1. Click the `record` button
-    
-    ![Chrome Performance Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/20848091-d446-4690-988b-09db59ddf9e0)
+
+   ![Chrome Performance Tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/20848091-d446-4690-988b-09db59ddf9e0)
 
 1. Open the web app you want to test and refresh it multiple times. We use the React on Rails Pro dummy app for this tutorial. So, we will open it in the browser by going to [http://localhost:3000](http://localhost:3000)
-    
-    ![RORP Dummy App](https://github.com/shakacode/react_on_rails_pro/assets/7099193/8dc1ef3d-62e4-492d-a5b4-c693b7f7e08c)
+
+   ![RORP Dummy App](https://github.com/shakacode/react_on_rails_pro/assets/7099193/8dc1ef3d-62e4-492d-a5b4-c693b7f7e08c)
 
 1. If you get any `Timeout Error` while visiting the page, you may need to increase the `ssr_timeout` in the Ruby on Rails initializer file. **Running node-renderer** using the `--inspect` flag makes it slower. So, you can increase the `ssr_timeout` to `10 seconds` by adding the following line to `config/initializers/react_on_rails_pro.rb` file
-    
-    ```ruby
-    config.ssr_timeout = 10
-    ```
+
+   ```ruby
+   config.ssr_timeout = 10
+   ```
 
 1. Stop performance recording
-    
-    ![Running profiler at the performance tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/bc02bbd6-3358-4edf-ba3a-36e11620a096)
+
+   ![Running profiler at the performance tab](https://github.com/shakacode/react_on_rails_pro/assets/7099193/bc02bbd6-3358-4edf-ba3a-36e11620a096)
 
 1. You should see something like this
-   
+
    ![Recorded Node JS profile](https://github.com/shakacode/react_on_rails_pro/assets/7099193/6dc098bb-9f07-49be-9a1f-2149f6712631)
 
 ## Profile Analysis
@@ -89,24 +89,25 @@ config.prerender_caching = false
 To see the renderer behavior while there are many requests coming to it, you can use the `ApacheBench (ab)` tool that lets you make many HTTP requests to a specific end points at the same time.
 
 1. The `ApacheBench (ab)` is installed on macOS by default. You can install it on Linux by running the following command
-    
-    ```bash
-    sudo apt-get install apache2-utils 
-    ```
+
+   ```bash
+   sudo apt-get install apache2-utils
+   ```
 
 1. Do all steps in `Profiling Server-Side Code Running On Node Renderer` section except the step number 6. Instead of opening the page in the browser, let the `ab` tool make many HTTP requests for you by running the following command.
-    
-    ```bash
-    ab -n 100 -c 10 http://localhost:3000/
-    ```
 
-1. Now, we you open the noder-renderer profile, you will see it very busy responding to all requests
-    
-    ![Busy renderer profile](https://github.com/shakacode/react_on_rails_pro/assets/7099193/2ce69bf2-45ee-4a9d-af33-37e20aed86bc)
+   ```bash
+   ab -n 100 -c 10 http://localhost:3000/
+   ```
+
+1. Now, when you open the node-renderer profile, you will see it very busy responding to all requests
+
+   ![Busy renderer profile](https://github.com/shakacode/react_on_rails_pro/assets/7099193/2ce69bf2-45ee-4a9d-af33-37e20aed86bc)
 
 1. Then, you can analyze the renderer behavior of each request as stated in `Profile Analysis` section.
 
 ### ExecJS
+
 React on Rails Pro supports profiling with ExecJS starting from version **4.0.0**. You will need to do more work to profile ExecJS if you are using an older version.
 
 If you are using **v4.0.0** or later, you can enable the profiler by setting the `profile_server_rendering_js_code` config by adding the following line to the ReactOnRails initializer.

data/docs/react-server-components/add-streaming-and-interactivity.md

@@ -3,6 +3,7 @@
 Before reading this document, please read the [Create React Server Component without SSR](./create-without-ssr.md) document.
 
 ## Make the React Server Component Page Progressively Load
+
 React Server Components support progressive loading, which means they can be built as asynchronous functions that resolve and render after the initial HTML is sent to the client. This enables a better user experience by:
 
 1. Showing initial content quickly while async data loads;
@@ -163,7 +164,6 @@ It's important to note that while client components (like `ToggleContainer`) can
 
 This pattern allows us to optimize performance by keeping most of the component logic on the server while selectively adding interactivity where needed on the client.
 
-
 ## Checking The Network Requests
 
 Let's check what bundles are being loaded for this page. By opening the browser's developer tools and going to the "Network" tab, you can see JavaScript bundles being loaded for this page.

data/docs/react-server-components/create-without-ssr.md

@@ -40,12 +40,12 @@ end
 > After enabling RSC support, you must add the `'use client';` directive at the top of your JavaScript entry points (packs) that are not yet migrated to support Server Components.
 >
 > This directive tells React that these files should be treated as client components. You don't need to add this directive to all JavaScript files - only the entry points. Any file imported by a file marked with `'use client';` will automatically be treated as a client component as well. Without this directive, React will assume these files contain Server Components, which will cause errors if the components use client-side features like:
+>
 > - `useState` or other state hooks
 > - `useEffect` or other effect hooks
 > - Event handlers (onClick, onChange, etc.)
 > - Browser APIs
 
-
 For example:
 
 ```js
@@ -55,7 +55,6 @@ For example:
 // ... existing code ...
 ```
 
-
 3. Create a new Webpack configuration to generate React Server Components bundles (RSC bundles) (usually named `rsc-bundle.js`).
 
 RSC bundle is a clone of the server bundle `server-bundle.js` but we just add the RSC loader `react-on-rails-rsc/WebpackLoader` to the used loaders.
@@ -63,6 +62,7 @@ RSC bundle is a clone of the server bundle `server-bundle.js` but we just add th
 You can check the [How React Server Components work](how-react-server-components-work.md) for more information about the RSC loader (It's better to read it after reading this article).
 
 Create a new file `config/webpack/rscWebpackConfig.js`:
+
 ```js
 // use the same config as serverWebpackConfig.js but add the RSC loader
 const serverWebpackConfig = require('./serverWebpackConfig');
@@ -95,7 +95,7 @@ const configureRsc = () => {
   const rules = rscConfig.module.rules;
   rules.forEach((rule) => {
     if (Array.isArray(rule.use)) {
-      // Ensure this loader runs before the JS loader (Babel loader in this case) to properly exclude client components from the RSC bundle.  
+      // Ensure this loader runs before the JS loader (Babel loader in this case) to properly exclude client components from the RSC bundle.
       // If your project uses a different JS loader, insert it before that loader instead.
       const babelLoader = extractLoader(rule, 'babel-loader');
       if (babelLoader) {
@@ -240,13 +240,13 @@ async function ReactServerComponent() {
     uptime: Math.floor(os.uptime() / 3600), // Convert to hours
     totalMemory: Math.floor(os.totalmem() / (1024 * 1024 * 1024)), // Convert to GB
     freeMemory: Math.floor(os.freemem() / (1024 * 1024 * 1024)), // Convert to GB
-    cpus: os.cpus().length
+    cpus: os.cpus().length,
   };
 
   return (
     <div className="server-component-demo">
       <h2>React Server Component Demo</h2>
-      
+
       <section>
         <h3>Date Calculations (using moment.js)</h3>
         <p>Date Range: {formattedDateRange}</p>
@@ -277,16 +277,17 @@ async function ReactServerComponent() {
       </section>
 
       <div className="note">
-        <p><strong>Note:</strong> The heavy libraries (moment.js, lodash) and Node.js 
-        modules (os) used in this component stay on the server and are not shipped 
-        to the client, reducing the client bundle size significantly.</p>
+        <p>
+          <strong>Note:</strong> The heavy libraries (moment.js, lodash) and Node.js modules (os) used in this
+          component stay on the server and are not shipped to the client, reducing the client bundle size
+          significantly.
+        </p>
       </div>
     </div>
   );
 }
 
 export default ReactServerComponent;
-
 ```
 
 ## Create a React Server Component Page
@@ -318,7 +319,7 @@ If you didn't enable `auto_load_bundle`, you need to register the React Server C
 
 ```js
 // client/app/packs/server-bundle.js
-import registerServerComponent from 'react-on-rails/registerServerComponent/server';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/server';
 import ReactServerComponentPage from './components/ReactServerComponentPage';
 
 registerServerComponent({
@@ -328,22 +329,22 @@ registerServerComponent({
 
 ```js
 // client/app/packs/client-bundle.js
-import registerServerComponent from 'react-on-rails/registerServerComponent/client';
+import registerServerComponent from 'react-on-rails-pro/registerServerComponent/client';
 
-registerServerComponent(
-  { rscPayloadGenerationUrlPath: 'rsc_payload/' },
-  'ReactServerComponentPage',
-);
+registerServerComponent({ rscPayloadGenerationUrlPath: 'rsc_payload/' }, 'ReactServerComponentPage');
 ```
 
 As you can see, server components are not registered using the `ReactOnRails.register` function. Instead, we use the `registerServerComponent` function to register the server component. Also, `registerServerComponent` has different options for the client bundle and the server bundle.
+
 - For the server bundle, the component itself is passed to the `registerServerComponent` function, so the component is bundled into the server bundle.
 - For the client bundle, we pass the component name as an argument to the `registerServerComponent` function, so the component is not bundled into the client bundle.
 
 As you can see at [How React Server Components work](how-react-server-components-work.md):
+
 - Server components are rendered on the client using the rsc payload not the component itself.
 
 And as you can see at [React Server Components Rendering Flow](./rendering-flow.md):
+
 - In the future, the server bundle will use the RSC payload to render the server component on the server side as well.
 
 The `rscPayloadGenerationUrlPath` option will be explained in detail later in this document. For now, just know that it specifies the base URL path for React Server Component requests.
@@ -361,7 +362,6 @@ end
 
 This will add the `/rsc_payload` path to the routes. This is the base URL path that will receive requests from the client to render the React Server Components. `rsc_payload_route` is explained in the [How React Server Components work](how-react-server-components-work.md) document.
 
-
 ## Add Route to the React Server Component Page
 
 Add the following route to the `config/routes.rb` file:
@@ -380,7 +380,7 @@ This route will be used to render the React Server Component Page.
 Create a new file `app/views/pages/react_server_component_without_ssr.html.erb`:
 
 ```erb
-<%= react_component("ReactServerComponentPage", 
+<%= react_component("ReactServerComponentPage",
     prerender: false,
     trace: true,
     id: "ReactServerComponentPage-react-component-0") %>
@@ -417,6 +417,7 @@ Also, by looking at the console, we can see the log
 ```
 [SERVER] Hello from ReactServerComponent
 ```
+
 The `[SERVER]` prefix indicates that the component was executed on the server side. The absence of any client-side logs confirms that no client-side rendering or hydration occurred. This demonstrates a key characteristic of React Server Components - they run exclusively on the server without requiring any JavaScript execution in the browser, leading to improved performance and reduced client-side bundle sizes.
 
 ## How the React Server Component Page is Rendered on Browser?
@@ -445,4 +446,3 @@ The RSC payload format and how React processes it is explained in detail in the
 ## Next Steps
 
 Now that you understand the basics of React Server Components, you can proceed to the next article: [Add Streaming and Interactivity to RSC Page](./add-streaming-and-interactivity.md) to learn how to enhance your RSC page with streaming capabilities and client-side interactivity.
-

data/docs/react-server-components/glossary.md

@@ -1,7 +1,9 @@
 # React Server Components Glossary
 
 ### RSC (React Server Component)
+
 A React architecture that allows components to execute exclusively on the server while streaming results to the client. Benefits include:
+
 - Reduced client-side JavaScript
 - Direct access to server resources
 - Improved initial page load
@@ -10,18 +12,21 @@ A React architecture that allows components to execute exclusively on the server
 ## Types of Components
 
 ### Server Components
+
 Components that run exclusively on the server (not included in the client bundle). They can:
+
 - Directly access server-side resources (databases, filesystems)
 - Keep dependencies server-side
 - Perform async operations
 - Cannot contain state or browser-only APIs
 
 For example:
+
 ```jsx
-import fetch from "node-fetch";
+import fetch from 'node-fetch';
 
 async function ServerComponent() {
-  const data = await (await fetch("https://jsonplaceholder.org/posts/1")).json();
+  const data = await (await fetch('https://jsonplaceholder.org/posts/1')).json();
   const databaseData = await getDatabaseData();
   return (
     <div>
@@ -33,11 +38,12 @@ async function ServerComponent() {
 }
 ```
 
-
 ### Client Components
+
 Components marked with `'use client'` directive that run on client. They can contain state, effects, and event handlers. These components get hydrated in the browser.
 
 For example:
+
 ```jsx
 function ClientComponent() {
   const [count, setCount] = useState(0);
@@ -53,6 +59,7 @@ function ClientComponent() {
 Note: Server components can import client components, but client components cannot import server components. However, server components can be passed as props to client components.
 
 For example:
+
 ```jsx
 function ParentServerComponent() {
   return <ClientComponent serverComponent={<ServerComponent />} />;
@@ -62,33 +69,43 @@ function ParentServerComponent() {
 ## Bundle Related
 
 ### React Server Components Bundle (RSC Bundle) (usually `rsc-bundle.js`)
+
 A new server-side bundle introduced by React Server Components. It contains server components and their dependencies only. It doesn't include client components. It should be the same as the `server_bundle.js` bundle. But it uses the `react-on-rails-rsc/WebpackLoader` loader to trim the client components from the bundle.
 
 ### Client Bundle
+
 The JavaScript bundle that runs in the browser, containing client components and their dependencies. This bundle is responsible for hydration and client-side interactivity.
 
 ## Concepts
 
 ### Flight Format (RSC Format)
+
 The wire format used by React Server Components to stream component data from server to client. It's a compact binary format that represents the component tree and its data.
 
 ### Hydration
+
 The process where React attaches event handlers and state to server-rendered HTML in the browser. With RSC, hydration happens selectively only for Client Components.
 
 ### RSC Payload (Flight Payload)
+
 The serialized output of server components that gets streamed to the client. Contains:
+
 - React render tree of the server component
 - References to client components that need hydration
 - Data for client components
 
 ### Selective Hydration
+
 A feature where client components can hydrate independently and in parallel, allowing for:
+
 - Progressive interactivity
 - Prioritized hydration of visible components
 - Better performance on slower devices
 
 ### Streaming
+
 The ability to progressively send server component renders to the client before all data is ready. Benefits include:
+
 - Faster Time to First Byte (TTFB)
 - Progressive rendering of content
 - Better user experience during slow data fetches
@@ -96,7 +113,9 @@ The ability to progressively send server component renders to the client before
 ## Technical
 
 ### Client Component Manifest
+
 A JSON file mapping component paths to their corresponding JavaScript chunks. Used by RSC to determine which client-side code to load for hydration.
 
 ### RSC URL Path
+
 The endpoint path where RSC requests are handled, defaulting to "rsc_payload/" in the React on Rails Pro configuration.