Next.js: Blank page when using browser back button on SSR pages.

Created on 8 Jan 2020 · 15Comments · Source: vercel/next.js

Summary

A dynamic SSR rendered page of mine is completely blank when users go back to it from another page.

To Reproduce

Create a new dynamic web page in Next.js. E.g: A React component that is pre-populated with data from a database or cache.
In the footer of this page, add a Next.js <Link/> to the home page (which is a static, standard next.js page).
Deploy the site, visit this dynamic SSR page from step 1.
Click the link on the footer.
Click the back button or use a keyboard shortcut to "Go back".
Observe the page is completely empty. No JS errors occur in the console.

Expected behavior

When I "Go back" in my browser, the page should display exactly as it did before.

System information

OS: macOS
Browser (if applies) Chrome 79.0.3945.88
Version of Next.js: ^9.1.6

Additional context

Issue doesn't occur for static pages, only dynamic SSR pages.

bug 1

Source

iMerica

All 15 comments

I have the same issue with dynamic pages. The back button works well when a user goes back to a static page (no [id].js, no ?param=param, etc). But it doesn't work when a user goes back from one dynamic page to another.

After clicking the back button I see the wrong state in window.history. as is okay, but url is like I didn't click back button.

I face this issue on 3 projects and this is awful.

nickmarlou on 4 Jun 2020

👍1

Please provide a full demo so we can look into this.

Timer on 9 Jun 2020

@Timer

Reproducible here:

Steps to replicate

Goto https://next-route-issue.vercel.app/page1?foo=bar
and then click on page2, you will be navigated to page2
then click on the browser back button. URL will get updated, contents won't!

Note: Replicable only when query paraments are present

Repo:
https://github.com/collegewap/next-route-issue

collegewap on 26 Jul 2020

👍1

The same thing happens to me in production and development, the second time I return to the home page.

Although error occurs on the home page, the error seems to come from the dynamic routes. I put my [slug].js component, which is where the error comes from.

I followed Strapi's example from the example repository.


import {getAllPostsWithSlug, getPost, getRecommendedPosts} from '@src/helpers/api'
import Head from 'next/head'
import markdownToHtml from '@src/helpers/markdownToHtml'
import HeaderTop from "@src/components/Layout/Header/HeaderTop";
import HeaderWithBackground from "@src/components/Layout/Header/HeaderWithBackground";
import Footer from "@src/components/Layout/Footer";
import PostContent from "@src/components/Post/Content";
import config from "@src/config";

export default function Post({post, recommendedPosts}) {

    return (
        <>
            <Head>
                <title>{post.title}</title>
            </Head>
            <HeaderTop/>
            <HeaderWithBackground/>
            <div className="main">
                <PostContent post={post} recommendedPosts={recommendedPosts}/>
            </div>
            <Footer/>
        </>
    )
}

export async function getStaticProps({params, preview = null}) {
    const post = await getPost(params.slug, preview);
    const recommendedPosts = await getRecommendedPosts(3);
    const content = await markdownToHtml(post?.[0].content || '');

    return {
        props: {
            preview,
            post: {
                ...post?.[0],
                content,
            },
            recommendedPosts
        },
    }
}

export async function getStaticPaths() {
    const allPosts = await getAllPostsWithSlug()
    return {
        paths: allPosts?.map((post) => `/blog/${post.slug}`) || [],
        fallback: false,
    }
}

chiqui3d on 26 Jul 2020

I see many other similar issues that have been ignored 🤷‍♂️

chiqui3d on 26 Jul 2020

😕2

The whole problem seems to come from the next/link component, If I use the "a" tag directly, everything works fine. Can't I use the Linkcomponent in static pages? In the documentation I don't see anything mentioned about.

chiqui3d on 27 Jul 2020

Similar Problem Here:

https://pokedex-tutorial.vercel.app/

You can check the code here:

https://github.com/BinPar/pokedex-tutorial

You can reproduce it:

SSR the home page (https://pokedex-tutorial.vercel.app/)
Scroll down
Select a pokemon
Click the back (at the bottom)
The home page goes to the top
Scroll down
Select a pokemon
Click the back (at the bottom)
Now it works... every time except after the initial SSR

drnachio on 28 Jul 2020

@Timer @timneutkens Any update on this? I have resorted to using instead of for dynamic routes for the time being. Or perhaps any other workaround?

Skarian on 22 Aug 2020

Hi, these sound related to https://github.com/vercel/next.js/issues/16028 which was fixed in https://github.com/vercel/next.js/pull/16477 and is available on the latest canary of Next.js v9.5.3-canary.21. Can you upgrade and see if the behavior is corrected for you?

ijjk on 25 Aug 2020

🚀1

@ijjk Issue got fixed for me
https://github.com/collegewap/next-route-issue

collegewap on 26 Aug 2020

@ijjk Fixed over here :) Thanks!

Skarian on 26 Aug 2020

Thanks for testing that @collegewap @Skarian! I'm going to close this since the related reports seem to be fixed. If anyone else is still encountering this please respond with additional details and we can investigate further.

ijjk on 26 Aug 2020

Similar Problem Here:

https://pokedex-tutorial.vercel.app/

You can check the code here:

https://github.com/BinPar/pokedex-tutorial

You can reproduce it:

SSR the home page (https://pokedex-tutorial.vercel.app/)

Scroll down

Select a pokemon

Click the back (at the bottom)

The home page goes to the top

Scroll down

Select a pokemon

Click the back (at the bottom)

Now it works... every time except after the initial SSR

In my case it is not fixded using: "next": "^9.5.3-canary.21"

drnachio on 27 Aug 2020

@drnachio this issue seems to be un-related to the reproduction steps you are describing as the content is loaded correctly when following the steps, it seems that yours is more related to scroll restoration

ijjk on 28 Aug 2020

I had a similar issue: every page reload was displaying blank page. I had to hard reload and remove cache every time.
It is solved with ^9.5.3-canary.21 👍