This article was originally published at https://www.blog.duomly.com/client-side-rendering-vs-server-side-rendering-vs-prerendering/
We can create awesome web applications and websites with the technologies we have right now, but there’s still a performance that needs to be considered. Developers outdo each other to achieve the best results in loading speed and user experience in their projects. And at that point, there are many discussions on the way, applications should be rendered.
Before modern front-end frameworks started to be used so commonly, websites were rendered on the server, and ready .html files were sent to the browser.
When developers started using ReactJS or Angular, web pages started to be rendered in the browser. Then again, to make loading faster and user experience better, frameworks for server-side rendering, like Next.js, started to be more popular.
And there’s also a pre-rendering, which is another approach for rendering a web application. But which one will be best for your next project?
In this article, I’d like to go through those three concepts, client-side rendering, server-side rendering, and pre-rendering, explain them one by one and compare.
If you prefer watching, then reading, feel free to join us on our YouTube channel.
Let’s check what the difference between available solutions is!
Client-Side Rendering is a way of rendering web pages on the browser side. This approach becomes commonly used since modern frontend frameworks popularized this solution. Since most of the applications are created now with ReactJS or Angular, they are also using client-side rendering.
Now, let me explain how Client-Side Rendering works, based on the graphic you can see below.
The initial load in the case of client-side rendering is slightly slower, but after that, each next loading is pretty fast. Also, there’s no need to re-render the whole UI, just single elements that change.
If you understand how client-side rendering works, it’s time to take a look at server-side rendering.
Server-Side Rendering is another way of rendering web pages, but this one renders content in the server and sends ready .html files to the browser. Let’s take a look at the graphic illustrating the flow.
When the user enters the address in the browser, there’s the request send to the server. Next, the server is preparing the specific HTML file with getting data required for the particular view.
The server is sending this file to the browser, and it renders the content on the screen so the user can see.
The whole process happens fully on the server, and it repeats every time user triggers any action.
Right now, let’s focus on the third possibility, which is pre-rendering.
Angular: Angular Universal
ReactJS: ReactJS with custom setup, Next.js
While in some projects, Server Side Rendering can be great in others, it can be a nightmare. To combine the advantages of both solutions, that's another way that can be used to render project, pre-rendering.
Pre-rendering is a great idea, especially if you care about the SEO of your page because bots can read the pre-rendered content.
When we know how every way of rendering works and how they differ from each other, we can consider their pros and cons, so we will be able to conclude about using any of this solution with different projects.
- fast rendering after initial loading
- good for web apps with lots of logic, and the big part which needs authorization
- low SEO
- initial loading may take some time
When to use Client Side Rendering?
- if your application has a lot of dynamic data
- if your application has a very complex UI
- if your application is focused on a bigger number of users
- if your application needs authorization to be accessed
- if your application doesn’t have a lot of content used for SEO
- search engines bots can crawl for a better SEO
- initial loading is faster
- lots of server requests
- full page reloads
- slow rendering when application has a lot of interactivity
When to use Server Side Rendering?
- if your application UI is complex but with a small amount of interactivity
- if your application is a more static page
- if the amount of users is not large
- better user experience for the first loading
- better SEO
- less requests then with SSR
- need to provide user-friendly design for the first loading if data is required
When to use Pre-Rendering?
- if your application has a UI with contents used for SEO
- if part of your application is available for users without authentication
- if you don’t want to use SSR, but you need to improve loading time and SEO
- if your application has more static content on the first page
This article went through three ways of rendering the application, Client-Side Rendering, Server Side Rendering, and Pre-rendering. I explained how each of these ways of rendering work so you’ll be able to select the best solution for your application.
Besides that, we went through each way of rendering the pros and cons and summarized when it’s good to use a certain solution.
There’s no one perfect rendering way, a lot depends on the application you are creating and the result you want to achieve. If you have a static app and care about SEO and loading time, you’ll select a different way, then if your application is dynamic and needs a lot of content from the server.
I hope you’ll find this article useful when you will plan your next application.
Thanks for reading,