Next.js: Code splitting with one SPA page

[thisbejim]

Because an application re-renders when changing a page it seems like it is not possible to have a persistent navbar that doesn't flicker across multiple pages (frame rate doesn't catch first flicker):

The solution in this comment here is to have only one page (index.js) and just change the route query and use that to render whatever sub components/pages you'd like, as demonstrated in nextgram and react-overdrive. This means you can just mount the navbar once, which is great!

My only concern is that by going the one index page route you lose the automatic code splitting that comes with next - how might you address that in next's current state? I can see there are some conversations about supporting import in the future but what can we do today?

[thisbejim]

I thought this was a relevant snippet from the new react-router 4.0 docs on Code-splitting + server rendering:

We’ve tried and failed a couple of times. What we learned:

1. You need synchronous module resolution on the server so you can get those bundles in the initial render.
2. You need to load all the bundles in the client that were involved in the server render before rendering so that the client render is the same as the server render. (The trickiest part, I think its possible but this is where I gave up.)
3. You need asynchronous resolution for the rest of the client app’s life.
   We determined that google was indexing our sites well enough for our needs without server rendering, so we dropped it in favor of code-splitting + service worker caching. Godspeed those who attempt the server-rendered, code-split apps.

[arunoda]

@thisbejim the flick is due to the page fetching. Try doing some prefetching.
So, currently there's no more information than you linked in the issue description.

We'll land import support soon and we are experimenting it here.

[arunoda]

I'm gonna close this since we've a separate issue where we discussed about this.
Thanks for mentioning that in the description.

[rauchg]

@thisbejim it's absolutely possible. Go to http://zeit.co and navigate around. I also have recently come up with a very simple solution to do lazy loading + route transitions which I'll share soon!

[thisbejim]

Thanks @rauchg and yes I can confirm this is definitely possible, this was down to user error on my part. Looking forward to hearing about your new lazy loading solution!

[MarcMagnin]

@rauchg @thisbejim @arunoda any news about that? I'm quite interested too!

[MarcMagnin]

Awesome, so I've tried import and it seems to work fine but how do you refresh a dynamic component? (https://github.com/zeit/next.js/tree/import-then/examples/with-dynamic-import)

[arunoda]

@MarcMagnin what do you mean by refreshing?

[MarcMagnin]

Sorry I was meaning that I want to change that Component on the fly by clicking on a button ie:
Something like:

[arunoda]

@MarcMagnin please open a new issue for that. I know what you are referring to.
But it's not related here.

[MarcMagnin]

ok will do.

[EmperiorEric]

@thisbejim @rauchg are there any tutorials/walk-throughs for how this working? We have an application thats re rendering the navigation, background, etc and we're trying to get that to stop but its very unclear how to make that happen.