What is SSR in NextJS ? Last Updated : 12 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 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 ImplementationStep 1: Create NextJS Application: You can create a new NextJs project using the below command:npx create-next-app gfgProject Structure:So, right now we have a Next Js application named my-awesome-app whose directory structure is shown in the image below:Directory structureStep 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/usersCreate a users.js file. created "users.js" fileStep 3: Add the following code to the "pages/users.js" file: JavaScript // 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 devOryarn run devOutput: And now go to the "http://localhost:3000/users" to get the output.Output of the above code Comment More infoAdvertise with us Next Article What is SSR in NextJS ? mycodenotein Follow Improve Article Tags : JavaScript Web Technologies ReactJS Geeks Premier League Geeks-Premier-League-2022 Next.js +1 More Similar Reads What's new in Next.js 13 Next.js 13 brings a host of innovative features and improvements, elevating the framework's capabilities and enhancing the development experience. From a cutting-edge build tool to advanced routing and server-side rendering features, Next.js 13 is designed to streamline workflows and boost performan 5 min read SEO in Next JS Search Engine Optimization (SEO) is crucial for enhancing the visibility and ranking of your website in search engine results. Next.js provides robust features and tools that make optimizing your site for SEO easier and more effective.In this article, we'll explore how to use Next.js for SEO to opti 5 min read Getting Started with Next JS NextJS is an open-source React framework for building full-stack web applications ( created and maintained by Vercel ). You can use React Components to build user interfaces, and NextJS for additional features and optimizations. It is built on top of Server Components, which allows you to render ser 9 min read Why Next.js is Popular? Next.js is a robust React framework designed to enhance web development with capabilities like server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR). Its comprehensive feature set simplifies the development process, improves performance, and boosts SEO, 4 min read Next.js Functions: userAgent Detecting the userAgent is now very important in SSR applications using Next.js, which provides a userAgent string. Doing so can be quite helpful to optimize the rendering, find some errors that are browser-specific, or change the client experience based on the device it is accessed from. Next.js is 5 min read Server Actions in Next.js Server actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. It enables efficient, secure handling of server-side operations like data fetching, form processing, and database interactions, enhancing application security and performance 4 min read template.js in Next JS In Next.js, the template.js file can serve various purposes depending on the context and project requirements. It can be used to create reusable templates for components, pages, or even configuration settings. Utilizing a template.js file helps to maintain a consistent structure and reduce repetitiv 4 min read NextJS vs React NextJS is a framework of React that enhances its server-side rendering, automatic code splitting, and simplified routing, while React is a frontend library of JavaScript that is used for developing interactive user interfaces and building UI components.NextJS is optimized for production with easier 13 min read How to import SASS in Next.js ? Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Importing SASS in Next.js allows you to use SCSS for styling your application. This integration enables advanc 2 min read Next.js Functions: useSearchParams The Next.js useSearchParams hook gives the functional component access to the query parameters from the URL and the ability to manipulate them. This is pretty useful in cases where you need to get, parse, or change search parameters directly within the component, without manually parsing the URL.Syn 5 min read Like