Categories
tech

Client-Side Rendering versus Server-Side Rendering!

Since the dawn of the web history, the only way to get your website on the screen was by using SSR. You had to upload your HTML & styles to the server, it compiled everything, and then you were ready to browse with fully populated HTML.

History of the rendering solution

Since the dawn of the web history, the only way to get your website on the screen was by using SSR. You had to upload your HTML & styles to the server, it compiled everything, and then you were ready to browse with fully populated HTML.

However, these were times where the pages mainly contained pictures and text, like the first website in history → http://info.cern.ch/, which looks like this:

Quickly jumping to nowadays, there’s no longer the case. Current sites are closer to web applications like Facebook, Twitter, or eBay. The world of the web has grown and become more demanding. The needs of users have increased, people want to send messages, get it in real-time, watch videos, have more interaction with the website. Developers have started to render websites on the client-side using frameworks like angular, backbone, ember, react.js e.t.c.

If you are asking yourself which method is better, CSR or SSR – first of all, you have to ask yourself – what do you want to build or achieve?

  • Learn React?
  • Create a Single Page App?
  • Want to build the frontend for a new web application?
  • Build a website is mostly static?

On this choice, it depends on what you should decide on.

Background

Whenever you open a website, your browser makes a request to the server to get the content of the web – HTML, assets, styles, and the rest of the data.

Request and response speed depends on a few things:

  • your internet connection speed
  • distance between you and the server
  • CDN optimization
  • how many users are trying to open your site in one moment
  • how the website is optimized to be loaded

When the webpage is loaded, it can either be rendered in the browser (client-side rendering) or on the server (server-side rendering). Each is slightly different and has its pros and cons.

Client-Side Rendering

What is client-side rendering?

With a client-side rendering solution, when the user opens your website, his browser makes a request to the server, and the user gets a response with a single HTML file without any content, loading screen, e.t.c. It’s a blank page until the browser fetches all linked JavaScripts and lets the browser compile everything before rendering the content.

Client-side rendering pros:

  • Fast render after initial load
  • Faster navigation
  • Lower server load
  • Remarkable for web apps

Client-side rendering cons:

  • slower initial load
  • unpredictable performance – you never know if your user will open and ‘compile’ your website on a mobile device with a very slow internet connection or not updated browser
  • Client-side routing solutions can delay web crawling.
  • SEO – if you not implemented correctly
  • Initial req loads the page, CSS, layout, js,
  • some or all content is not included

Server-side rendering

What is server-side rendering?

As I mentioned above, – SSR is not a new concept. It has been used since the first backend solution, like PHP or JAVA. Server-side rendering is a method to render your website. When the user opens your page, his browser makes a request to the server, and the server generates ready to provide HTML.

Server-side rendering pros:

  • SEO friendly – SSR guarantees your pages are easily indexable by search engines
  • Better performance for the user – User will see the content faster
  • Social Media Optimization: When people try to post your link on Facebook, Twitter, etc. then a nice preview will show up with the page title, description, and image.
  • Shared code with backend node
  • User-machine is less busy
  • Best for static sites

Server-side rendering cons:

  • TTFB (Time to first byte) is slower; your server has to spend some time to prepare HTML for your page instead of sending almost empty HTML doc with link to javascript
  • The server will be busier, can execute fewer request per second
  • HTML doc will be bigger
  • The page is viewable sooner, but it’s not interactive and the beginning, a user has to wait until react will be done executing
  • Full page reload after routes change

Example page

To make a comparison of these two methods, let’s use a very simple website with one image.

Client-side rendering – code example

Bellow you can check example HTML served to the user in the react application (create-react-app). As you can see there is no image yet, only simple HTML with linked js files.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <title>React App</title>
    <link href="/static/css/main.64d7c8c6.chunk.css" rel="stylesheet">
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/2.1cca17c9.chunk.js"></script>
    <script src="/static/js/main.234a2bc6.chunk.js"></script>
</body>
</html>

Server-side rendering – code example

Bellow you can check our example website on next.js. As you can see, the main difference is that we already have HTML with image, ready to render.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta charSet="utf-8" />
    <title class="jsx-3505738252">Home</title>
    <link rel="icon" href="/favicon.ico" class="jsx-3505738252" />
    <meta name="next-head-count" content="4" />
    <link rel="preload" href="/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/index.js" as="script" />
    <link rel="preload" href="/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/_app.js" as="script" />
    <link rel="preload" href="/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js" as="script" />
    <link rel="preload" href="/_next/static/chunks/commons.4a179d4644f468f50fbf.js" as="script" />
    <link rel="preload" href="/_next/static/runtime/main-6bef3842d6b2422a0213.js" as="script" />
