Server-Side Rendering with NextJS

Server-Side Rendering with NextJS

Server-side rendering (SSR) is an important technique for optimizing the performance of web applications. With SSR, web pages are generated on the server and sent to the client as fully-formed HTML documents. This can improve page load times, reduce the amount of work required by the client’s browser, and improve search engine optimization (SEO). In this article, we’ll explore how to implement SSR using NextJS, a popular framework for building React-based web applications.

What is Server-Side Rendering?

Traditionally, web pages have been generated entirely on the client side, using JavaScript to manipulate the HTML, CSS, and other assets in the browser. While this approach has some advantages, such as flexibility and interactivity, it can also lead to slow load times and poor SEO, since search engines may have difficulty crawling JavaScript-generated content.

Server-side rendering addresses these issues by generating the HTML document on the server before sending it to the client. This can result in faster load times, better SEO, and improved performance on low-powered devices.

Implementing Server-Side Rendering with NextJS

NextJS is a powerful framework for building React-based web applications, and it includes built-in support for SSR. Here’s how to implement SSR using NextJS:

1: Create a new NextJS project by running npx create-next-app in your terminal.

2: Define your application’s routes using the pages directory. Each file in this directory will correspond to a route in your application. For example, if you create a file named about.jsx in the pages directory, it will correspond to the /about route.

Note that in NextJS 13 the routing will be handled in the app folder instead of the pages folder. You can read the Docs here: <a href="https://nextjs.org/blog">Next.js 13.3 Blog Post<a>

// pages/about.jsx

import React from "react";

const AboutPage = () => {
  return <h1>About us</h1>;
};

export default AboutPage;

3: Define your page components using JSX. These components will define the content of each page in your application. For example, you might create a component named HomePage that renders a list of blog posts.

// components/HomePage.jsx

import React from "react";

const HomePage = ({ posts }) => {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

4: Add a getServerSideProps function to each page component. This function will be called on the server to generate the HTML document for the page. It should return an object containing the page’s props. For example, if your HomePage component requires a list of blog posts, the getServerSideProps function might fetch that data from an API and return it as a prop.

// components/HomePage.jsx

import React from "react";

export const getServerSideProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  return {
    props: {
      posts,
    },
  };
};

const HomePage = ({ posts }) => {
  return (
    <div>
      <h1>Welcome to my blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;

5: Start your NextJS application using the npm run dev command.

With these steps completed, your NextJS application will now use SSR to generate HTML documents for each page, improving performance and SEO.

Conclusion

Server-side rendering is an important technique for optimizing the performance and SEO of web applications. With NextJS, implementing SSR is straightforward and can be done using built-in features. By following the steps outlined in this article, you can easily implement SSR in your NextJS application and reap the benefits of faster load times and improved search engine visibility.