Nerd For Tech
Published in

Nerd For Tech

Server vs. Client Side Rendering

Image credits to Antonio Batinic at Pexels

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

  1. Better SEO — web crawlers have an easier time with server side rendering, which can improve your website’s appearance in search results
  2. 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.
  3. Initial page will load faster, compared to client side rendering

Cons

  1. Not ideal for dynamic sites
  2. Pages that are not the landing page may load slower
  3. 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

  1. Ideal for dynamic, interactive sites
  2. 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
  3. Wide selection of various JavaScript libraries — more on this later!

Cons

  1. Not great for SEO — web crawlers can have a more difficult time, which may result in your website’s appearance in search results
  2. Slower initial load time for landing page
  3. 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:

  1. Angular.js
  2. Vue.js:
  3. React.js
  4. Svelte.js

What are some examples of server side frameworks?

There are also a wide variety of server side frameworks to choose from, including:

  1. 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.
  2. Nuxt.js: Nuxt.js is built on the Vue library.
  3. 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.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Three.js Text Example

CSS Flexbox Part 2: What (else) I learned from Flexbox Zombies

Triggering Audio w/ Vanilla JS — Building a Drum Rack!

Day05 - #100DaysOfCode - Slow Weekend

Skills for React web developers: don’t miss out!

react developers

Here is what I’ve learn about groupBy operator by reading RxJS sources

ECMAScript 2020 aka ES11

NodeJS MS-SQL integration testing with Docker/Mocha

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aimee Liang

Aimee Liang

More from Medium

Setting profiler and flame-graph in Visual Studio Code

npm start… NPM START!?

How to implement a tracking log output location plugin?

What is TypeScript and why would I use it in place of JavaScript?