Server vs. Client Side Rendering
Recently, someone asked me about a React framework, and the benefits of choosing and using this particular framework. Truth be told, I wasn’t sure: I knew this framework loaded faster compared to other frameworks in the same space, but couldn’t explain it in more depth than that at the moment.
After this particular conversation, and a few more about Front End development, I wanted to focus my attention on the differences between server side rendering versus client side rendering, and the benefits of using either or.
What is server side rendering?
Server side rendering is one way of displaying a web page. This was how much of the Web worked until recently. This type of rendering utilizes HTML and CSS, converting it so the Web browser can understand it and display it. For a long time — in fact, since the Web was created — this was how web pages were displayed.
What is client side rendering?
Benefits/Drawbacks to Server Side Rendering
- Better SEO — web crawlers have an easier time with server side rendering, which can improve your website’s appearance in search results
- Great for static sites — not every website needs to have interactive media or animations. If this is the case for you, perhaps having a website composed of HTML and CSS will work fine.
- Initial page will load faster, compared to client side rendering
- Not ideal for dynamic sites
- Pages that are not the landing page may load slower
- Many reloads — with server side rendering, you have to make frequent requests to the server to display new and/or different pages.
Benefits/Drawbacks to Client Side Rendering
- Ideal for dynamic, interactive sites
- Faster load times — in the event that you want your user to be directed to different pages, it will load much quicker than server side frameworks
- Not great for SEO — web crawlers can have a more difficult time, which may result in your website’s appearance in search results
- Slower initial load time for landing page
- May require additional libraries
For more on this, I recommend Cristian Vega’s blog — Cristian clarified many of these points in their own work.
What are some examples of client side frameworks?
There are very many client side frameworks, including:
What are some examples of server side frameworks?
There are also a wide variety of server side frameworks to choose from, including:
- Next.js: Next.js is built on the React library. It’s a popular choice for developers given its quick rendering time. It also offers better SEO for your website.
- Nuxt.js: Nuxt.js is built on the Vue library.
- Nest.js: Nest.js is a Frontend framework, built on the Angular library.
There are many benefits and drawbacks to both client side and server side rendering. As Frontend development continues to advance, it’s not hard to wonder what new frameworks will be created, and how it might change how we currently understand and interact with the Frontend.
For additional reading, please check out the resources below.
Client-side vs. server-side rendering: why it's not all black and white
Since the dawn of time, the conventional method for getting your HTML up onto a screen was by using server-side…
What Is Server-Side Rendering?
Over the years, rendering content on a page has developed to have a lot more possibility than just rendering from a…
Client Side Rendering Vs Server Side Rendering in React js & Next js
Hi Guys in this article I want to share with you my experience of starting working with Next.js .We will discuss about…