Server-side vs client-side rendering: which one is best for me?

INTRODUCTION

Last couple of years we’ve seen a huge growth of webpage apps written mainly in JavaScript (at least the front-end). We can extract two approaches of implementation. One is the Client-Side rendered static website. The second is server rendered javascript (SSR). I will try to explain both of them and present the pros and cons.

Client-Side

This approach in general is easier. We just have to serve static js files (and some assets like stylesheets, images). The code is being interpreted by engine in client browser. Hosting of such project can be done for example on AWS S3 service.

Pros

• + Cheaper (Less development work)
• + Easier to implement
• + Cheaper and easier hosting
• + Easier to deploy

Cons

• – Less secure
• – Harder to update clients (cache in browsers)
• – Client browser cache problems
• – High requirements of resources on client browser
• – Browsers are not equal
• – SEO problems (still even google has problems with understanding full js client side websites,
  this may cause a drop-off of the visits. Companies now participate with search engines creators to upgrade this matter, but it’s still a problem)

Server Side Rendering

This way our server is the „engine” which runs the code. Such project requires specialized hosting that can run js code and serve static assets. In general search engines prefer such apps. The bots that analyze our website have problems with interpreting the js code.

Pros

• + Security (for example clients have no access to keys and tokens for api authentication)
• + Performance (Such apps do not require so huge resources on a device)
• + SEO (as said on ClientSide con: Server side rendering is better interpreted by search engines
  bots)
• + Easier “client” upgrades

Cons

• – More expensive to implement
• – Harder to implement (I will talk about easy approach in next section)
• – More expensive to host and maintain (more expensive servers)
• – Requires more knowledge

SSR-Static

There is also another approach that idea is in middle of static serving and server side rendering. We create a webapp which we compile into static files. Those files we can host like an SSR app but it’s way lighter and easier to write and maintain. It requires recompilation of static files each time we change data on CMS. This solution is very simple and the implementation can be very easy.

Summary

When we want to create a small website we can go to Client-Side solution or SSR-Static (for ex. react- static). If our main focus is SEO and performance of the website we go with SSR. Also if we are building bigger application (and more secure) we have to consider SSR.

Our company can help you decide which option suits you best and what technologies we should use to achieve the goal.