Client side v/s Server side rendering

Server-side rendering

Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.

Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The time taken to serve the request depends on the following factors;

  • Internet speed.
  • Location of the server.
  • Users trying to access the site.
  • Optimization of the website.

Once the request is done processing, your browser displays the rendered HTML. If you then go to another website then the above steps are repeated.It doesn’t matter if the page is entirely new or has a few different items, the browser would render the entire HTML again.

On the bright side, server side rendering is great for SEO. Search engines are able to index your content and crawl it.

 

Client side rendering

Client side rendering is about rendering content using Javascript. Here, instead of getting content from HTML, you are getting a bare bones HTML document and the content is rendered using Javascript.

This is different from using server side rendering because in this case, the server is only responsible for the bare minimum of the website. The actual content is loaded by Javascript. This is much faster since, you are only loading a small fraction of the content, instead of loading the entire page.

Since the content is not rendered until after the page is loaded, SEO for the website will take a hit. Also, the browser will not be able to load until all Javascript is downloaded to the browser.

 

Pros and Cons of each approach.

Server side Pros:

  • The search engine can crawl the site for better SEO.
  • The initial page load is faster.
  • Great for static sites.

Server side Cons:

  • Frequent server reqeusts.
  • Overall slow page rendering.
  • Full page reloads.
  • Non-rich site interactions.

 

Client side Pros:

  • Rich site interactions.
  • Fast website rendering after initial load,
  • Great for web applications.

Client side Cons:

  • Low SEO.
  • Initial load might require more time.
  • Requires external libraries.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s