router asPath hydration mismatch when rewrite is applied

[BRKalow]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.6.0: Mon Aug 30 06:12:21 PDT 2021; root:xnu-7195.141.6~3/RELEASE_X86_64
Binaries:
  Node: 14.17.6
  npm: 8.1.3
  Yarn: 1.22.17
  pnpm: 6.24.0
Relevant packages:
  next: 12.0.10
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

14.17.6

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

When navigating to a route which has been rewritten and using asPath during SSR, a hydration mismatch occurs, specifically when using asPath to create an href to be passed to next/link.

Rewrite config: https://github.com/BRKalow/next-rewrite-hydration-mismatch/blob/main/next.config.js

Rewritten page: https://github.com/BRKalow/next-rewrite-hydration-mismatch/blob/main/pages/proxied/index.jsx

On initial load, the anchor tag rendered by next/link has an href of /proxied, whereas I would expect it to have an href of /

Expected Behavior

No hydration mismatch, the router state during SSR should ideally match the URL as reflected in the request. On initial load, the anchor tag rendered by next/link should have an href of /.

To Reproduce

https://github.com/BRKalow/next-rewrite-hydration-mismatch

[BRKalow]

Potential duplicate of #34144

[ijjk]

Hi, so this is currently expected as the page being rewritten to is an automatically statically optimized page so it can't know the asPath on the server and only knows it on the client. The asPath value shouldn't be used inside of the rendering tree until router.isReady is true. We might need to document this better cc @molebox

Also note using typeof window in the rendering tree (related line) will cause hydration issues and needs a isMounted check before differing the rendering based on this

[BRKalow]

@ijjk Yeah I just had this realization regarding static generation 😅 . Definitely agreed there could be potential for docs improvement here, or even a development warning if asPath is used during render on the server.

I was just using the typeof window check so that I could showcase the difference of the href attribute, but yeah that's definitely a no-go generally.

Thanks for taking a look!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.