react_on_rails_pro 16.2.0.beta.20 → 16.2.0.rc.0

data/docs/contributors-info/style.md

@@ -1,33 +1,41 @@
 # Code Style
+
 This document describes the coding style of [ShakaCode](http://www.shakacode.com). Yes, it's opinionated, as all style guidelines should be. We shall put as little as possible into this guide and instead rely on:
 
-* Use of linters with our standard linter configuration.
-* References to existing style guidelines that support the linter configuration.
-* Anything additional goes next.
+- Use of linters with our standard linter configuration.
+- References to existing style guidelines that support the linter configuration.
+- Anything additional goes next.
 
 ## Client Side JavaScript and React
-* See the [Shakacode JavaScript Style Guide](https://github.com/shakacode/style-guide-javascript)
+
+- See the [Shakacode JavaScript Style Guide](https://github.com/shakacode/style-guide-javascript)
 
 ## Style Guides to Follow
+
 Follow these style guidelines per the linter configuration. Basically, lint your code and if you have questions about the suggested fixes, look here:
 
 ### Ruby Coding Standards
-* [ShakaCode Ruby Coding Standards](https://github.com/shakacode/style-guide-ruby)
-* [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
+
+- [ShakaCode Ruby Coding Standards](https://github.com/shakacode/style-guide-ruby)
+- [Ruby Documentation](http://guides.rubyonrails.org/api_documentation_guidelines.html)
 
 ### JavaScript Coding Standards
-* [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
-* Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
-* [JSDoc](http://usejsdoc.org/)
+
+- [ShakaCode Javascript](https://github.com/shakacode/style-guide-javascript)
+- Use the [eslint-config-shakacode](https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode) npm package with eslint.
+- [JSDoc](http://usejsdoc.org/)
 
 ### Git coding Standards
-* [Git Coding Standards](http://chlg.co/1GV2m9p)
+
+- [Git Coding Standards](http://chlg.co/1GV2m9p)
 
 ### Sass Coding Standards
-* [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
-* [Github Front End Guidelines](http://primercss.io/guidelines/)
+
+- [Sass Guidelines](http://sass-guidelin.es/) by [Hugo Giraudel](http://hugogiraudel.com/)
+- [GitHub Front End Guidelines](http://primercss.io/guidelines/)
 
 # Git Usage
-* Follow a github-flow model where you branch off of master for features.
-* Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
-* Run hosted CI and code coverage.
+
+- Follow a github-flow model where you branch off of master for features.
+- Before merging a branch to master, rebase it on top of master, by using command like `git fetch; git checkout my-branch; git rebase -i origin/master`. Clean up your commit message at this point. Be super careful to communicate with anybody else working on this branch and do not do this when others have uncommitted changes. Ideally, your merge of your feature back to master should be one nice commit.
+- Run hosted CI and code coverage.

data/docs/home-pro.md

@@ -3,67 +3,77 @@
 Node rendering and caching performance enhancements for [React on Rails](https://github.com/shakacode/react_on_rails). Now supports React 18 with updates to React on Rails! Check the [React on Rails CHANGELOG.md](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md) for details and the updates to the [loadable-components instructions](https://github.com/shakacode/react_on_rails_pro/blob/master/docs/code-splitting-loadable-components.md).
 
 ## Getting Started
+
 The best way to see how React on Rails Pro works is to install this repo locally and take a look at
 the example application:
 
-[spec/dummy](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/README.md)
+[spec/dummy](https://github.com/shakacode/react_on_rails/blob/master/react_on_rails/spec/dummy/README.md)
+
 1. Uses a @rails/webpacker standard configuration.
 1. Has pages that demonstrate:
    1. caching
    2. loadable-components
-1. Has all the basic react_on_rails specs that run against the Node Renderer 
+1. Has all the basic react_on_rails specs that run against the Node Renderer
 1. Demonstrates using HMR and loadable-components with almost the same example that is present in [loadable-components for SSR](https://github.com/gregberge/loadable-components/tree/main/examples/server-side-rendering)
-   
+
 See the README.md in those sample apps for more details.
 
 ## Features
 
 ### 🚀 Next-Gen Server Rendering: Streaming with React 18's Latest APIs
+
 React on Rails Pro supports React 18's Streaming Server-Side Rendering, allowing you to progressively render and stream HTML content to the client. This enables faster page loads and better user experience.
 
 See [docs/streaming-server-rendering](./streaming-server-rendering.md) for more details.
 
 ### Caching
+
 Caching of SSR is critical for achieving optimum performance.
 
-* **Fragment Caching**: for `react_component` and `react_component_hash`, including lazy evaluation of props.
-* **Prerender Caching**: Server rendering JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods.
+- **Fragment Caching**: for `react_component` and `react_component_hash`, including lazy evaluation of props.
+- **Prerender Caching**: Server rendering JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods.
 
 See [docs/caching](./caching.md) for more details.
 
 ### Clearing of Global State
+
 Suppose you detect that some library used in server-rendering is leaking state between calls to server render. In that case, you can set the `config.ssr_pre_hook_js` in your `config/initializers/react_on_rails_pro.rb` to run some JavaScript to clear the globally leaked state at the beginning of each call to server render.
 
-For more details, see [Rails Configuration](https://github.com/shakacode/react_on_rails/blob/master/docs/configuration.md).
+For more details, see [Rails Configuration](https://github.com/shakacode/react_on_rails/blob/master/docs/configuration/configuration.md).
 
 ### React On Rails Pro Node Renderer
+
 The "React on Rails Pro Node Renderer" provides more efficient server rendering on a standalone Node JS server.
 See the [Node Renderer Docs](./node-renderer/basics.md).
 
 ### Bundle Caching
+
 Don't wait for the same webpack bundles to be built over and over. See the [bundle-caching docs](./bundle-caching.md).
 
 ## Other Utility Methods
+
 See the [Ruby API](./ruby-api.md).
 
 ## References
 
-* [Installation](./installation.md)
-* [Streaming Server Rendering](./streaming-server-rendering.md)
-* [Caching](./caching.md)
-* [Rails Configuration](./configuration.md)
-* [Node Renderer Docs](./node-renderer/basics.md)
+- [Installation](./installation.md)
+- [Streaming Server Rendering](./streaming-server-rendering.md)
+- [Caching](./caching.md)
+- [Rails Configuration](./configuration.md)
+- [Node Renderer Docs](./node-renderer/basics.md)
 
 # Features
+
 ## Code Splitting
 
 From [The Cost of JavaScript in 2018](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4):
 
 > To stay fast, only load JavaScript needed for the current page. Prioritize what a user will need and lazy-load the rest with code-splitting. This gives you the best chance at loading and getting interactive fast. Stacks with route-based code-splitting by default are game-changers.
 
-
 ## Caching
+
 ### Server Rendering
+
 Server rendering of JavaScript evaluation is cached if `prerender_caching` is turned on in your Rails config. This applies to all JavaScript evaluation methods, including ExecJS and the Node VM Renderer.
 
 ### Pro: Fragment Caching
@@ -90,24 +100,31 @@ Note, even without server rendering (without step 3 above), fragment caching is
 See [Caching](./caching.md) for more additional details.
 
 ## React On Rails Pro Node React Render
+
 The "React on Rails Pro Node React Renderer" provides more efficient React Server Side Rendering on a standalone Node JS server.
 
 ### Overall Management Memory and CPU on both the Rendering and Ruby Servers
+
 A separate Node rendering server is easier to manage in terms of monitoring memory and CPU performance, allocating dynos, etc. This also makes it easier to manage the ruby servers, as you no longer have to consider the impact of starting an embedded V8. Thus, you can never hang your Ruby servers due to JavaScript memory leaks.
 
 ### Proper Node Tooling
+
 A disadvantage of Ruby embedded JavaScript (ExecJS) is that it precludes the use of standard Node tooling for doing things like profiling and tracking down memory leaks. With the renderer on a separate Node.js server, we were able to use node-memwatch (https://github.com/marcominetti/node-memwatch) to find few memory leaks in the Egghead React code.
 
 ### Caching of React Rendering
+
 To limit the load on the renderer server or embedded ExecJS, caching of React rendering requests can be enabled by a config setting. Because current React rendering requests are idempotent (same value regardless of calls), caching should be feasible for all server rendering calls. The current renderer does not allow any asynchronous calls to fetch data. The rendering request includes all data for rendering.
 
 ### Rolling Restart of Node Workers
+
 Due to poor performance and crashes due to memory leaks, the rolling restart of node workers was thus added as an option to the core rendering product. This option is cheap insurance against the renderer getting too slow from a memory leak due to a bug in some newly deployed JavaScript code.
 
 ### Docs
+
 See the [Node React Render Docs](./node-renderer/basics.md).
 
 ## Other Utility Methods
+
 See the [Ruby API](./ruby-api.md).
 
 # Testimonials
@@ -121,9 +138,10 @@ For details, see [Egghead React on Rails Pro Deployment Highlights](https://gith
 
 ## Why should I use React on Rails Pro if ExecJS seems to work?
 
-Caching is extremely useful to any server rendering you're doing, with or without ExecJS. 
+Caching is extremely useful to any server rendering you're doing, with or without ExecJS.
 
 React on Rails pro support caching at 2 levels:
+
 1. Caching of rendering request to ExecJS (or the Node renderer). This avoids extra calls to ExecJS.
 2. Fragment caching of server rendering. This avoids even the calculations of prop values from the database and the cost of converting the props to a string (lots of CPU there)
 
@@ -142,5 +160,5 @@ For more info, email [justin@shakacode.com](mailto:justin@shakacode.com).
 
 # References
 
-* [Caching](./caching.md)
-* [Rails Configuration](./configuration.md)
+- [Caching](./caching.md)
+- [Rails Configuration](./configuration.md)

data/docs/installation.md

@@ -72,9 +72,58 @@ ReactOnRailsPro.configure do |config|
 end
 ```
 
-# Node Package Installation
+# Client Package 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.
+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 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.