Suspense fallback is not showing in NextJS 13

Question

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.

Amino

Have you found the solution for this problem? – Michellemichels

Answer 1

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..

Noticeable

But using this dynamic route it make page refresh when route changed – Cop

Answer 2

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..

Glowing

Answer 3

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

Biauriculate

Answer 4

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.

Youngs