How to use swr hook with suspense enable in pages folder Nextjs?

Question

I am trying to use SWR hook in my project but I have an issue when I enable option suspense to true, I have put SWR hook inside home page component but it not works with suspense option, so I had to put it inside child component for suspense to work. How do I put swr hook inside home pages and suspense still works?

/pages/home.js:

export default function Home() {
  return (
    <div>
      <h1>Home page</h1>

      <Suspense fallback={<Loading />}>
         <Post />
      </Suspense>
    </div>
  )
}

/components/Post.js: (child component)

const Post= () => {
  const { data, mutate } = useSWR('/api/posts', fetcher, { suspense: true })

  return (
    <>
      {data.map(postItem=> (
        <p key={postItem.id}>
          {postItem.title}
        </p>
      ))}
    </>
  )
}

Answer 1

The suspense option will still work if you put the SWR hook inside the home page component.

export default function Home() {
    const { data, mutate } = useSWR('/api/posts', fetcher, { suspense: true })

    return (
        <div>
          <h1>Home page</h1>
    
          <Suspense fallback={<Loading />}>
             {data.map(postItem=> (
               <p key={postItem.id}>
                 {postItem.title}
               </p>
             ))}
          </Suspense>
        </div>
    )
}