Scroll position not saved when using back button to go to page using getServerSideProps.

[Muljayan]

trafficstars

What version of Next.js are you using?

10.2.3

What version of Node.js are you using?

12.6.3

What browser are you using?

Chrome, Firefox

What operating system are you using?

Ubuntu 18.04

How are you deploying your application?

next start, next dev

Describe the Bug

This bug was addressed for previous versions of Next prior to version 10. A few of them are as follows #9989 ,#12530. This issue seems to have come back.

• Assume there are 99 posts
• Scroll down to the 50th post and click on it.
• 50th post opens up
• Press the back button
• Expectation is to return to the previous position (50th post)
• However due to the bug the scroll position returns to the top, sometimes it goes to weird locations between the 1st and the 50th post.

This issue occurs when we return to a page which uses getServerSideProps with the back button. I tried it with getInitialProps and it works fine.

Expected Behavior

The expected behavior is to go back to the previous scroll position after clicking the back button. This does not happen.

To Reproduce

index.js in the pages folder

import React from 'react'
import Link from 'next/link';

const Home = ({ posts }) => {

  const projectList = posts.map((postId) => (
    <li key={postId}>
      <Link href={`/posts/${postId}`}>
        <a className="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200">
          <img src="https://via.placeholder.com/600x400.png" alt="" />
          <div className="leading-6 font-medium text-black">
            Project ID : {postId}
          </div>
        </a>
      </Link>
    </li>
  ))

  return (
    <section className="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4">
      <ul className="grid grid-cols-1 gap-4">
        {projectList}
      </ul>
    </section>
  )
}

export const getServerSideProps = async () => {
  const posts = [];
  for (let index = 0; index < 1000; index++) {
    posts.push(index);
  }
  setTimeout(() => {
  }, 10000);
  return {
    props: {
      posts
    }
  };
};

// Using this instead of getServerSideProps works as intended
// Home.getInitialProps = async (ctx) => {
//   const posts = [];
//   for (let index = 0; index < 1000; index++) {
//     posts.push(index);
//   }
//   setTimeout(() => {
//   }, 10000);
//   return { posts };
// }

export default Home

[id.js] file in the pages/posts folder

export const getServerSideProps = async (context) => {
  const { query } = context;
  const id = query.id;
  return {
    props: {
      id,
    },
  };
};

const Posts = ({id}) => {
  return (
    <h1>
      {id}
    </h1>
  )
}

export default Posts

[JayeUCSC]

Experiencing the same issue. would be nice to have a fix itself or suggestion of a possible workaround.

[1finedev]

any fix yet?

this is a big issue

[smaeda-ks]

Does setting the scrollRestoration experimental option make any difference?

module.exports = {
  experimental: {
    scrollRestoration: true,
  },
};

[don-esteban]

Still buggy especially with fragment links (# anchors). Current state, see https://github.com/vercel/next.js/issues/37893#issuecomment-1382858670

[l-you]

The problem is still present in NextJs 13.4.12 appDir.

Update: On IOS Chrome we cannot reproduce the issue. Only IOS Safari is reproducible.

[guylepage3]

I've reproduced the issue on almost all of my PWA apps on Chrome. Close to 20 of them. I cannot however reproduce this on Safari as of yet.

[don-esteban]

See: https://github.com/vercel/next.js/issues/37893#issuecomment-1619916412. I have a Next.js 14 App Router web app running without issues on any of the major browsers.