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

[vital venture]

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?

[gentle copper]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[fallow pine]

no because that wouldn't work, next/dynamic is not used for this purpose

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

[vital venture]

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?

[fallow pine]

What do you mean

[vital venture]

const [isLoading, setIsLoading] = useState(true)

return <> 
{isLoading ? <Loading/> : <Home/>}
</>

[fallow pine]

Yes, I don’t see why not?

[vital venture]

Would this be a good practice and good for performance for NextJS Pages router?

[fallow pine]

That is pretty much the only way you can implement loading states in the pages router

[vital venture]

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?

[fallow pine]

If you can make it work ig then it works too

[vital venture]

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?

[fallow pine]

Pages router follows different approach compared to app router

[vital venture]

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.

[fallow pine]

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

[vital venture]

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?

[fallow pine]

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

[vital venture]

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.

[fallow pine]

That’s basically correct yes