What is SSR in Next.js?
Server-side rendering is a key feature of Next.js, a popular React framework for building web applications. SSR refers to rendering web pages on the server before sending them to the client's browser.
In this answer, we will explore SSR in Next.js and its benefits.
Why choose server-side rendering (SSR)?
In traditional client-side rendering (CSR), the server sends a basic HTML file when we visit a website. Then, our browser fetches additional JavaScript files and builds the webpage on our device. This process can be slow, especially if we have a slower internet connection or the website contains complex elements.
Next.js address this issue with SSR. When we request a webpage, the server does most of the work. It executes the necessary JavaScript code, retrieves data from APIs, performs computations, and renders the page as complete HTML content. This means that when the server sends the HTML to the device, we can see the webpage right away without waiting for additional processing on our end.
Benefits of SSR
SSR brings several benefits to Next.js applications:
Improved SEO: SSR enables search engines to easily crawl and index our pages, leading to better search engine rankings and visibility.
Faster initial page load: Pre-rendered HTML is sent from the server, resulting in shorter load times and a better user experience.
Enhanced performance on low-end devices: SSR reduces client-side processing, making our app more accessible and responsive for users with slower devices or internet connections.
Efficient content delivery: Server-level data fetching reduces the number of API requests and optimizes bandwidth usage, improving the overall efficiency of your application.
SSR logic implementation
Next.js simplifies SSR implementation with its built-in support. Let's explore how to use SSR in Next.js by utilizing the getServerSideProps method:
Set up a Next.js project
We will run the following command in the terminal or command prompt to create a new Next.js project:
npx create-next-app my-app
Create a page component
We will create a new file named index.js inside the pages directory. This will serve as our SSR-enabled page component.
We will add the following code in index.js file:
import React from 'react';const HomePage = ({ serverRenderedData }) => {return (<div><h1>Next.js SSR Example</h1><p>{serverRenderedData}</p></div>);};export async function getServerSideProps() {// Fetch data from an API or perform any async operationconst serverRenderedData = 'Server-rendered data';// Return the data as propsreturn {props: {serverRenderedData,},};}export default HomePage;
In this code, we define the HomePage component that receives the serverRenderedData as a prop. We fetch the data using the getServerSideProps method which runs on the server-side. The fetched data is then passed as a prop to the HomePage component.
Execute the application
We will run the following command in our terminal or command prompt to start the Next.js development server:
npm run dev
Coding example
Below is a Next.js project created by implementing the above steps:
import React from 'react';
const HomePage = ({ serverRenderedData }) => {
return (
<div>
<h1>Next.js SSR Example</h1>
<p>{serverRenderedData}</p>
</div>
);
};
export async function getServerSideProps() {
// Fetch data from an API or perform any async operation
const serverRenderedData = 'Server-rendered data';
// Return the data as props
return {
props: {
serverRenderedData,
},
};
}
export default HomePage;Explanation
Line 1: Import the necessary dependencies.
Lines 3–10: Define the
HomePagecomponent, which receives a prop calledserverRenderedDataand returns a<div>with an<h1>heading and a<p>paragraph displaying the value of theserverRenderedDataprop.Lines 12–22: Define the
getServerSidePropsfunction, which is a special Next.js function for server-side rendering. It assigns the string'Server-rendered data'to theserverRenderedDatavariable and returns it as a prop.Line 24: Export the
HomePagecomponent as the default export of the module.
Free Resources
