0

I have the following problem: I have a page in my Next.js Project and use getStaticProps for this page to preload data. Since this takes some seconds, I created a fallback page that is shown during this process. If I enter the link to this page directly as a URL in the browser, it works perfectly. First the loading page is shown until the data is completly loaded. Then it switches to the new page. But if I want to navigate there from another page via useRouter(), it doesn't work. Instead, I just stay on the old page until the new page finishes loading and then I get to see the new page directly, without seeing the loading page in between. Any ideas why it wont show the loading page?

Below I have copied the few important code passages relevant for this from the whole code.

   function NewPage(props) {
     // Show while fetching the data
     if (!props.data) {
       return <LoadingPage></LoadingPage>;
     }
     // After loading the regular page is shown
     return (
       xyz......
     )
   }

  export async function getStaticProps(context) {
   const data= await someLoadingFunction();
   if (!data) {
    // Showing loading screen
    return {};
   }
   return {
    props: {
      data:data
    },
   };
 }

This is the page from which I would like to redirect to the new page:

import { useRouter } from "next/router";

function OldPage(props) {
   const router = useRouter();

   function redirect (path) {
      router.push({
      pathname: path,
      query: { xyz }
    });

   return (
     <button onClick={redirect}>Redirect</button>
)
}
Luca
  • 3
  • 2
  • 1
    I don't understand why are you showing a loading screen if you're using getStaticProps? the page is pre-rendered and cached at build time, so the loading should be instant – mocherfaoui Sep 04 '22 at 22:40
  • `getStaticProps` runs once at build time to pre-generate the page. Either the `data` will be present, in which case the page gets rendered (without ever rendering the loading page if `airportList` exists); or the `data` isn't present, in which case `LoadingPage` will permanently be displayed. – juliomalves Sep 04 '22 at 22:51
  • Edited one thing, as airportsList should have been data. – Luca Sep 05 '22 at 10:05
  • @mocherfaoui The loading of data takes some seconds as it is quite big. While data isnt done loading, the loading screen is shown. – Luca Sep 05 '22 at 10:08
  • @juliomalves No actually it does work as I intended it. When visiting the page for the first time data needs to be loaded and until that is done, data wont be available in the page, so the Loading Page is displayed. After loading the normal page is displayed. This works perfectly when entering the URL into the browser. However when I use the router instead, data will be loaded as well (takes like 5 seconds or so), but the Loading Page never appears. Instead after loading the generated page is displayed. I dont really understand, why it behaves so differently when using the URL and the router – Luca Sep 05 '22 at 10:12
  • 1
    that's normal because `getStaticProps` is called on every request in development mode per the [docs](https://nextjs.org/docs/basic-features/data-fetching/get-static-props#runs-on-every-request-in-development), try to build your project and see if there will be a delay when the page loads – mocherfaoui Sep 05 '22 at 10:21

0 Answers0