Give me just 5 minutes and I will teach you to build server-side rendering apps in React. In Just 3 small steps you can get started with SSR based app in React.

Why SSR-based apps?

Server-side rendering allows you to build highly performant apps in React. These apps can do things like fetching and processing data on the server, caching the rendered pages, and much more.

Here's how to step by step:

Step 1: Initializing the project

Create a directory for your project and run the below command to initialize it:

npm init

Run the below command to install the required dependencies for the project:

npm install react react-dom next

Open package.json file and add the below scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

Your package.json the file will look like the below:

Step 2: Creating SSR-based routes

Inside your project directory, create a directory pages. It will be used to detect routes of the same name as pages. NextJS uses file-based routing.

Create a file pages\index.jsx and paste the below code:

const Homepage = ({ images }) => (
    <div style={{display: 'flex', width: '100%', justifyContent: 'center', alignItems: 'center', marginTop: '50px', flexWrap: 'wrap'}}>
        {
            images.map((img, index) => (
                <img src={img} key={`gallery-img-${index + 1}`} style={{height: '150px', marginLeft: index > 0 ? '20px' : '0', marginBottom: '20px'}} />
            ))
        }
    </div>
);

// fetch data on server side and return as props `images`
Homepage.getInitialProps = async (ctx) => {
    const res = await fetch('https://dog.ceo/api/breeds/image/random/50');

    const json = await res.json();

    return { images: json.message }
}

export default Homepage;

The code is simple. We are creating an index route that fetches data on the server side and then passes it to the page as props.

Step 3: Starting the server

Run the below command to start the app:

npm run dev

Open http://localhost:3000 in your browser. You will see a gallery of 50 random dog images.

Open the developer tools network tab in your browser. You will see that there is no network request being made to API. It is because the API request is made on the server.

This is your simple 3-step SSR app in React. To check out more about this: click here.

3 Steps To Build React SSR App

Give me just 5 minutes and I will teach you to build server-side rendering apps in React.

The all-in-one writing platform.

Write, publish everywhere, see what works, and become a better writer - all in one place.