Open In App
Related Articles

What is SSR in NextJS ?

Improve Article
Save Article
Like Article

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.


export default function Page( {data} ){
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:

Create a users.js file. 


created “users.js” file

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


// Inside "pages/users.js"
export default function Users( {data} ){
    return (
            <h1>List of Users</h1>
                 return <li key={index}>Id : {} , 
                     Name : {} , Email : {}
export async function getServerSideProps() {
    // Fetching data
    const res = await fetch(
    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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Feb, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials