What is SSR in NextJS ?

Next Js is a React-based framework that provides a developer with everything required for a production-grade application. 

SSR or Server Side Rendering is also known as dynamic rendering. In SSR the page is generated each time the server gets a request. Pages on which the data have to change for a particular type of request, those pages use SSR as data is not the same for every request and may vary with it. To use SSR for a page, we need to export an async function called “getServerSideProps“. This async function is called each time a request is made for the page.

Syntax:

export default function Page( {data} ){
   return <>YOU CAN DISPLAY YOUR DATA ACCORDINGLY</>
}
export async function getServerSideProps() {
   // Your code
   const data = .... ;
   
   // Passing data to the Page using props
   return {
       props : {data}
   }
}

Note: In place of data you can take any other name of the variable. Also, you can pass multiple props by separating them with commas “,“. 

Below is the step by step implementation:

Step 1: Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

Project Structure: So, right now we have a Next Js application named my-awesome-app whose directory structure is shown in the image below:

Directory structure

Step 1: So, let us create a page with endpoint as “/users” by creating a “users.js” in our “pages” folder and then fetching the users from a dummy API and then showing that data in that endpoint.

Dummy api used:

https://jsonplaceholder.typicode.com/users

Create a users.js file. 

created “users.js” file

Step 2: Add the following code to the “pages/users.js” file:

users.js

// Inside "pages/users.js"
export default function Users( {data} ){
    return (
        <div>
            <h1>List of Users</h1>
            <ul>
                {data.map((user,index)=>{
                 return <li key={index}>Id : {user.id} ,
                     Name : {user.name} , Email : {user.email}
                 </li>
                })}
            </ul>
        </div>
    )
}

export async function getServerSideProps() {

    // Fetching data
    const res = await fetch(
    'https://jsonplaceholder.typicode.com/users');
    const data = await res.json() ;

    // Passing data to the Product Page using props
    return {
        props : {data}
    }
}

Step to run the application: Using either of the given 2 commands start the dev server:

npm run dev

Or

yarn run dev

Output: And now go to the “http://localhost:3000/users” to get the output.

Output of the above code