</head>
<body>
    <div id="__next">
        <div class="jsx-3505738252">
            <div class="jsx-3505738252"><img cassName="img" src="/header.png" class="jsx-3505738252" /></div>
        </div>
    </div>
    <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"6AZVKi7KqSIP8pz3uCg0R","nextExport":true,"autoExport":true}</script>
    <script async="" data-next-page="/" src="/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/index.js"></script>
    <script async="" data-next-page="/_app" src="/_next/static/6AZVKi7KqSIP8pz3uCg0R/pages/_app.js"></script>
    <script src="/_next/static/runtime/webpack-035ac2b14bde147cb4a8.js" async=""></script>
    <script src="/_next/static/chunks/commons.4a179d4644f468f50fbf.js" async=""></script>
    <script src="/_next/static/runtime/main-6bef3842d6b2422a0213.js" async=""></script>
</body>
</html>

Performance

To understand a nomenclature of the all graphs bellow I will use this image as an explanation, thanks to Google: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centricperformancemetrics

CSR performance

  • Simulated Slow 4G, 4x CPU slowdown

SSR performance

  • Simulated Slow 4G, 4x CPU slowdown
  • No throttling

Conclusions

  • both apps become viewable and interactable after 1-1,5 seconds, in this simple example SSR is a little bit faster
  • in server-side-rendering user will get HTML rendered much faster than in client-side-rendering
  • in client-side-rendering, non-content can be displayed until browser will download all the js files
  • DOM Content is loaded much faster in SSR than in CSR; in client-side-rendering, you have to wait to download js
  • first Contentful Paint is also faster at SSR
  • a blank page is much longer on client-side-rendering, as a developer you have to avoid it using some loader, or loading screen
  • image is faster available with SSR compared to CSR, because when using CSR the images cannot be downloaded before linked js files, HTML is not ready,

What should I use?

  • If you want to build site which is mostly static (blog, portfolio, landing page), use Gatsby, it’s not SSR, but it pre-renders the website into HTML at the build time
  • If you want to build a web app with react, and you care about SEO, easier social media optimization and faster render for user you should think about SSR and framework like next.js
  • If you building a SPA (single page application), and you don’t want to configure everything on the server side like: i18n, router e.t.c. you should use create-react-app

124
Leave a Reply

avatar
124 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Aum PatelJB PlasterAlex Phellmiley cryusAnonymous Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Anonymous
Guest
Anonymous

SUCK D1ICK

miley cryus
Guest

Your article Awesome Thanks for this information, very informative as well as Modern.

Alex Phell
Guest

I never used the Gatsby, thanks for the advice. And in general it turned out to be a very interesting retrospective!

JB Plaster
Guest

thank you!!!
JB Industries
Leading producer of Plaster of Paris, Wall putty, Vermigyp, Bond, fastners & screws.

trackback

popo kaldırma

[…]Here is a good Blog You might Obtain Interesting that we Encourage You[…]

trackback

zborsa giriş

[…]Every after in a although we pick blogs that we study. Listed below would be the most current web pages that we choose […]

trackback

social media marketing hrdf claimable

[…]usually posts some very intriguing stuff like this. If you are new to this site[…]

trackback

eft saatleri

[…]below you will obtain the link to some internet sites that we consider you should visit[…]

trackback

Google

Here are several of the web-sites we recommend for our visitors.

trackback

Muha Meds Watermelon 1000mg

[…]Here are some of the websites we advocate for our visitors[…]

trackback

Nahrungsergänzungsmittel

[…]check beneath, are some absolutely unrelated web-sites to ours, nonetheless, they’re most trustworthy sources that we use[…]

trackback

Facebook marketing Hrdf training

[…]just beneath, are numerous absolutely not related sites to ours, having said that, they may be certainly really worth going over[…]

trackback

Tenuate retard

[…]always a massive fan of linking to bloggers that I really like but do not get a lot of link really like from[…]

trackback

1000mg thc vape juice

[…]here are some hyperlinks to internet sites that we link to since we think they’re really worth visiting[…]

trackback

Fish scale coke

[…]usually posts some incredibly fascinating stuff like this. If you are new to this site[…]

