Next.js: Document `next-prefetch`

[rauchg]

next-prefetch is a substitute for <Link /> (builds on top of it) that:

• By default prefetches the given component using a ServiceWorker
• It would have an option prefetch={false} if you want to turn it off
• It would have an option fallbackWorker={true} to fallback to a web worker if the browser doesn't support service workers.

This is the technique that we use at ▲ZEIT to make everything really speedy.
We need to extract it out of our impl or someone can write this from scratch.

Installing a service worker is pretty intrusive, so I don't think this is something we want in core. We can write it as a separate module.

[pranaygp]

I'd like to help with this. Has there been a decision on whether it's going to be rewritten or if it's gonna be extracted from the zeit.co implementation? If it needs to be written from scratch, we should create a new repo for this to start working on this implementation.

[sedubois]

That would be fantastic!

React-boilerplate seems to be doing similar, and it falls back to AppCache on older browsers. It seems to rely on Webpack offline-plugin, would it help here?

It seems like page prefetching and caching can be a great feature to not only provide speedier page loads, but even provide offline availability? I think offering "offline" and "low-bandwidth" abilities could make Next.js quite attractive, especially with the huge amount of users in emerging markets. In combination with e.g GraphQL, it could compete against Firebase which has an offline feature (React-boilerplate also advertises itself as offline-first).

To make things straightforward to the user, could prefetching be offered out of the box (no API change) so that users can see its full potential right away, like offline-plugin does? (If necessary, allow to disable through configuration.)

[sedubois]

Also see Create React PWA based on create-react-app, Chrome sw-precache and sw-toolbox, to create progressive web apps. It also shows how to have an "add to home screen" link (see blog post with short demo video).

Not saying all of this should be implemented right away, but definitely prefetching/caching would help with all of that.

[pranaygp]

@sedubois That sounds perfect. Let me go through those resources and begin working on this. Anyone else who wants to help, that'd be awesome

[ugiacoman]

Exactly what is being discussed right now at https://developer.chrome.com/devsummit/

[sedubois]

Thanks @ugiacoman, is there any way to view the talk or related article?

[ugiacoman]

@sedubois It looks like they haven't archived the stream yet. A few good pieces that I have read involves service workers. It seems incredibly easy, and it would be incredible if next allowed you to select assets and URLs to store via the service workers. The benefits are 💯 awesome. Here are the links below:

Pre-fetching with Service Workers
Push Notifications
PWA Checklist

[jbaxleyiii]

@rauchg how can I help with this? It's a big want for my team 😉

[arunoda]

Guys, I did a PR implementing page prefetching.
Have a look at here: https://github.com/zeit/next.js/pull/375

cc @jbaxleyiii :)

[sedubois]

@arunoda any future plan for fallback to AppCache?

[arunoda]

@sedubois we will add some fallback support with AppCache or something similar.

[philcockfield]

Any idea on whether this will make it into a release of next.js anytime soon?

[rauchg]

It's already in master