How To SSR Any React App In 7 Minutes (Server Side Rendering Made Easy)

How to Convert a React Application to a Server-Side React App in 7 Minutes

Step 1: Setting Up the Environment

1. Visit the provided GitHub page to access the source code for the project.
2. Copy the project's URL.
3. Open a new instance of Visual Studio Code (VS Code).
4. Navigate to the desktop and clone the project using the command git clone <project URL>.
5. Open the project in VS Code by typing code . in the terminal.

Step 2: Initializing the Server-Side React Application

1. Close any previous VS Code windows.
2. Right-click on the project folder and select "Open in a new VS Code window."
3. Run the command npx create-react-app <project name> --template with-plugin-ssr in the terminal to initialize a server-side rendered React application.
4. Follow the instructions to set up the project.

Step 3: Transferring Files

1. Copy the components folder from the old project to the new one.
2. Paste the components folder at the root of the new project.

Step 4: Updating Files

1. Move index.css and data.js to the pages/index folder in the new project.
2. Rename app.js to app.jsx and remove unnecessary code like the counter.
3. Update index.page.js by replacing the content with import app from './app'.

Step 5: Modifying Page Shell

1. Open page-shell.jsx and replace the content with children to remove unnecessary functions.
2. Update the paths to components in the root folder of the project.

Step 6: Renaming Extensions

1. Rename the extensions of components in the components folder to .jsx.
2. Run npm run dev in the terminal of the project folder.
3. Open the provided address to view the server-side rendered React application.

Step 7: Verifying Server-Side Rendering

1. Right-click on the rendered page and select "View Page Source."
2. Verify that the list of products exists in the HTML source, indicating successful server-side rendering.
3. Compare this with the client-side rendered version to see the difference in rendering.

By following these steps, you can easily convert any React application into a server-side rendered React app, improving performance and SEO capabilities.