Server-Side Rendering

Server-side rendering

As we discussed earlier, server-side rendering is a form of pre-rendering in which the HTML of a page is generated for the user’s request on the server before it’s served to the user. However, in the case of Jamstack applications, server-side rendering is not recommended. Even though it comes with its own set of advantages, server-side rendering also comes with a few drawbacks that affect the core principle of Jamstack. One of these drawbacks is that the web page would not be prebuilt and available to be served as soon as the request is made, going against the principles of a Jamstack application.

This way, the page’s HTML is generated for every request based on the request data, and the rendered page is sent to the client. On the client-side, React uses JavaScript instructions and JSON data from the server to add interactivity.

How to render a page on the server

Next.js provides an out-of-the-box asynchronous function getServerSideProps(). We can use it for server-side rendering, which the Next.js compiler will look for. Much like the getStaticProps() method for static generation, it’s exported from the page along with the page HTML, and the page is generated on the server when the application is built using the next build command.

Using the getServerSideProps() function

To demonstrate the usage of getServerSideProps(), let’s take the “Lookup a single random meal” endpoint of our API. We’ll create a new page called random-meal.js in our application that we’ll use for this.