Create React Server Component without SSR

yarn add [email protected] [email protected]
bundle add [email protected] [email protected]

yarn add [email protected] [email protected] [email protected]

# config/initializers/react_on_rails_pro.rb

ReactOnRailsPro.configure do |config|
  config.enable_rsc_support = true
end

// app/javascript/client/app/ror-auto-load-components/HomePage.jsx
'use client';

// ... existing code ...

// use the same config as serverWebpackConfig.js but add the RSC loader
const serverWebpackConfig = require('./serverWebpackConfig');

// Function that extracts a specific loader from a webpack rule
function extractLoader(rule, loaderName) {
  return rule.use.find((item) => {
    let testValue;

    if (typeof item === 'string') {
      testValue = item;
    } else if (typeof item.loader === 'string') {
      testValue = item.loader;
    }

    return testValue.includes(loaderName);
  });
}

const configureRsc = () => {
  const rscConfig = serverWebpackConfig();

  // Update the entry name to be `rsc-bundle` instead of `server-bundle`
  const rscEntry = {
    'rsc-bundle': rscConfig.entry['server-bundle'],
  };
  rscConfig.entry = rscEntry;

  // Add the RSC loader before the babel loader
  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.  
      // If your project uses a different JS loader, insert it before that loader instead.
      const babelLoader = extractLoader(rule, 'babel-loader');
      if (babelLoader) {
        rule.use.push({
          loader: 'react-on-rails-rsc/WebpackLoader',
        });
      }
    }
  });

  // Add the `react-server` condition to the resolve config
  // This condition is used by React and React on Rails to know that this bundle is a React Server Component bundle
  // The `...` tells webpack to retain the default Webpack conditions (In this case will keep the `node` condition because the bundle targets node)
  rscConfig.resolve = {
    ...rscConfig.resolve,
    conditionNames: ['react-server', '...'],
  };

  // Update the output bundle name to be `rsc-bundle.js` instead of `server-bundle.js`
  rscConfig.output.filename = 'rsc-bundle.js';
  return rscConfig;
};

module.exports = configureRsc;

// config/webpack/ServerClientOrBoth.js
const rscWebpackConfig = require('./rscWebpackConfig');
// existing code...

const webpackConfig = (envSpecific) => {
  const rscConfig = rscWebpackConfig();
  // existing code...
  } else if (process.env.RSC_BUNDLE_ONLY) {
    // eslint-disable-next-line no-console
    console.log('[React on Rails] Creating only the RSC bundle.');
    result = rscConfig;
  } else {
    // default is the standard client and server build
    // eslint-disable-next-line no-console
    console.log('[React on Rails] Creating both client and server bundles.');
    result = [clientConfig, serverConfig, rscConfig];
  }

  return result;
};

# Procfile.dev
# existing code...

rails-rsc-assets: HMR=true RSC_BUNDLE_ONLY=yes bin/shakapacker --watch

# config/initializers/react_on_rails.rb
ReactOnRailsPro.configure do |config|
  config.rsc_bundle_js_file = "rsc-bundle.js"
end

// config/webpack/clientWebpackConfig.js
const { RSCWebpackPlugin } = require('react-on-rails-rsc/WebpackPlugin');
// existing code...

const configureClient = () => {
  // existing code...

  config.plugins.push(new RSCWebpackPlugin({ isServer: false }));

  return config;
};

module.exports = configureClient;

// config/webpack/serverWebpackConfig.js
const { RSCWebpackPlugin } = require('react-on-rails-rsc/WebpackPlugin');
// existing code...

const configureServer = () => {
  // existing code...

  config.plugins.push(new RSCWebpackPlugin({ isServer: true }));

  return config;
};

module.exports = configureServer;

// app/javascript/components/ReactServerComponent.js
import React from 'react';

// Heavy libraries that won't be sent to the client
import moment from 'moment';
import lodash from 'lodash';

// Server components can use Node.js modules, access the server files, make database queries, etc.
import os from 'os';

// This async component demonstrates server-side functionality
async function ReactServerComponent() {
  console.log('Hello from ReactServerComponent');

  // Using moment.js for complex date calculations
  const now = moment();
  const nextWeek = moment().add(7, 'days');
  const formattedDateRange = `${now.format('MMMM Do YYYY')} to ${nextWeek.format('MMMM Do YYYY')}`;

  // Using lodash for data manipulation
  const sampleArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const chunks = lodash.chunk(sampleArray, 3);

  // Getting system information using Node's os module
  const serverInfo = {
    platform: os.platform(),
    type: os.type(),
    release: os.release(),
    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
  };

  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>
      </section>

      <section>
        <h3>Array Manipulation (using lodash)</h3>
        <div>
          {chunks.map((chunk, index) => (
            <div key={index}>
              Chunk {index + 1}: {chunk.join(', ')}
            </div>
          ))}
        </div>
      </section>

      <section>
        <h3>Server System Information (using Node.js os module)</h3>
        <ul>
          <li>Platform: {serverInfo.platform}</li>
          <li>OS Type: {serverInfo.type}</li>
          <li>OS Release: {serverInfo.release}</li>
          <li>Server Uptime: {serverInfo.uptime} hours</li>
          <li>Total Memory: {serverInfo.totalMemory} GB</li>
          <li>Free Memory: {serverInfo.freeMemory} GB</li>
          <li>CPU Cores: {serverInfo.cpus}</li>
        </ul>
      </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>
      </div>
    </div>
  );
}

export default ReactServerComponent;

// app/javascript/packs/components/ReactServerComponentPage.jsx

import React from 'react';
import ReactServerComponent from '../../components/ReactServerComponent';

const ReactServerComponentPage = () => {
  return (
    <div>
      <ReactServerComponent />
    </div>
  );
};

export default ReactServerComponentPage;

// client/app/packs/server-bundle.js
import registerServerComponent from 'react-on-rails/registerServerComponent/server';
import ReactServerComponentPage from './components/ReactServerComponentPage';

registerServerComponent({
  ReactServerComponentPage,
});

// client/app/packs/client-bundle.js
import registerServerComponent from 'react-on-rails/registerServerComponent/client';

registerServerComponent(
  { rscPayloadGenerationUrlPath: 'rsc_payload/' },
  'ReactServerComponentPage',
);

# config/routes.rb
Rails.application.routes.draw do
  rsc_payload_route
end

# config/routes.rb
Rails.application.routes.draw do
  get "react_server_component_without_ssr", to: "pages#react_server_component_without_ssr"
end

<%= react_component("ReactServerComponentPage", 
    prerender: false,
    trace: true,
    id: "ReactServerComponentPage-react-component-0") %>

<h1>React Server Component without SSR</h1>

bin/dev

http://localhost:3000/react_server_component_without_ssr

[SERVER] Hello from ReactServerComponent