Server Side Rendering Vs Client Side Rendering

How Client Side Application works?

• The user sends a request to a website.
• The browser downloads the HTML and then the JS. Meanwhile, the user sees a loading symbol.
• After the browser fetches the JS, it makes API requests via AJAX to fetch the dynamic content and processes it to render the final content.
• After the server responds, the final content is rendered using DOM processing in the client’s browser.

Since this process involves fetching and processing data on the client-side, the process is called client-side rendering.

Client Side Rendering ( CSR )

In client side rendering with modern browsers, websites send very little HTML response to connection requests. This HTML response contains JavaScript codes that make up the content of the page. Unless these JavaScript codes are executed, the website is a blank page. The browser renders these JavaScript files, creates the content, and presents the web page to us.

Problems in CSR

• SEO
  Google crawlers do not understand JavaScript well. The Search Engine Bot is only able to handle apps with loading time around 300–400 ms.If loading takes longer, Google Bot sees a blank page.

• Long Loading Time
  Nobody likes to wait for the content to appear. Heavy apps are often too slow, frustrating, and less competitive, if not maintained well.
  Users with medium-price devices or slow internet connection will definitely have a struggle and more probably will complain about the poor UX.

How Server Side Application works?

• The user sends a request to a website.
• The server checks the resource, compiles and prepares the HTML content after traversing through server-side scripts lying within the page.
• This compiled HTML is sent to the client’s browser for further rendering and display.
• The browser downloads the HTML and makes the site visible to the end-user.
• The browser then downloads the Javascript (JS) and as it executes the JS, it makes the page interactive.

Server Side Rendering ( SSR )

In Server Side Rendering, all the burden of getting the dynamic content, converting it to HTML as a readable HTML response, and sending it to the browser is on the server. Hence, this process is called server-side rendering (SSR).

Benefits is SSR

• Search Engine Optimization
• Social Media Optimization
• Performance: Server side rendered pages will load faster if the user network bandwidth low
• User Experience

Conclusion

If you have suggestions please let me know in the comments section🙋‍♂️
Thank You!🖤
Please find the GitHub Repository for Java script Framework

For Angular Universal Server Side Rendering
For React Universal Server Side Rendering