I've been developing web applications for over seven years now, and I've seen a lot of different methods for rendering webpages.

I started with PHP, and for a long time, server-side rendering was the only option. In PHP the server is responsible for generating the HTML of the page, and it is send directly to the client.

This worked well, but then two years later I learned Node.js and Next.js. This was a paradigm shift for me, as I was now able to do client-side rendering, but also static side generation and (again) server-side rendering.

In this article, you'll discover the most common rendering web methods: client side rendering, server side rendering, and static site generation with its advantages and disadvantages.

Client Side Rendering (CSR)

CSR is the process of rendering the content of a web page in the browser, using JavaScript. It works by sending a request to the server for HTML and other resources, then rendering the page in the browser.

✅ Easy development.

❌ Search engine optimization (SEO) can be a challenge since crawlers may not be able to index the content.

Server Side Rendering (SSR)

SSR is the process of generating HTML on the server and sending it to the browser. The main advantage of SSR is that it allows for full page rendering, including the ability to render different content depending on the user, such as language or device type.

✅ Content is generated on the server and sent to the client, making it easier to optimize for SEO.

❌ The initial page load can be slower, as the server needs to generate the HTML, CSS and JavaScript files.

Static Site Generation (SSG)

SSR works by pre-rendering the application on the server and creating a set of static HTML files which can be served directly to the browser.

✅ The main advantage of SSG is that it can improve performance and reduce the amount of time needed to render the page in the browser.

❌ Because static sites are built from pre-generated files, it can be more difficult to make changes to the design and layout of a static site than it is to make changes to a dynamic site.

Recommendations

So which you should use? A CSR web app is very easy to develop. Now, if you have the time to develop a SSR. But because of the advantages that SSR presents, if you have resources (time) to spend, you should consider switching to SSR.

Finally, checking the Next.js documentation we can found the following statement:

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.