OHHI Blog

Intro

Look back a little of bit, we have several decades with hypertext, from static site to web3 (still too early stage).

I still remember first time I used computer and open a web site. In that time, all things in site is static files with hypertext link. Today, site is wonderful thing with ton of animations & medias.

Web go from static site to server side render(SSR) to client side render(CSR). Today, sound like we back to SSR. I point some different things in this post.

Before go further, I will explain a little of bit about SSR & SCR.

SSR

SSR is bring web to a dynamic world, we can render a site with dynamic content & more useful things. PHP is a famous web development language using SSR.

In the first time, web server with SSR is always render full HTML and work with pure HTTP. Now, SSR support transport content by Websocket & just send different content to client.

Remember in here, we work directly with data and small number of public APIs (almost is HTTP GET/POST).

In SSR, frontend(FE) and backend(BE) are united.

Today, some new framework like Phoenix has ton of improvement like just render different HTML and send to client (over Websocket) to update.

CSR

CSR is bring web to a higher level, web has much more interact site with tons of medias & animations.

In CSR way, frontend(FE) and backend(BE) are separated. Between BE & FE is an API layer (Rest API is the most common thing for CSR).

CSR reduce workload for server but for first time loading site it much more data need to load.

Remember CSR is better for scale but bring a lot of works for create & maintain APIs.

SSR vs CSR

Now, I try to compare SSR and CSR. I will add some uses for easy to understand.

Development phase:

In this phase, SSR is much more simple than CSR. SSR doesn't need to thing to much for design & adding Api layer. A fullstack dev can work smoothly from FE to BE.

A lot of api that mean we need more work to check compatible & security.

If you have a multi teams work same project, CSR is better for separating work between teams.

If you develop site with complex state, SSR is matched with you (doesn't require to sync state between server and client).

Deployment phase:

CSR bring complex to deploy we need to setup & verify thing like api gateway & api version.

For site need to get data from several BEs, CSR is the best choice.

With SSR we need more resource in server side.

CSR is easy to scale & isolation but its downside is hard to troubleshooting.

Maintain phase:

CSR has more APIs to maintain. SSR almost code run in server side then we don't need care about compatible.

Now we have ton of devices, I will try to figure out.

Security

CSR has a lot of work to make sure sites is safe.

SSR is much more simple than CSR.

PC/Laptop

In this type of device, good resource (RAM/CPU) and user behaviors (open a site in long time for work) then CSR is good for this.

SSR is good for short live site.

Mobile

Sound like CSR has it limitations, bandwidth of network is an issue. Limited resource of low end device can impact performance for CSR.

User behavior (short live) is good for SSR (and reduce code 4/5G for user).

IoT

I think CSR has a big issue in here, not much resource for CSR can run.

SSR is good for IoT, it doesn't require good resource for loading sites.

Today web tech

Both SSR & CSR have use new tech to improve like using websocket for reduce data need to transfer between server & client).

SSR has improve the way of render like just check changed state and render different contend and update it in client side.

CSR has reduce data (js/css) need to load in the first time.

Conslusion

SSR is better in small team (with fullstack devs), small product and large range of devices. Better for stateful site.

CSR is better in large site (complex & scalable site) or web app with workload run in client side.