node.js + express.js & hogan.js: returns a blank page sometimes

Question

Everything in this app works fine but sometimes i get a blank page rendered instead of the homepage (or any other page for that matter). Then when i change something small in the affected view (like for instance add a space, or .) the page renders normal again.

I think that the problem may be a async issue but i can't locate it.

I'm using:

• node.js
• express.js
• consolidate
• hogan.js

UPDATE 1:

This seems to happen only in the safari browser, very strange, maybe it's a css thing, i'll investigate.

UPDATE 2:

It's definitely not a CSS thing.

The main express app setup:

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    dependencies
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        var express = require("express")
        var cons = require("consolidate")
        var app = express()

        var path = require("path")
        var index = require("./routes/index")

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    configure
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.configure(function(){

            app.engine("html", cons.hogan)
            app.set("view engine", "html")
            app.set("views", __dirname + "/views")
            app.use(express.static(path.join(__dirname, "public")))

        })

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    routes
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.get("/", index.index)
        app.get("/hire", index.hire)
        app.get("/hire/:id/:nr", index.hirePerson)
        app.get("/books", index.books)

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    listen
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.listen(2020)

Then in my index.js route file:

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
settings
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    var appURL =  new function(){

        this.home = "/",
        this.hire = this.home + "hire"
        this.books = this.home + "books"
        this.projects = this.home + "projects"
        this.portfolio = this.home + "portfolio"

    }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
routes
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

exports.index = function(req, res){


    res.render("index.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.hire = function(req, res){

    res.render("hire.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.books = function(req, res){

    res.render("books.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.hirePerson = function(req, res){

    res.render("hireDetail.html", {id:req.params.id, nr:req.params.nr})


}

One of my views (index.html)

{{> header}}


    <section class="layoutIndex"><div class="layoutIndex-container">

        <header class="layoutIndex-header">

            <nav class="navHeader">

                <h1 class="navHeader-logo"><a class="bf-logo" href="{{url.home}}"></a><span>Basing.com</span></h1>

                <h2 class="navHeader-slogan">HTML / CSS / JS werkgroep</h2>

                <ul class="navHeader-buttons modelTernary">
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.hire}}">Hire us</a></li>
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.books}}">Books</a></li>
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.projects}}">Projects</a></li>
                </ul>

            </nav>

        </header>

        <section class="layoutIndex-articles">

            <article class="books">

                <h2>Books <time>2014</time></h2>

                <ul class="listArticles">
                    <li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
                    <li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
                </ul>

            </article>

            <div class="hrLight"></div>

            <article class="projects">

                <h2>Projects</h2>

                <h3 class="icon"><a href=""><i class="bf-logo"></i>CSS Objects: a front-end methodology</a></h3>

            </article>

        </section>

    </div></section>

{{> footer}}

Answer 1

I'm pretty sure we're seeing the 304 bug here.

More here: http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/

Basically, when you server returns a "304 - Not modified" response. Safari breaks it.

The way to fix this is to disable "etag" responses (you could target only ios requests) by disabling the 'etag'.

app.disable('etag');

Express recently integrated this here: https://github.com/visionmedia/express/commit/610e172fcf9306bd5812bb2bae8904c23e0e8043

So in your case (disabling etag globally):

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
configure
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    app.configure(function(){

        app.engine("html", cons.hogan)
        app.set("view engine", "html")
        app.set("views", __dirname + "/views")
        app.use(express.static(path.join(__dirname, "public")))
        app.disable('etag');
    });

Fair warning: I am still getting 304 headers with this, but safari doesn't seem to show the blank white page unless I double tap the reload button. Either way, if I single tap, the page seems to load reliably.