OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Suspense fallback in next.js 14 isn't showing

  • Thread starter Thread starter awfha
  • Start date Start date
A

awfha

Guest
I'm trying to use Suspense in my next.js app but the fallback doesn't show even if I hardcoded a delay. The results always show even if i'm refreshing so I assume it's a problem with the cache. How can I show the fallback?

Code:
import { Suspense } from "react";
import Posts from "@/components/Posts";

export default async function Home() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>} />
        <Posts />
      <Suspense />
    </div>
  );
}

Posts

Code:
async function getPosts() {
  let res = await fetch(`https://jsonplaceholder.typicode.com/posts?delay=3000`);
  return res.json();
}

const Posts = async () => {
  const posts = await getPosts();

  return (
    <div>
      {posts.map((post: any) => (
        <div key={post.id} className="mb-3">
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Posts;

<p>I'm trying to use Suspense in my next.js app but the fallback doesn't show even if I hardcoded a delay. The results always show even if i'm refreshing so I assume it's a problem with the cache. How can I show the fallback?</p>
<pre><code>import { Suspense } from "react";
import Posts from "@/components/Posts";

export default async function Home() {
return (
<div>
<Suspense fallback={<div>Loading...</div>} />
<Posts />
<Suspense />
</div>
);
}
</code></pre>
<p>Posts</p>
<pre><code>async function getPosts() {
let res = await fetch(`https://jsonplaceholder.typicode.com/posts?delay=3000`);
return res.json();
}

const Posts = async () => {
const posts = await getPosts();

return (
<div>
{posts.map((post: any) => (
<div key={post.id} className="mb-3">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
))}
</div>
);
};

export default Posts;
</code></pre>
 

Latest posts

Top