This article was originally published at https://www.blog.duomly.com/client-side-rendering-vs-server-side-rendering-vs-prerendering/
Intro to Client-Side Rendering vs. Server-Side Rendering
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!
What is Client-Side Rendering (CSR)?
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.
When the user enters an address in the browser, the server responds with an empty HTML file, with Javascript responsible for rendering all the content.
Until all the Javascript is downloaded, users can see that an empty page or loading screen depends on the developers. When Javascript is downloaded, it needs to compile everything, and the next content can be shown to the user.
There may happen that Javascript will do some API calls if any additional data is required to display the screen and make the web page fully interactive.
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.
What is 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.
Frameworks for Server-Side Rendering
Angular: Angular Universal
ReactJS: ReactJS with custom setup, Next.js
VueJS: Nuxt.js
What is Pre-rendering?
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 tradeoff between server-side rendering and client-side rendering. When the user enters the browser's address, the server sends back the static .html with Javascript, which is loading in the background. User can see the static website, but there's no interactivity until Javascript is fully downloaded. Then Javascript gets the necessary data to the particular view and redirects the user to the right file, but it's not visible.
Pre-rendering is a great idea, especially if you care about the SEO of your page because bots can read the pre-rendered content.
Comparison
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.
Client Side Rendering
Pros:
- fast rendering after initial loading
- good for web apps with lots of logic, and the big part which needs authorization
- a lot of Javascript frameworks and libraries supporting CSR
Cons:
- 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
Server Side Rendering
Pros:
- search engines bots can crawl for a better SEO
- initial loading is faster
Cons:
- 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
Pre-renedering
Pros:
- better user experience for the first loading
- better SEO
- less requests then with SSR
Cons:
- need to wait for interactivity until Javascript is loaded
- 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
Conclusion
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,
Anna
Top comments (5)
You’re going to have to explain this one. There’s nothing about server-side rendering that makes it ill-suited to serving a large user base.
No Chris, you don't understand. You don't want to have to render the same page for all of your users each time they request it. Even the most advanced computers of our age running HTML5 can't keep up with that demand.
That was fantastic, To be honest it's the first time i see fantastic comparison like this, It's the first time i wasn't know Pre-rendering at all, And this comparison let me see is issues I'm going to get in my next project. So Thank you very very much.
Nice explanation! 🤟 I didn't know about pre-rendering, thanks for sharing!
Thats quite a good comparison.