Integration of React Components with Server Side Rendering

This guide walks you through setting up Syncfusion React components with server-side rendering (SSR) using Express.js.

What is SSR?

Server-Side Rendering (SSR) is a technique where a React application is rendered on the server instead of in the browser, allowing the server to generate and send fully rendered HTML to the client. This results in a faster initial page load, as users see meaningful content immediately without waiting for JavaScript to execute. It also improves SEO, since search engines can crawl the complete HTML content, enhances user experience on slower networks by reducing perceived loading time.

SSR works by processing the React components on the server using tools like ReactDOMServer, generating HTML, and sending it to the browser, where React then hydrates the content to make it interactive.

Prerequisites

System requirements for Syncfusion^® React UI components

Set up the React project

To get started with SSR and Syncfusion^® React components, set up a basic React application using Create React App.

npx create-react-app my-syncfusion-ssr-app
cd my-syncfusion-ssr-app

npx create-react-app my-syncfusion-ssr-app
cd my-syncfusion-ssr-app

Add Syncfusion^® React packages

To add the React Toolbar component, install the @syncfusion/react-navigations package by running the following command:

npm install @syncfusion/react-navigations --save

npm install @syncfusion/react-navigations --save

Install SSR dependencies

For server-side rendering functionality with Express, install additional packages. Run the following command to install all the required dependencies:

npm install @babel/register @babel/preset-env @babel/preset-react express ignore-styles --save

npm install @babel/register @babel/preset-env @babel/preset-react express ignore-styles --save

Configure server

First, create a server directory in the project root and add a file named root.js inside it. This file will serve as the entry point for the SSR process.

require('ignore-styles');

require('@babel/register')({
  ignore: [/node_modules\/(?!@syncfusion)/],
  presets: ['@babel/preset-env', '@babel/preset-react'],
});

require('./server');

require('ignore-styles');

require('@babel/register')({
  ignore: [/node_modules\/(?!@syncfusion)/],
  presets: ['@babel/preset-env', '@babel/preset-react'],
});

require('./server');

Next, create a file named server.js inside the server directory. This server component is responsible for rendering the React application on the server and delivering it to the client. Configure it as follows:

const express = require('express');
const fs = require('fs');
const path = require('path')
const React = require('react');
const { renderToPipeableStream } = require('react-dom/server');
const App = require('../src/App').default;
const PORT = 4000;
const app = express();

app.use('^/$', (request, response) => {
  const filePath = path.resolve('./build/index.html');
  
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
      console.error(err);
      return response.status(500).send('There was an error');
    }

    const [beforeRoot, afterRoot] = data.split('<div id="root"></div>');
    
    response.write(beforeRoot);
    response.write('<div id="root">');
    
    const { pipe } = renderToPipeableStream(<App />, {
      bootstrapScripts: ['/static/js/main.js'],
      onShellReady() {
        pipe(response);
      },
      onAllReady() {
        response.write('</div>');
        response.write(afterRoot);
        response.end();
      },
      onError(error) {
        console.error(error);
        response.statusCode = 500;
        response.end('Internal Server Error');
      }
    });
  });
});

app.use(express.static(path.resolve(__dirname, '..', 'build')));

app.listen(PORT, () => {
  console.log('App works on Port: 4000');
});

const express = require('express');
const fs = require('fs');
const path = require('path')
const React = require('react');
const { renderToPipeableStream } = require('react-dom/server');
const App = require('../src/App').default;
const PORT = 4000;
const app = express();

app.use('^/$', (request, response) => {
  const filePath = path.resolve('./build/index.html');
  
  fs.readFile(filePath, 'utf-8', (err, data) => {
    if (err) {
      console.error(err);
      return response.status(500).send('There was an error');
    }

    const [beforeRoot, afterRoot] = data.split('<div id="root"></div>');
    
    response.write(beforeRoot);
    response.write('<div id="root">');
    
    const { pipe } = renderToPipeableStream(<App />, {
      bootstrapScripts: ['/static/js/main.js'],
      onShellReady() {
        pipe(response);
      },
      onAllReady() {
        response.write('</div>');
        response.write(afterRoot);
        response.end();
      },
      onError(error) {
        console.error(error);
        response.statusCode = 500;
        response.end('Internal Server Error');
      }
    });
  });
});

app.use(express.static(path.resolve(__dirname, '..', 'build')));

app.listen(PORT, () => {
  console.log('App works on Port: 4000');
});

Configure client

The client-side React application needs to be structured to work correctly with SSR:

Now, let's update the client entry point file src/index.js. This file will hydrate the React application on the client side after the initial server-side render:

import React from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
  hydrateRoot(rootElement, 
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  const root = createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

reportWebVitals();

import React from 'react';
import { hydrateRoot, createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
  hydrateRoot(rootElement, 
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  const root = createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

reportWebVitals();

Update src/App.js file that will contains Syncfusion^® React component. This component will be rendered both on the server and client sides:

import React from 'react';
import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';
import { MenuIcon } from '@syncfusion/react-icons';
import { Button, Color, Variant } from '@syncfusion/react-buttons';

import '@syncfusion/react-base/styles/material.css';
import '@syncfusion/react-buttons/styles/material.css';
import '@syncfusion/react-navigations/styles/material.css';
export default function App() {
  return (
    <div style={{ width: '490px', margin: '0 auto' }}>
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

import React from 'react';
import { Toolbar, ToolbarItem, ToolbarSpacer } from '@syncfusion/react-navigations';
import { MenuIcon } from '@syncfusion/react-icons';
import { Button, Color, Variant } from '@syncfusion/react-buttons';

import '@syncfusion/react-base/styles/material.css';
import '@syncfusion/react-buttons/styles/material.css';
import '@syncfusion/react-navigations/styles/material.css';
export default function App() {
  return (
    <div style={{ width: '490px', margin: '0 auto' }}>
      <Toolbar aria-label="Navigation header">
        <ToolbarItem>
          <Button variant={Variant.Standard} icon={<MenuIcon />} />
        </ToolbarItem>
        <ToolbarSpacer />
        <ToolbarItem>
          <Button variant={Variant.Standard}>Projects</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button variant={Variant.Standard}>Reports</Button>
        </ToolbarItem>
        <ToolbarItem>
          <Button title='Free Trial' color={Color.Primary} variant={Variant.Filled}>Free Trial</Button>
        </ToolbarItem>
      </Toolbar>
    </div>
  );
}

Run the project

Before running the project, update the package.json to include the server script for running the SSR implementation.

Add the following script to the package.json file:

{
  "scripts": {
    "serve": "node server/root.js"
  }
}

{
  "scripts": {
    "serve": "node server/root.js"
  }
}

First, build the production version of the React application:

npm run build

npm run build

After building the application, start the Express server that handles SSR:

npm run serve

npm run serve

The output will appear as follows: