May 4, 2014
November 25, 2019
Short story about rendering HTML, client side vs server side
A long time ago i have stared working on http://lastlog.it website. It was to be just another site with funny images related to IT. Shortly after this lastlog.it site has become a training ground for my experiments.
Things that have not changed since the beggining are Nginx and Postgresql. I use them to all my private projects and i don't think that it will change quickly. I'm still using server at Linode and file server for storing images at Rackspace.
At the beggining it was written in Django with a lot of additional libraries. Zurb Foundation for CSS, jQuery and another JS libraries on client side. It worked without problems. I have changed several times how it worked but after some time i wanted something more. It was boring. I didn't have better idea to create another site so i have started refactoring of lastlog.it.
And it happened. I'm a fan of JS. I have added AngularJS to my site, i have written controllers, removed some jQuery libraries. It worked on several pages. While further study of AngularJS i said: create a Single Page App!
And it happened again, let's write part of site once again. I have started on registration and login page. I have written a base for AngularJS application. HTML was served directly from Nginx without rendering on server side. I started changing backend. I wanted to change my Django application to get only JSON responses from all requests. And it was not easy and fun. After some time i've realized that i'm writing the same code that exist in Django but with JSON response instead of returning forms, html, etc. I did some research and i found that i can use additional extensions to Django for creating API. Then I asked myself: do i need all this code? The whole Django? Forms? Templates rendering? ADDITIONAL external applications to get LESS data from Django response?
And.. again. I started search something better to my needs. I don't want to write that Django is bad. It is very good framework. I have created a lot of smaller and bigger sites in Django. But in this case i wanted something different. I have choosed Pyramid. Next WOW! It is cool! I can choose what i want to use. I can write small application or add more libraries and write very big site! I have rewritten lastlog.it as API backend. I have written tests and next i stared working on client side.
A lot of learning, a lot of problems. I had a lot of ideas like infinity scrolling with lazy loading and returning to the same position when user click back button. A lot of nerves.
After some.. long time.. i have finished most important things. I have deployed site. I have added some images. I have fixed a lot of the problems.
I have enjoyed this for some time. I have noticed that serach engines can't see my site correctly. Social networks like Facebook, Google+, Linkedin also had a problems with reading the content. I have spent some time on creating a solution for this. Finally i'm using https://prerender.io.
And it is. My site is working, quite good. I have API backend with Pyramid framework, client server application in AngularJS, responsive site with Zurb Foundation Framework, SPA!, realtime forms validation, i'm not using python forms, not using html rendering on server side, i have a Nginx, Postgresql, Redis for cache, Python RQ for tasks, Rackspace for images, nodejs + phantomjs just for rendering and returning static content (hm..) for search engines and social networks. It's just the main things.
Then i have started writing this article to share my thoughts and do a small comparison between server side and client side rendering.
Ok, let's do a comparison between both solutions.
- I don't need additional servers or some scripts to return static site for search engines and social networks. (see above)
- I can do a lot of things faster because most of the time i need to focus on one technology, one programming language, etc. (basically i'm a python developer)
- It is easier to maintain and error catching. I can catch on the server most of the problems
- I don't need additional code/application for monitoring errors on client side.
- I don't need Yeoman ;-)
- Very responsive page. But i can do the same with small pure JS?
- I'm PRO! I can use the newest and trendy software!
- I need to write additional tests for JS code
- Client needs better hardware to render page in short time? (I don't know whether this is a good reason)
- I'm using AngularJS. When i wanted to add Google Analytics i have needed to write additional directive or add external plugin. The same for Adsense, AddThis, Disqus or event MomentJS. (and sometimes it happened that for example Adsense still does not rendering correctly)
At the moment I think that JS frameworks are very good the same as Single Page Application idea. Good example is of course Gmail. In this case SPA works very well. But what about sites like lastlog.it or even bigger sites when 90% of the site is changing after user action? Do i need waste my time to get the same effect? Seriously, i don't see any big difference between server side and client side rendering taking into account time loading. I can't see any big advantages of creating a site in SPA technology in this case.
If no one can stop me from changing decision then i'm starting next big refactoring ;-)