CODEWITHSUNDEEP
javascriptclient-sideserverside-javascript
mohan babu
mohan babu

Reputation: 1448

Understanding the difference between Client Side Rendering and Server Side Rendering?

I am kind of in cross roads in the process of understanding the basic difference between Client Side Rendering and Server Side Rendering. After doing significant amount of research, here is my understanding

When we render on to the server it means:

You have a local server say Apache Tomcat, You host a web application
by clicking the run on server, It renders your HTML on the server.

I understand this completely. Now here starts my confusion:

Client Side Rendering?????

You host a web application without a local server???

I might be wrong, but this is what the conclusion it is taking me too.

I know, ReactJS does both serverSide Rendering and Client Side Rendering. However, I am not getting the basic difference between both these renderings.

Any help would be highly appreciated.

Upvotes: 1

Views: 573

Answers (1)

Quentin
Quentin

Reputation: 944530

"Rendering" in this context means "Assembling the document from various component parts".

With server side rendering, you would do all that on the server and then send a complete HTML document to the browser.

This is:

  • Traditional
  • Robust
  • Search engine friendly

With client side rendering you would use client side JavaScript to load a template and some data (using multiple requests) and then put them together in the browser to form a DOM and create a page.

This can provide performance benefits for subsequent pages (since less data is being fetched for them) although the cost of bootstrapping the initial page is usually higher.

Lack of robustness and search engine friendliness can be compensated for by combining the techniques. A new request for a page (any page) uses server side rendering, but following links trigger JavaScript to involve Ajax, the History API, and client side rendering. If you use server side JavaScript, you can reuse some of the same code for both (this is sometimes called Isomorphic JS).

Upvotes: 2

Related Questions