21

What are the pros/cons of using less server side vs client side in a live production environment? Why would i want to convert my less to static css and use that when going live instead? As i understand it the css is cached both server and client side so speed shouldn't be an issue and js not being available isnt an issue as my app is very dependent on javascript so if it is not available i would have bigger problems. I dont fully understand how the server side compilation works....thanks

newbie_86
  • 4,520
  • 17
  • 58
  • 89

2 Answers2

28

I worked on a large project that used LESS. The main issue we ran into compiling it client-side (in development environments) is that since client-side compilation requires JavaScript and printing renders the page to paper without JavaScript enabled, so whenever anyone printed a page it would come out completely unstyled. Even if your application uses heavy amounts of JavaScript like ours, if you want to support printing you need to compile server-side or provide static CSS.

The solution that worked best for us was to run node.js to compile LESS server-side on the fly while in development environments, then pre-compile it out to a single gzipped css file when deploying the site to production.

Pre-compiling also reduces the number of individual file requests being made by the client from dozens per page in our case (one per each LESS file) to just single CSS file, and makes loading quicker by avoiding the compilation step (which client-side less.js has to run every single time a new page is navigated to before the page can begin rendering.)

I wouldn't recommend compiling it server-side on the fly in a live production environment, because that'll add a lot of unnecessary processor load. If you compile it in advance it'll consume no more server resources than a single ordinary CSS file.

Richard Connamacher
  • 3,115
  • 19
  • 21
  • thanks, just to confirm i've understood...does this mean on the client side, each time a page is loaded the less is processed. on the server side, the less is processed only for the first page thats loaded and then cached and not processed again? – newbie_86 Mar 18 '12 at 15:18
  • 1
    Yes, on the client side it has to be compiled every time a page is viewed. If you have a good server-side implementation it will cache the compiled CSS and serve that until your LESS source files change. But unless you plan on changing stylesheets on the fly you can just as easily compile your LESS in advance when you first deploy it into production, saving it as a flat CSS file referenced directly from your HTML. That will prevent node.js from even having to run and is by far the most efficient way of serving LESS. – Richard Connamacher Mar 18 '12 at 23:06
  • 1
    Also: Better to compile the CSS once as part of a deploy script than to count on the compilation working automatically by the server. – mlissner May 01 '12 at 21:44
  • I developed a solution that use Javascript compilation from the client side and let you customize your less variables and see the results instantly and you can save the compiled css if you want. It is developed in Grails. I can put that in a github repository if you like. As a drawback maybe you can have troubles with XSS if you allow the client to make changes in compiled css, but I don't know that. As a workaround you can install node.js to compile the css in the server. – mpccolorado Jul 18 '12 at 12:07
  • mpcolorado: if you're using grails, you should check out the java LESS servlet and compiler at http://www.asual.com/lesscss/. – Richard Connamacher Jul 18 '12 at 19:24
5

The browser can only cache the data it receives from the server. This does not include the CSS compiled in the browser from less (HTML5 local storage mechanisms aside). This means that the browser would have to compile the less files to CSS each time they're loaded - even if the less file is loaded from browser cache instead of from the server.

abesto
  • 2,331
  • 16
  • 28