Mixed Knockout and Server side rendering

Question

I have some pages that I need to render via the server side to make them search engine friendly. For search engines, it should function as a classic website. For users, I want to make the interface more interactive. My thought is to render the page server side, then use knockout and jquery to fetch the data again via ajax and bind it to the page.

I'm concerned about having flashes of no content, or duplicated content. Is there a best practice/pattern for cases like this?

The process would look like this:

1. Render page using server side, including a long list of html elements.
2. Use jQuery to fetch the same data already rendered to the page.
3. Clear server side content with jquery.
4. Bind ajax to knockout template, which effectively renders the page as it was previously.
5. Subsequent clicks to page through data by a normal user uses ajax and knockout to render the data.
6. Search engine can follow standard links to see the same data as the user.

The part I'm hung up on is how to pre-render, clear, and re-render with knockout/jquery.

Maybe my thought process is off a bit, I'd love to hear feedback.

Answer 1

Its doable, basically populate your data from server side, but add the "data-bind" attributes to your inputs, from knockout part, set your observables by fetching the field values.

here is a sample for a simple form:

MVC Part:

public ActionResult Index()
{
    Person newPerson = new Person()
    {
        FirstName = "John",
        LastName = "Smith"
    };

    return View(newPerson);
}

And your View:

<div id="main">
    <div>
        First Name:
        @Html.TextBoxFor(p => p.FirstName, new { data-bind = "value: firstName" })
    </div>
    <div>
        Last Name:
        @Html.TextBoxFor(p => p.LastName, new { data-bind = "value: lastName"})
    </div>

    <input type="button" data-bind="click: showValues" value="Show" />
</div>

And finally your knockout part:

var personViewModel = function () {

    var self = this;

    self.firstName = ko.observable($("#FirstName").val());
    self.lastName = ko.observable($("#LastName").val());

    self.showValues = function () {
        alert(self.firstName() + " " + self.lastName());
    }
};

ko.applyBindings(new personViewModel());

Hope that works for your case.

EDIT: Fixing typo of data_bind to data-bind

Answer 2

You can render knockout using Node and a simple DOM implementation like domino:

• Gist - https://gist.github.com/kaheglar/10afd535e4970ad9ec6accd62b6ceb03.
• Runable example - https://runkit.com/kaheglar/58d4df9993b2030014579f47.

Answer 3

This uses Durandal in addition to Knockout, but I had the same issue and this was the solution I came up with:

https://github.com/bestguy/durandal-delayed-composition

Answer 4

You could try the knockout pre-rendered binding handler. It basically does what Tamim suggested, but it handles foreach and works for any data-bind.

https://www.npmjs.com/package/knockout-pre-rendered

You could also consider using React, which is "universal" - you could render the page on the server and on the client with the same code. Since React uses a diff-engine there would be no flashing when the server rendered content is replaced by the client rendered content.

http://facebook.github.io/react/

http://reactjs.net/

Answer 5

It is also possible to use peTemplate binding. For tempate and foreach binding, it doesn't regenerate HTML and it instead uses the server side generated HTML. The only thing you need to do is annotating the HTML in server by few attributes that specify the key of data.