Fast Refresh breaks with ESI tags

[siosphere]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Apr 27 21:16:35 UTC 2022
Binaries:
  Node: 16.15.1
  npm: 8.13.2
  Yarn: 3.2.1
  pnpm: N/A
Relevant packages:
  next: 13.0.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next dev

Describe the Bug

This is utilizing the new app/ directory layout. When defining a root layout, and adding in esi:include tags, which are replaced by an intermediary proxy (Varnish, Cloudflare worker, Lambda@Edge, etc), fast-refresh/hydration breaks on the page.

This is because the output does not match, as it was dynamically replaced before it hit the browser.

Expected Behavior

Refresh should work with <esi:include /> tags. This could be an option in the config to disable refresh for the root layout.

Essentially if you have any process in-between the nextjs dev server, and the user's browser, which alters the HTML, the fast-refresh breaks as it tries to hydrate. There should be a way to mark an area as completely static, and disable the fast-refresh from that area, while keeping it for the main body of the application.

Link to reproduction

https://github.com/siosphere/nextjs-esi-refresh

To Reproduce

Reproducing requires running a proxy in-between the nextjs server and the browser, which can understand esi:include tags.

In the repo i provided, you can run:

yarn dev

in one terminal window, which starts the normal nextjs service on localhost:3000, and fast-refresh and everything works as expected. In another terminal window, you can run:

node proxy.js

Which spins up a very simple proxy that just does a replace on the esi:include tag, to mimic what an esi capable proxy would do. Visiting localhost:3001 will then give you the hydration error, since client-side it is trying to hydrate the esi:include tag, but the server has differing html.