React Server-Side Rendering without Next.js
Tags: react, webdev, javascript, tutorial
Published: 2023-12-11 14:04:57

**GitHub Repo:** [https://github.com/webcrumbs-community/webcrumbs](https://github.com/webcrumbs-community/webcrumbs)

We have been running a series of experiments for WebCrumbs where we explore Server-Side Rendering (SSR) of React Components.

Turns out it is not that hard.

All you'll need is a bit of `express` with `ReactDOMServer.renderToString` and `ReactDOM.hydrate` with `Webpack`, to keep it simple.

Here's an example. It can get more complicated, sure, but you'll get the idea.

---

## Support us! 🙏⭐️
By the way, I'm part of the WebCrumbs team, and it would mean a lot if you could check out our no-code solution for Node.js that simplifies web development. [Giving us a star](https://github.com/webcrumbs-community/webcrumbs) would be fantastic.

We're putting in a ton of effort to help devs take their ideas to a live website as quickly and easily as possible (think: effortless plugin and theme integration), and every bit of support is truly appreciated!

{% cta https://github.com/webcrumbs-community/webcrumbs %}⭐️ Give WebCrumbs a Star! ⭐️ {% endcta %}

Ok. Now, let's dive back into the practicalities of using React Server-Side rendering without Next.js.

---

# 🫵 Okay. Cut to the chase. How do I do it?

To create a simple React Server-Side Rendering (SSR) application with client-side hydration, you'll need to follow several steps. 

This involves setting up a Node.js server with Express, creating a React component, rendering it server-side, and then hydrating it on the client-side. 

Here's a step-by-step guide:

## Step 1: Set Up Your Project

**Create a New Directory:** Create a new directory for your project and navigate into it.

```bash
mkdir react-ssr-demo
cd react-ssr-demo
```

**Initialize npm:** Initialize a new npm project.

```bash
npm init -y
```

**Install Dependencies:** Install Express and React-related packages.

```bash
npm install express react react-dom
```

## Step 2: Create the Server

**Write the Server Code:** Create a file `server.js` and write the following code:

```javascript
const express = require('express');
const ReactDOMServer = require('react-dom/server');
const React = require('react');
const SampleComponent = require('./SampleComponent'); // Replace with your component

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    const componentStr = ReactDOMServer.renderToString(React.createElement(SampleComponent));

    res.send(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>React SSR with Client-Side Hydration</title>
    </head>
    <body>
      <div id="root">${componentStr}</div>
      <script src="/bundled-client.js"></script>
    </body>
    </html>
  `);
});

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}/`);
});
```

Here's the explanation of the code above:

* Loads Express, React, ReactDOMServer.
* Defines a basic React component for rendering.
* Initializes an Express server.
* Creates a route to handle HTTP GET requests to the root ('/') URL.
* Converts the React component into an HTML string using ReactDOMServer.
* Includes a script in the HTML for hydrating the server-rendered component on the client side.
* Listens for requests on port 3000 and logs a startup message.

## Step 3: Configure Webpack for Client-Side Code

**Create Webpack Configuration:** Create a webpack.config.js file in your project root.

```javascript
const path = require('path');

module.exports = {
  entry: './client.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundled-client.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};
```

**Create hydration logic:** In your project, create a new file named `client.js`:

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import SampleComponent from './SampleComponent'; // Replace with your component

ReactDOM.hydrate(
  <SampleComponent />,
  document.getElementById('root')
);
```

**Compile with Webpack:** Create the `bundled-client.js` by running this command:

```bash
npx webpack --mode production
```

## Step 4: Running the Server

**Start the Server:** Run your server using Node.

```bash
node server.js
```

**Open Your Browser:** Go to `http://localhost:3000` to see your server-rendered React component.

# 🫵 Alright! Is that it?

This guide is for educational purposes and demonstrates the basic concepts of SSR with React and hydration. For complex applications, a more sophisticated setup is recommended.

{% cta https://github.com/webcrumbs-community/webcrumbs %}We're using SSR in WebCrumbs!{% endcta %}

{% embed https://dev.to/opensourcee/what-is-webcrumbs-m58 %}


---

Follow me for more! 
I usually write about JavaScript, WebDev and [Webcrumbs](https://github.com/webcrumbs-community/webcrumbs) ❤️.

{% embed https://dev.to/opensourcee %}