Server side vs Client side rendering : SEO Optimization
More than ever before we have more options to host an UI in the cloud. From complex to simple web pages, from business websites to video streaming platforms. Choosing the right type of hosting will improve the overall experience of the web page, with faster loading times and fluid experience.
Server-Side Rendering (SSR)
SSR Renders web Pages on the server and delivers it to the Brower(client). So all the heavy lifting is done at the server-side rather than the browser.
Users don't have to wait for the page to render on there browser since it’s rendered already by the Server. Think of SSR as a restaurant, you order food and food is made and bought to you.
Let’s say you are creating a new web page and want to attract many users. When web pages are server-side rendered, the crawlers can view the entire web page and starts indexing it.
SSR is always not the perfect candidate, the time to generate the web page could be very long due to data or application design and caching mechanism needs to be in place to overcome the issues of longer loading times which can tedious and expensive at times.
Pros
- Always up-to-date content.
- Fluid performance.
- SSR websites are easy to crawl by the search engines to index.
Cons
- Time to first byte to the user’s browser can be delayed.
- Dynamic web pages need to scale up or scale down to maintain the high volume of traffic, due to the high utilization of computing.
- It can be expensive to host.
Client-Side Rendering (CSR)
The modern framework like angular, react, etc. made web development a lot faster than before. These frameworks have component style architecture — meaning — the page can be divided into multiple components to tackle the problems easier and faster.
These frameworks generate the files to be deployed — which does not need a compute power on the server, rather these are hosted with a static web hosting features in the cloud storage. When a user requests the page, an empty HTML file with a bunch of scripts are returned to the browser and the browser executes the script to form the page. More like cooking at home if you compare it with the SSR.
Initial load times can be slower. Page load times can be improved significantly using PWA.
Pros
- Inexpensive to host in the cloud.
- Rich User Experience.
- A modern ever-growing community for the foreseeable future.
Cons
- Web pages can not be indexed by search engines due to empty HTML pages.
- Easily prone to Cross-site scripting (XSS) attacks.
- Memory leak issues with JavaScript while loading page.
- It requires significant computing to load the page on the browser and may struggle to load on mobile devices.
