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?
Client side rendering is another way of displaying a web page. Rather than using static HTML and CSS, client side rendering utilizes JavaScript, which will run and display a web page. Using client side rendering has been relatively more recent, and gained popularity in Frontend Development.
Benefits/Drawbacks to Server Side Rendering
Pros
- 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
Cons
- 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
Pros
- 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
- Wide selection of various JavaScript libraries — more on this later!
Cons
- 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.
