Branding for Single Page Applications (SPA), i.e., React

Server-side rendering in React is a useful tool for building dynamic web applications. It helps developers create responsive and efficient user interfaces without depending too much on JavaScript running on the user's device.

When the given branding URL is a single-page application (utilizing frameworks such as React), Hushly may encounter difficulty in rendering content as it reads data on the server side. In such cases, the HTML may not be rendered, and the element that you intended to render will remain invisible to Hushly.

To address this issue, Hushly suggests adopting Server Side Rendering for the branding URL. This approach ensures that the HTML, rather than the JavaScript code, is rendered for the branding page, facilitating proper functionality.

Prerequisites

   - Node.js installed locally. Click here to learn how to install Node.js

Step 1 - Creating React App:

   - Use `npx create-react-app react-ssr-example` to start a new React app.

   - Navigate to the app directory (`cd react-ssr-example`).

   - Start the client-side app with `npm start`.

Step 2 - Modifying App Component:

   - Create a new `<Home>` component in the `src` directory.

   - Update the `<App>` component in the `App.js` file to pass a name to `<Home>`.

   - Use `ReactDOM.hydrate` in the `index.js` file to indicate rehydration after server-side render.

Step 3 - Creating Express Server:

   - Create a new `server` directory.

   - In the server directory, create an `index.js` file with Express server code.

   - The server renders the React app using `ReactDOMServer.renderToString`.

   - Static content is injected into the HTML response.

Step 4 - Configuring webpack, Babel, and npm Scripts:

   - Create a `.babelrc.json` file with preset configurations.

   - Create a `webpack.server.js` file for server configuration.

   - Add npm scripts for building and starting the server.

Running the Project:

   - Use `npm run dev` to build the client-side app, bundle and transpile the server code, and start the server.

   - Open `http://localhost:3006/` in the browser to view the server-side rendered app.

For a deeper understanding of the process, please refer to the following sources:

A Comprehensive Guide to Server-Side Rendering in React

How to Enable Server-Side Rendering for a React App

Related Topics:
How to use a Branding URL in a Hub
Centralized Branding for Hushly V3 Hubs