Strategy Issue: Flat / Static Pages within a RESTful app

I'm using Backbone.js to connect to a Django backend via tastypie. I've got things figured out for my dynamic content, but I am wondering what to do about my FAQ / About / Contact pages. Because I want to have an uninterrupted user experience, no waiting for the page to lo开发者_如何学编程ad in between links, I'm wondering where to load the data for these flat pages from.

I don't want to overarchitect here, because these are brochure pages with non-dynamic content. In short, layout is important, and they don't need a CMS.

So do I have the pages already in my main index.html, and just show them when needed? This seems dirty to me.

Do I have Django store the html for these pages in a Textarea set up to accept html, and spit the html out as JSON through tastypie when needed? Ugh, that sounds dirty to me too.

Or a hybrid where django only spits out the relevant data to fill in the html that's already defined in my index.html-- This sounds correct, but like way too much work, I don't want to define db models for pages that as I've said, don't need a CMS.

I'm hoping I'm way off base with all these approaches, and you have something much better to solve my dilemma.

---

Your first idea of including them in the main index.html and showing them as needed seems quite reasonable, but has a couple drawbacks:

• Your index page is heavier and thus slower to load than it needs to be
• Your brochure pages aren't logically separated in your codebase

You can fix both of these by having the HTML for them loaded dynamically after the index.html loads. You'd still use the same client-side code to show the pages when the user clicks to them as if it were embedded in the main HTML file, but instead of including the HTML in the initial index.html file...

<div id="faq-page">
   <h1>FAQ</h1>
   ...
</div>

have blank divs and an event to load them through AJAX after the main page has rendered. I'm not sure if you're using jquery, but if so, the code would look like this

<div id="faq-page"></div>
<script>
    $(function() {
        $("#faq-page").hide() // ensure it doesn't display too early
                      .load("/include/faq.html");  // async load the content from server
    });
</script>

Now when the user hits the FAQ link in your app, the page will appear as fast as possible. If the page has had time to load (normally) it will show up instantly. If they happen to hit the link before it's loaded, it will show up as soon as the server responds.

You set up /include/faq.html however you'd like on the server side.