Node.js: Client-Side Templating v/s Server-Side Templating

Question

I have been trying to learn Node.js for a few days now, but there is one thing I am confused about.

What is the difference between a client-side templating solution like JQuery templates and a server-side solution like Jade for Node.js?

What are the uses for each? Where are they used? Can they be used together? Is there an exampe of both of them being used together if so?

I just can't get my head around this. Would be nice to have an overview of things from somebody around here...

Answer 1

The biggest thing that should be considered about client-side vs server-side templating is that client-side templating will not work if JavaScript is disabled on the client for whatever reasons.

Otherwise it's not such a big difference. It's mostly up to whether you want to generate your markup on the server, or on the client.

A typical reason to use client-side templates is if you have an application which loads more data from the server using ajax, websockets or such. In such a case you might want to have a client-side template for rendering the newly loaded data.

For example:

In an application I wrote, I used ejs templates on server to generate the basic markup: The head, body, footer, etc. - content which doesn't change.

The application uses socket.io, which sends the client some events and data from the server. To display this data, I used Knockoutjs' client-side templating.

So in my case it's kind of a hybrid approach. The reason I did it like this is because the markup I generate on the server will immediately show once the page loads. The data which comes from socket.io could have also been rendered into HTML on the server, but that would require more bandwidth to send than sending simple JSON objects or such, so I opted to render them on the client.

Obviously I could have used a client-side template for the entire site, but I saw no benefit in rendering the static parts on the client. It would have just made the client-side code of my application more complicated.