How to Use Next.js for Server-Side Rendering in React

Posted on by Panther

In this tutorial, we will learn how to use Next.js for server-side rendering in a React application. Next.js is a popular React framework that provides built-in server-side rendering capabilities, making it easier to create fast and SEO-friendly React applications.

Server-side rendering (SSR) is the process of rendering the initial page on the server and sending it to the client. This improves the performance and allows search engines to crawl and index the content, enhancing the website’s visibility.

Before we start, make sure you have Node.js and npm (Node package manager) installed on your machine. You can download them from the official Node.js website.

Step 1: Creating a Next.js Project

To get started, open your terminal and navigate to the directory where you want to create your project. Then, run the following command to initialize a new Next.js project:

npx create-next-app my-app

This command creates a new directory called “my-app” and installs all the necessary dependencies for a Next.js project.

Next, navigate to the project directory:

cd my-app

Step 2: Creating a Basic Next.js Page

Next.js follows the convention of creating pages as components inside the “pages” directory. Let’s create our first Next.js page.

Inside the “pages” directory, create a new file called “index.js”. Open the file in your favorite text editor and add the following code:

function HomePage() {
  return <h1>Hello Next.js!</h1>;
}

export default HomePage;

In this example, we created a simple functional component called “HomePage” that returns an <h1> element with the text “Hello Next.js!”.

Step 3: Starting the Next.js Development Server

To start the Next.js development server and see our page in action, run the following command in your terminal:

npm run dev

This command starts the development server and opens your application in your default web browser at `http://localhost:3000`. You should see the “Hello Next.js!” text on the page.

Step 4: Adding Server-Side Rendering to Our Page

Now, let’s modify our page to use server-side rendering instead of client-side rendering.

Replace the contents of “pages/index.js” with the following code:

import fetch from 'isomorphic-unfetch';

function HomePage({ data }) {
  return (
    <div>
      <h1>Hello Next.js!</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.text();

  return {
    props: {
      data,
    },
  };
}

export default HomePage;

In this code, we made the following changes:

  • Imported the “fetch” function from the “isomorphic-unfetch” library, which allows us to make HTTP requests both on the server and the client.

  • Modified the “HomePage” component to accept a “data” prop and display it inside a <p> element.

  • Defined a new function called “getServerSideProps” that is responsible for fetching the data on the server.

  • Inside the “getServerSideProps” function, we made an HTTP request to retrieve the data from `https://api.example.com/data` and returned it as a prop.

The “getServerSideProps” function is a special function in Next.js that runs on the server and fetches any required data before rendering the page. The data returned from this function is passed as props to the page component.

Now, if you refresh your browser, you should see the “Hello Next.js!” text, followed by the data fetched from the server.

Step 5: Building and Deploying the Next.js Application

To build a production-ready version of your Next.js application, run the following command:

npm run build

This will create an optimized and minified version of your application in a new directory called “build”.

To preview the production build locally, you can run the following command:

npm run start

This starts a production server that serves the built version of your application. Open your browser and navigate to `http://localhost:3000` to see your application in production mode.

To deploy your Next.js application to a hosting provider, you will need the built version of your application. You can simply copy the contents of the “build” directory to your hosting provider’s server, or follow their specific deployment instructions.

Congratulations! You have successfully learned how to use Next.js for server-side rendering in a React application. With Next.js, you can easily create fast and SEO-friendly React applications that render content on the server.

Conclusion

Server-side rendering (SSR) is a powerful technique to improve the performance and search engine optimization (SEO) of your React applications. In this tutorial, we learned how to use Next.js, a popular React framework, to implement server-side rendering in a React application.

We started by creating a basic Next.js project using the create-next-app command. Then, we created a simple page component and rendered it on the server using the getServerSideProps function. Finally, we built and deployed our Next.js application.

Next.js provides many other features like file-based routing, API routes, and dynamic imports, which can further enhance your React applications. I encourage you to explore the Next.js documentation and experiment with these features in your own projects.

Happy coding!

Related Post