Should Links where redirect via Proxy is involved, no longer scroll to top of the target page?

[heisand]

We recently bumped from 16.2.11 to 16.3.3. We started seeing that Links which previously scrolled to top in the target page, no longer does that when there is a redirect involved in proxy.ts.

So what we do is,

const { pathname, search } = req.nextUrl
const pathnameWithoutLocale = removeLocale(pathname)
const localeFromPath = locales.find((l) => pathname === /${l} || pathname.startsWith(/${l}/))

if (!localeFromPath) {
const locale = isProduction ? 'en' : (req.cookies.get('NEXT_LOCALE')?.value ?? 'en')
return NextResponse.redirect(new URL(/${locale}${pathname}${search}, req.url), { status: 308 })
}

When then coming to the redirected page, the current scroll position from the source page is kept.

Is this intentional or is it a bug?

[icyJoseph]

Hi — have you reproduced this on a minimal app? I think the issue you are seeing is likely, #96855 — so not necessarily caused by the proxy redirect, rather because of a parallel route with a fixed element. Could you verify please?

[heisand]

I have not yet done this in a minimal app, but would the issue not be solved using the workaround appNewScrollHandler: false ? I tried that, and that did not work.

But I can try to reproduce with a minimal app

[icyJoseph]

Well, I asked an agent to repro, it claimed false things, but upon inspecting the repro, it does indeed happen.

1) tests/proxy-scroll.spec.ts:6:7 › proxy 308 redirect + scroll › Link that hits proxy redirect: does the target page scroll to top? 

    Error: Expected target page to scroll to top; got scrollY=2540

    expect(received).toBe(expected) // Object.is equality

    Expected: 0
    Received: 2540

      24 |
      25 |     // Ideally 0 — the target page should be scrolled to the top.
    > 26 |     expect(scrollAfter, `Expected target page to scroll to top; got scrollY=${scrollAfter}`).toBe(0)
         |                                                                                              ^
      27 |   })
      28 |
      29 |   test('Link WITHOUT proxy redirect: control — target page scrolls to top', async ({ page }) => {
        at /Users/icyjoseph/Downloads/fl-scroll-proxy-redirect/tests/proxy-scroll.spec.ts:26:94

    Error Context: test-results/proxy-scroll-proxy-308-red-72d85--target-page-scroll-to-top-/error-context.md

Whereas with 16.2...

  ✓  1 tests/proxy-scroll.spec.ts:6:7 › proxy 308 redirect + scroll › Link that hits proxy redirect: does the target page scroll to top? (1.2s)
[proxy-redirect] scrollY after navigation: 0

[icyJoseph]

Opened, #98172 to track the issue

[heisand]

The rewrite is a good solution since it removes one network roundtrip 👍 So if it is a bug or intentional is then not that important to me (at least) :)

[MarvelCollin]

this is a regression in how 16.3 handles scroll position during replaceState transitions. in 16.2 the scroll manager treated all navigations the same and reset to top. in 16.3 they changed it so that replaceState transitions (which is what a 308 redirect triggers internally) preserve the current scroll offset. the idea was probably to improve UX for in-page state changes where you dont want the page jumping, but it broke the case where a redirect is used for locale prefixing since thats semantically a new page navigation, not a state replacement.

the simplest fix until #98172 lands is switching from redirect to rewrite in your middleware

if (!localeFromPath) {
const locale = isProduction ? 'en' : (req.cookies.get('NEXT_LOCALE')?.value ?? 'en')
return NextResponse.rewrite(new URL(/${locale}${pathname}${search}, req.url))
}

rewrite handles the routing server side without sending a 308 back to the browser, so the scroll manager never sees a replaceState. it treats it as a normal forward navigation and resets to top. the browser URL still shows the locale prefixed path since thats what the rewrite resolves to.

this also has the side benefit of removing one network roundtrip since the browser no longer has to follow the 308 before getting the actual page. we switched to this pattern for the same reason and it works without needing any client side scroll workarounds.