Photo by Fili Santillán on Unsplash

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: Initialize 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:

package.json

Step 2: Create 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: Start 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.

Read this post and more on my Typeshare Social Blog

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos