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

Muljayan commented 3 years ago

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 commented 3 years ago

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

1finedev commented 3 years ago

any fix yet?

this is a big issue

smaeda-ks commented 1 year ago

Does setting the scrollRestoration experimental option make any difference?

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

don-esteban commented 1 year ago

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

l-you commented 1 year ago

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 commented 7 months ago

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 commented 7 months ago

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.

vercel / next.js