reimplement prime cache feature

[PatrickJS]

add prime cache feature to reuse the response from the server for the client

related
angular/universal-starter#61
angular/universal-starter#62

[jeffwhelpley]

@jhades you mention in angular/universal-starter#62 that there was a flicker. were you using preboot with buffering turned on? @gdi2290 have you seen this as well.

In short for whoever checks out this thread, there most definitely will not be a flicker or jank when this library is released. I did have this working at one point, but an issue may have come up over the past couple weeks as I have been pulled away on other things. I will try out the latest universal starter and see if I can re-create.

[jhades]

@jeffwhelpley Im using the same config as in the starter which is currently preboot:false, I've just reproduced it now by cloning the starter repo ( at time of writing with "angular2": "2.0.0-beta.15",
"angular2-universal": "0.92.1"), and starting it.

We can see the ajax request being processed twice when we hit http://localhost:3000/: one time on the server do do the server rendering, and a second time once the browser starts up an XHR request gets sent.

[jeffwhelpley]

@jhades let's separate two thing. First as far as not calling the API twice, that is a feature which has not been implemented yet. That is the focus of this GitHub issue and Patrick has already started work on this.

The second issue is screen flicker and poor UX. Even if there are two API calls it should not affect UX at all. The reason is that Preboot was set up to smoothly transition your client view to server view. So if you are seeing flickering it means preboot isn't doing its job and we should open a separate issue.

Let me know if you can this morning. We are having a team nesting at noon EST and I will bring this up then.

[jhades]

@jeffwhelpley what i called flickering is that the page coming from the server gets rendered once, then a Ajax requests are made and the whole page is re-rendered again.

You can see the page being rebuilt from top to bottom.

Initially I thought this yank effect of seeing a page being streched from top to bottom was being caused by the duplicate HTTP request. now im not sure if thats the case.

As you mention that would not cause the issue because the data is the same.

The yank is very noticeable, even just by running in universal-starter. Its like all the templates are rebuilt again. Like the whole app is recompiled and the server rendered content fully replaced by a complete new client bootstrap.

As you mention, it looks like a separate issue.

[jeffwhelpley]

@jhades so if you visually see the page being built then preboot buffering is either not on or not working correctly. Would it be possible to take a screen capture video of what you are seeing?

Again, though, don't worry about the app re-running. That part shouldn't matter if preboot is working correctly because the user should never notice anything.

[jhades]

@jeffwhelpley this is in slow motion what i see on Chrome on a Mac - demo.

On closer inspection, it looks like the yank is caused by the ajax request after all?

We can see the server side ajax data get rendered, and then disappear (but the rest of the page is still there), and the data gets back from the server and it gets displayed again.

[jeffwhelpley]

@jhades OK, I opened a separate issue #359 for this and I will be looking into it over the weekend. You can check back there for updates on the jank and then in this issue for updates on the consolidation of API calls.

[jhades]

@jeffwhelpley OK great, thxs