Best way to handle Javascript rendering vs. Server side template [duplicate]

Question

This question already has answers here:

Closed 8 years ago.

Possible Duplicate:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking

I am using Backbone.js and bunch of other modules to handle Single Page App method. My goals:

1. The site must be SEO-friendly

2. Server bootstrap html code to client and data stored in JSON models.

3. Sub-sequence actions are all handled by Javascript (e.g. render new screen, change url using Backbone router).

My question is: how to structure the server to align with Javascript on each router url and keep it DRY?

For example: if user goes to wwww.mysite.com and then click on some link to go to www.mysite.com/page/2, it must be the same as having him to go to www.mysite.com/page/2 directly on first load.

This seems to be an old topic but I cannot find any solid resource about best way to handle this on server side without repeating the template code in Javascript.

One option I am thinking is to split backend into Node.js and another server to handle API only. The Node.js server somehow share the template construction code as the Javascript frontend

Anyways, love to hear some advice and apology if this is not the right place to ask such question.

Answer 1

I would treat my node server as just a REST interface to my data. I would then handle everything else client-side: I could load templates using require.js with a template plugin like jade, do all my routing using Backbone.Router, and then access my models and collections using Backbone.sync methods (like collection.fetch().)

So for example, when a user accesses "mysite.com/#page/2", I could get my Backbone router to load and display whatever template would be on the page. If I happened to need a list of products to display on that page, then I could make my product collection do a product.fetch(). That would send a GET request to "/products" -- or whatever URL is specified in product.url. My node server would then respond with an array of product objects that the view my collection belongs to could use in rendering itself.