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?
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
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;