[NEXT-1147] Scroll position is reset when search params are updated

[benjaminwaterlot]

Verify canary release

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

Provide environment information

Next.js `13.3.5-canary.2`

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/modest-gould-h4nlvd?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D

To Reproduce

• Click the counter to update client state.
• Scroll a little.
• Click the second button to update search params.
• The client state is preserved, but the scroll position is lost.

Describe the Bug

Context

In Next <= 13.2.4, updating search params was working as intended : client state was kept, and scroll position was kept too.

In Next 13.2.5, a regression made the client components unmount and remount when search params were updated.

@feedthejim fixed that unmounting in #49047 (it's testable on 13.3.5-canary.2), but there is still an issue now: scroll position is lost on search params updates.

Problem: persisting state in search params is very important with the App router - that's a clean way for client components to request updated data from the RSC.

Reproduction Codesandbox

Here's a codesandbox reproducing the bug:

https://codesandbox.io/p/sandbox/modest-gould-h4nlvd?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A7%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A7%7D%5D

In video

CleanShot.2023-05-02.at.14.18.36-converted.mp4

A real-world example of the problem

Previously, the "name for the fund", kept in client state, was reset when updating the sliders. It's now better, but the scroll position reset is still awkward.

CleanShot.2023-05-02.at.14.31.38.mp4

Expected Behavior

When updating search params, the scroll position should be preserved.

Which browser are you using? (if relevant)

Latest stable Google Chrome

How are you deploying your application? (if relevant)

No response

_NEXT-1147

[schimi-dev]

Looking forward to this getting fixed :-)

[aaron5670]

I experience the same issue... I thought it was a bug in my code. 😆

[adrianhajdin]

I'm experiencing the same bug. The website scrolls to the top every time the URL parameters change.

I saw @timneutkens's tweet on the topic.

2023-05-27.09-58-58.mp4

[Tony0205]

I'm having the same problem...
And it seems that the page still remounts when the search param is changed.

My nextJS version is 13.4.5-canary.0

It seems to be fine when I use English, but when I use Korean, it keeps reloading.

[Deepakv1111]

@adrianhajdin I'm having the same issue...

[YoussefKababe]

Facing the same issue... First I would like to mention that I think this is a correct behavior by default, there nothing wrong with it; however, it would be awesome to have the option to persist scroll position indeed.

I came up with a quick workaround to solve this temporarily until there's an official fix:

'use client'
import { useCallback, useEffect } from 'react'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export default function ExampleClientComponent(): JSX.Element {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // Retrieve scrollY value from localStorage after routing
    const persistentScroll = localStorage.getItem('persistentScroll')
    if (persistentScroll === null) return

    // Restore the window's scroll position
    window.scrollTo({ top: Number(persistentScroll) })
   
    // Remove scrollY from localStorage after restoring the scroll position
    // This hook will run before and after routing happens so this check is
    // here to make we don't delete scrollY before routing
    if (Number(persistentScroll) === window.scrollY)
      localStorage.removeItem('persistentScroll')
  }, [searchParams])

  const setSearchParam = useCallback(
    (key: string, value: string) => {
      const currentParams = searchParams.toString()
      const params = new URLSearchParams(currentParams)

      params.set(key, value)
      // If search params are still the same there's no need to do anything
      if (currentParams === params.toString()) return

      // Save current scrollY value to localStorage before pushing the new route
      localStorage.setItem('persistentScroll', window.scrollY.toString())
      router.push(`${pathname}?${params.toString()}`)
    },
    [searchParams, pathname, router],
  )

  return (
    <button
      onClick={() => {
        setSearchParam('exampleParam', '9999')
      }}
    >
      Update search params
    </button>
  )
}

Depending on your application's logic, you can package this into a React hook and reuse it in all components that should update the search params.

[GBrachetta]

@adrianhajdin I got it working by using "next": "13.2.4" in package.json (and obviously running npm i afterwards) and adding

  experimental: {
    appDir: true,
  },

in next.config.js.

At least this works fine while keeping server side rendering until they fix the bug.
This might be better than converting the component to client side rendering.