With-Zones Example with Link Prefetch not working out of the box

[jmaguirrei]

Hello, I have implemented this pattern on my deploys:

https://github.com/zeit/next.js/tree/canary/examples/with-zones

With the links with the prefetch attribute, like:

export default () => (
  <div>
    <Header />
    <p>This is our homepage</p>
    <div><Link prefetch href='/blog'><a>Blog</a></Link></div>
    <div><Link prefetch href='/about'><a>About us</a></Link></div>
    <img width={200} src={asset('/nextjs.png')} />
  </div>
)

I am getting the Page does not exists message in the console, so prefetch is not working.

This is because app A does not know about app B, cause they are reached with a proxy.

How to implement prefetch in this case?

Thanks.

[timneutkens]

Prefetching doesn't work with zones. Since moving from zone-to-zone is a hard page refresh for various reasons, for example multiple zones could run multiple versions of Next.js, React and other dependencies.

[jmaguirrei]

@timneutkens Despite you are right: prefetch doesn't work with zones, I am very convinced that splitting your app into multiple micro-services is a good strategy for mantaining/deploying/scaling purposes. So, how to get best of both?

Going to basics, there is actually a really simple workaround I found talking in Slack channel, that I want to share here for posterity.

You can simple include, in your Head component, this:

<link rel='preload' href='https://<your-website>/_next/YOUR_BUILD_ID/page/<your-page.js>' as='script'/>

This is new for me, so if you see any downside of this approach, please let me know!