Server-Side Rendering using NextJS getServerSideProps

NextJS pre-rendering process gives us two options – static generation and server-side rendering. In this post, we will look at how to implement server-side rendering using NextJS getServerSideProps function.

You can read about static generation in this post on NextJS pre-rendering using getStaticProps function.

1 – NextJS Server-Side Rendering

From a conceptual point of view, server-side rendering and static generation are quite similar. With both of these approaches, our main aim is to generate the pages on the server-side rather than the client side. This is to improve the initial page load experience and improve the Search Engine Optimization features.

The main difference between server-side rendering and static generation is about when the page is pre-rendered. For example, sometimes we want to pre-render a page on the server for every incoming request. This is needed in cases where we need to access the specific request object (for example, cookies).

While NextJS supports static pre-generation, it also provides tools to enable server-side rendering. For this case, rendering happens for every incoming request. To facilitate SSR, NextJS provides a special function getServerSideProps().

2 – Using NextJS getServerSideProps

To enable server-side rendering for a particular page, we need to declare getServerSideProps() function in the component code.

See below example:

function UserProfilePage(props) {
    return <h1>{props.username}</h1>
}

export default UserProfilePage;

export async function getServerSideProps() {
    
    return {
        props: {
            username: 'Neo'
        }
    };
}

Note that the getServerSideProps() function can be declared only within a page-level component. Also, the function will be executed for every incoming request to this particular page.

We return an object as output of getServerSideProps() function. Basically, this object contain a property known as props.

The props object is made available to the actual component code. In this case, we add username property to the props which we can then use in the UserProfilePage component.

3 – NextJS getServerSideProps Context Object

The NextJS getServerSideProps() function also provides a special context object. The context object gives us access to the path variables. Also, in the case of SSR, it provides access to the request and response objects as well.

See below example on how to use the context object.

function UserDetailPage(props) {
    return <h1>{props.userId}</h1>
}

export default UserDetailPage;

export async function getServerSideProps(context) {
    const { params } = context;
    const userId = params.uid;
    
    return {
        props: {
            userId: userId
        }
    };
}

As you can see, we extract the params object from the context. Next, we get params.uid from the params object. Here, uid is the dynamic id based on the file name [uid].js.

We can then add the params.uid to the props object and access it within the component page.

Conclusion

With this, we have successfully learnt how to perform server-side rendering using NextJS getServerSideProps function. We looked at both static page as well as dynamically changing the page contents.

Want to build a bigger NextJS application? Check out this post on creating a NextJS event management application.

In case you want to perform client side fetching in NextJS, check out this post on NextJS useSWR hook.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.