Server-side rendering (SSR) is a critical concept in web development that is gaining popularity again after Client-side rendering (CSR), especially with frameworks like Next.js. Its is also known as dynamic rendering that generates HTML on the server for each request. We can use SSR in pages where data changes based on user-specific information and each time we get the updated page based on each request.

Evolution of Server Side Rendering-:

1) Static HTML Pages (1990s)

In the early days of the internet, known as Web 1.0, most web pages were static. Developers would manually write HTML pages or use tools to generate them. These pages were then served using web servers like Apache or nginx. This can be considered the earliest form of a static site generation (SSG).

2) Dynamic HTML Pages (Late 1990s to 2010s)

During a period when websites were becoming more interactive, technologies such as CGI, PHP, and ASP were introduced. These allowed webpages to serve data dynamically based on user inputs and forms.

At that time, server-side rendering was dominant. This involved serving dynamically generated HTML pages to browsers with preprocessed data. This was achieved by running PHP scripts that access the database and execute backend logic to serve HTML pages.

3) Single Page Applications(SPA) or Client Side Rendering (CSR) (2010s)

With the advent of modern JavaScript libraries and frameworks such as React.js, Vue.js, and Angular, there has been a shift towards Client-Side Rendering (CSR). This means that instead of the backend server handling all the computation and generating a page for each request, it now sends raw HTML pages and their JavaScript files to the client machines. The logic then runs on the client machines, making API calls to the backend servers and updating the UI dynamically.

Drawbacks of Client Side Rendering (CSR):-

Let’s understand with the help of diagram below. We can see couple of problems:

1) Blank Page : When a user requests a webpage, they see a white flash before the page renders.

2) Waterfall problem : As shown in the diagram, multiple fetch requests are invoked in a sequential manner, and the data is received one after another, not in parallel.

3) Not SEO-optimized : If the content is generated and rendered on the client side, it may be difficult for web crawlers to index the website. However, this may not be true for modern web crawlers that have the ability to run JavaScript and wait for the HTML page to generate content.

Importance and Benefits of Server-Side Rendering(SSR):

The introduction of SSR in the modern React framework, Next.js, addresses the issues encountered with CSR and offers the benefits of server-side rendering. This makes developers lives easier by allowing them to write components and server-side logic within the same application due to its full-stack framework environment.

1) Enhanced User Experience: SSR significantly reduces the initial page loading time by generating and delivering HTML pages from the server. This results in a more responsive webpage that is ready to use without waiting for content to appear that is no blank screens or loading spinner, thus enriching the user experience.

2) SEO Friendly: When web crawlers request a page, they receive fully structured HTML pages with all the data. This is preferred for SEO optimizations and makes it easier for search engine bots to search for meaningful keywords to index your pages.

3) Improved Performance: SSR reduces the time to first byte (TTFB), resulting in faster page loads and eliminating the waterfall problem. This also improves the performance of our application, particularly for users with slow network connections or less powerful devices.

In Next.js, there is a built-in functionality to implement SSR to our app, thanks to app-based routing system. When a user requests for any page, the request goes to the app and it starts generating the HTML page on the server itlsef and starts running the server-side logic and making the API calls(if any) and gives back the fully rendered HTML page with all the neccessary content. This helps to reduce loading time and making user interactivity much faster.

To learn more about what happens when client gets Server side generated HTML page from server and how browser responds or what is hydration,you can read it from here.

Static Site Generation (SSG)

Static site generation is the process of creating web pages at build time. When we use “npm run build” to create the build in Next.js, it generates pre-rendered HTML pages with or without data, depending on the requirements.

Static site generation is useful when the data doesn’t change very often. These pages can also be cached by CDNs, leading to faster page loads and reduced server load. This is in contrast to server-side rendering, where the page is generated at the server with each request, resulting in higher server costs.

SSG is easier to scale than SSR because of its caching. In Next.js, the page is pre-rendered will always be updated on each request, making it slower. This is because pages in SSR cannot be cached by CDNs.

Conclusion

Next.js’s Server-Side Rendering provides a number of advantages, including enhanced SEO and performance as well as a more stable and manageable codebase. Through comprehension of SSR’s operation and use of its potential, developers can design web apps that provide an enhanced user experience. As you learn more about Next.js, think about using SSR in your projects to take advantage of its benefits and make your apps run faster.