13

I am building an application to showcase the usage of the Suspense in Nextjs 13. But the Suspense fallback is not showing while loading.

Here is the page.js

import React, { Suspense } from "react"; import Loading from "./loading"; const Trending = React.lazy(() => import("./Trending")); function Page() { return ( <div> <Suspense fallback={<Loading />}> <Trending /> </Suspense> </div> ); } export default Page;

Here is the Trending

import axios from "axios"; export default async function Trending() { const res = await axios.get( `https://api.themoviedb.org/3/trending/movie/day?api_key=1428e09fe38be9df57355a8d6198d916` ); const data = res.data; // Add a delay to ensure that the Suspense fallback is shown await new Promise((resolve) => setTimeout(resolve, 3000)); return ( <div> <li>{data.results[0].title}</li> </div> ); }

If you need anything else let me know.

I tried various method such as lazy loading, adding delay and all but still not working. I need to see the fallback component showing while loading the data.

Improve this question
2
  • Have you found the solution for this problem? Commented Aug 4, 2023 at 21:11
  • find any solution? Commented Jul 31 at 2:34

5 Answers 5

Reset to default
8

Since you are using NextJS, you should use their own API for lazy loading components. Which you can find in their docs.

With your component it looks like this:

// ..imports.. import dynamic from 'next/dynamic' const Trending = dynamic(() => import('./Trending'), { ssr: false, })

NextJS renders your component first on server side and then on client, therefore it'd make 2 identical requests.

To avoid this behavior you need to set ssr option, that's why:

ssr: false

And then in your jsx:

 // ..jsx.. <Suspense fallback={<Loading />}> <Trending /> </Suspense> // ..jsx..
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

But using this dynamic route it make page refresh when route changed
4

Adding Suspence to my jsx didn't work so I resulted to adding a loading option to the dynamic import

// ..imports.. import dynamic from 'next/dynamic' const Loader = dynamic(() => import('@/components/loaders/MainLoader')); const Trending = dynamic(() => import('./Trending'), { ssr: false,loading: () => <Loader />, })

and then the jsx

 // ..jsx.. <Trending /> // ..jsx..

Improve this answer

Comments

0

Maybe you should throw a Promise in order to take effect the suspense. As what Nicholas Tower said on this link. React Suspense is not working as intended

Improve this answer

Comments

0

  1. I recommend you do this.

     //page.tsx <Suspense key={keys(searchParams)} fallback={<Loading />}> <TableListCompanies searchParams={searchParams} /> </Suspense>

  2. In order for (Suspense) to work in a production environment, youwill need to include the following header.

     //next.config.js module.exports = { async headers() { return [ { source: '/:path*{/}?', headers: [ { key: 'X-Accel-Buffering', value: 'no', }, ], }, ] }, }

You can find this solution in the Next JS Docs.

Improve this answer

Comments

0

Try turning off your antivirus. For me kaspersky was problem. When I paused kaspersky's protection for 5 minutes, then suddenly suspense started working. Maybe it was injecting some kind of scripts which prevented working of suspense. I literally spent 2-3 days looking for solution this specific problem of suspense not working and it turned out to be antivirus problem

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.