trackback

Undergraduate Kenya

[…]Sites of interest we’ve a link to[…]

trackback

Buy Xanax SR 2 mg online

[…]below you’ll obtain the link to some sites that we consider it is best to visit[…]

trackback

Buy Weed Online

[…]although internet websites we backlink to below are considerably not connected to ours, we really feel they may be truly worth a go as a result of, so possess a look[…]

trackback

canadapharmacy.com

[…]The information and facts mentioned in the report are a few of the best available […]

trackback

brazzers

[…]Every after in a even though we choose blogs that we read. Listed below would be the most up-to-date web pages that we opt for […]

trackback

film

[…]here are some links to internet sites that we link to since we think they may be really worth visiting[…]

trackback

T-shirt printing Cambridge

[…]the time to read or go to the material or web sites we have linked to below the[…]

trackback

canada u.s. prescriptions

[…]usually posts some really fascinating stuff like this. If you are new to this site[…]

trackback

Authentic earrings

[…]although sites we backlink to beneath are considerably not related to ours, we really feel they are in fact really worth a go via, so have a look[…]

trackback

pc app free download

[…]always a massive fan of linking to bloggers that I really like but do not get lots of link like from[…]

trackback

backlink

[…]very handful of internet sites that occur to become detailed below, from our point of view are undoubtedly well worth checking out[…]

trackback

pubg mobile hile

[…]usually posts some really interesting stuff like this. If you’re new to this site[…]

trackback

buy bitcoin canada

[…]very few internet sites that occur to be in depth below, from our point of view are undoubtedly effectively really worth checking out[…]

trackback

Best Free Video Editing Software for PC

[…]check below, are some totally unrelated sites to ours, however, they’re most trustworthy sources that we use[…]

trackback

CARGO VESSEL

[…]we prefer to honor quite a few other web web-sites around the internet, even though they aren’t linked to us, by linking to them. Below are some webpages really worth checking out[…]

trackback

crypto canada

[…]Here is a good Blog You might Obtain Interesting that we Encourage You[…]

trackback

online pharmacy usa (800) 901-0041

[…]please visit the web-sites we comply with, which includes this a single, as it represents our picks from the web[…]

trackback

ed pills online pharmacy

[…]very few internet sites that happen to become comprehensive beneath, from our point of view are undoubtedly very well really worth checking out[…]

trackback

Buy Adderall Capsules

[…]usually posts some very interesting stuff like this. If you’re new to this site[…]

trackback

sphynx cat for sale

[…]we like to honor several other web internet sites around the web, even when they aren’t linked to us, by linking to them. Beneath are some webpages really worth checking out[…]

trackback

amazon parrot

[…]we came across a cool site that you may possibly love. Take a look if you want[…]

trackback

macaw parrot

[…]one of our guests not long ago proposed the following website[…]

trackback

baby toucan

[…]usually posts some really exciting stuff like this. If you are new to this site[…]

trackback

yaren alaca

[…]Here are several of the internet sites we advocate for our visitors[…]

trackback

Buy Atarax 25mg online

[…]always a massive fan of linking to bloggers that I like but do not get a good deal of link enjoy from[…]

trackback

HUMMER

[…]below you’ll discover the link to some internet sites that we consider you need to visit[…]

trackback

usa services online

[…]here are some links to web-sites that we link to because we feel they’re really worth visiting[…]

trackback

Buy shatter online

[…]always a large fan of linking to bloggers that I appreciate but don’t get a great deal of link like from[…]

trackback

aðýr ceza avukatý

[…]Here are several of the internet sites we advocate for our visitors[…]

trackback

dildo

[…]one of our guests recently recommended the following website[…]

trackback

güvenlik soruþturmasýnda nelere bakýlýr

[…]we prefer to honor quite a few other web internet sites around the net, even when they aren’t linked to us, by linking to them. Below are some webpages really worth checking out[…]

trackback

샌즈카지노

[…]we prefer to honor many other web web pages around the net, even if they aren’t linked to us, by linking to them. Underneath are some webpages worth checking out[…]

trackback

우리카지노

[…]just beneath, are many totally not associated web sites to ours, nevertheless, they’re surely worth going over[…]

trackback

퍼스트카지노

[…]just beneath, are various totally not related internet sites to ours, even so, they’re certainly worth going over[…]

trackback

메리트카지노

[…]Here is a good Weblog You might Uncover Fascinating that we Encourage You[…]