Next.js Discord

Discord Forum

Do you use `Suspense fallback` on `Pages router` for a loading page?

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I'm trying to have a fallback page that is displayed only when some data is being fetched. In NextJS's app router, they use a loading.tsx file, but I can't use that for the pages router it seems. ReactJS has Suspense fallback and there's something in NextJS called Lazy loading which uses next/dynamic, should I use this then? Would it be something like 

export default function Home<HomeProps>() {

  const DynamicTest = dynamic(async () => {
    await Wait(2000)
    return import("@/pages/Home")
  }, {
    loading: () => <Loading></Loading>
  })

  return (
    <>

      {<DynamicTest />}

    </>
  )
}


The function Wait has a setTimeout asynchronous function that halts for 2000 milliseconds to emulate fetching data. Would this be a good practice?

23 Replies

to use Suspense with data fetching, you need to use Suspense-compatible data fetching APIs/libraries which are rare
server components are one of such APIs, but it doesn't work in the pages router
in the pages router you cannot have loading state for getServerSideProps; if you do client-side fetching with e.g. tanstack query you can use the isLoading prop to control loading state manually
@joulev in the pages router you cannot have loading state for `getServerSideProps`; if you do client-side fetching with e.g. tanstack query you can use the `isLoading` prop to control loading state manually
Transvaal lionOP
You can't use the traditional ReactJS conditional rendering to manually render a loading.tsx component while the main component is being rendered or data is being fetched?
Transvaal lionOP
const [isLoading, setIsLoading] = useState(true)

return <> 
{isLoading ? <Loading/> : <Home/>}
</>
@joulev Yes, I don’t see why not?
Transvaal lionOP
Would this be a good practice and good for performance for NextJS Pages router?
@Transvaal lion Would this be a good practice and good for performance for NextJS `Pages router`?
joulev
That is pretty much the only way you can implement loading states in the pages router
@joulev That is pretty much the only way you can implement loading states in the pages router
Transvaal lionOP
Wouldn't the approach through next/dynamic as I had above be the same as the standard ReactJS conditional rendering approach for the Pages router?
@joulev If you can make it work ig then it works too
Transvaal lionOP
My only confusion is if it would be good practice to use next/dynamic or Suspense fallback or just go for the App router approach. 😦 I'm just overwhelmed with questions. What's better for performance?
@joulev Pages router follows different approach compared to app router
Transvaal lionOP
I suppose I'll do the Pages router approach with next/dynamic and see what happens. I usually prefer to see what's the conventional way to do things, else there might be potential pitfalls or unforeseen errors, etc.
@Transvaal lion I suppose I'll do the `Pages router` approach with `next/dynamic` and see what happens. I usually prefer to see what's the conventional way to do things, else there might be potential pitfalls or unforeseen errors, etc.
joulev
Client side data fetching, pages router: use normal conditional rendering – only way
Server side data fetching, pages router: impossible

Client side data fetching, app router: use conditional rendering like above
Server side data fetching, app router: loading.tsx and/or Suspense
Depending on how you fetch data and what router you use the approach is different
@joulev Client side data fetching, pages router: use normal conditional rendering – *only* way Server side data fetching, pages router: impossible Client side data fetching, app router: use conditional rendering like above Server side data fetching, app router: loading.tsx and/or Suspense
Transvaal lionOP
On the pages router, there's pre-rendering with SSR (Server side rendering) or SSG (Static site generation), but there's no normal conditional rendering, correct?
@Transvaal lion On the `pages router`, there's pre-rendering with SSR (Server side rendering) or SSG (Static site generation), but there's no normal conditional rendering, correct?
joulev
Conditional rendering is just if else, it’s available everywhere, I don’t understand the question
Conditional rendering and SSR/SSG are two completely different groups of concepts
@joulev Conditional rendering is just if else, it’s available everywhere, I don’t understand the question
Transvaal lionOP
What I mean is that there's no conditional rendering on the server side of pages router, but there is pre-rendering through SSR and SSG. I'm just trying to make the connection in my head to understand it all better.
@joulev That’s basically correct yes
Transvaal lionOP
Thank you!