SolidJS•7mo ago

Clicking browser's Back button from external site doesn't render the right state

The problem occurs only in production, not in localhost. When a user is redirected to an external site, then presses the brower's Back button, the SolidJS SPA is not rendering the right state. Example: Say the user wants to create an account via Google Oauth2, the user is redirected from the SolidJS SPA to the Google site to authenticate. If the user changes his/her mind, the user presses the Back button in the navigator. The SolidJS SPA is rendered but will show a spinner indefinitely, while nothing is loading, the component doesn't render the right state. It seems that the app renders the page just as it was right before being redirected to the external site (a spinner was displayed right after the Create Account button click and before the redirect), but if I log the state, there is no reason to show a spinner. It works as expected in localhost. Update: The document (the html page) and the JS asset seem not requested when going back from the external site (even though I can read logs from the JS code). In the Network tab I see only a request to: - favicon.ico (304) - example.com/foo.css (304) While in localhost the document is requested (200) It doesn't seem to be a problem related to the http caching though because the http response headers look okay: Cache-Control: public,max-age=0,must-revalidate (using Netlify) I think it's either something I miss to avoid the browser to use some in-memory cached resources (but unrelated to http-cache, the document isn't even fetched it seems), or a SolidJS router problem. Might have something to do with "bfcache"

1 Reply

Mathieu•7mo ago

Okay can't believe this actually worked:

function handleGoogleButtonClick() {
  const handlePageShow = (event: any) => {
    if (event.persisted) {
      window.location.reload();
    }
  };
  window.addEventListener('pageshow', handlePageShow);
  onCleanup(() => {
    window.removeEventListener('pageshow', handlePageShow);
  });

  document.location.assign(import.meta.env.VITE_GOOGLE_OAUTH_URL);
}

function handleGoogleButtonClick() {
  const handlePageShow = (event: any) => {
    if (event.persisted) {
      window.location.reload();
    }
  };
  window.addEventListener('pageshow', handlePageShow);
  onCleanup(() => {
    window.removeEventListener('pageshow', handlePageShow);
  });

  document.location.assign(import.meta.env.VITE_GOOGLE_OAUTH_URL);
}

Gaming

Programming

Clicking browser's Back button from external site doesn't render the right state