What is SSR in NextJS ? (original) (raw)

Last Updated : 12 Apr, 2025

Server-Side Rendering (SSR) in Next.js generates HTML on the server for each request, enhancing SEO and initial load times by delivering fully rendered content before it reaches the client.

What is SSR?

**SSR or **Server Side Rendering is also known as dynamic rendering. In SSRthe 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 SSRas 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 2: 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 3: Add the following code to the "pages/users.js" file:

JavaScript `

// Inside "pages/users.js"

export default function Users( {data} ){ return (

List of Users

Id : {user.id} , Name : {user.name} , Email : {user.email}

) }

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

yarn run dev

**Output: And now go to the "http://localhost:3000/users" to get the output.

Output of the above code