import { Callout } from 'nextra/components'

Suspense

<Callout emoji="🚨" type="error"> Suspense is currently an **experimental** feature of React. These APIs may change significantly and without a warning before they become a part of React.

More information

</Callout>

<Callout>Note that React Suspense is not yet supported in SSR mode.</Callout>

You can enable the suspense option to use SWR with React Suspense:

jsx

import { Suspense } from 'react'
import useSWR from 'swr'

function Profile() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
  return <div>hello, {data.name}</div>
}

function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Profile />
    </Suspense>
  )
}

<Callout> Note that the `suspense` option is not allowed to change in the lifecycle. </Callout>

In Suspense mode, data is always the fetch response (so you don't need to check if it's undefined). But if an error occurred, you need to use an error boundary to catch it:

jsx

<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
  <Suspense fallback={<h1>Loading posts...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>

Note: With Conditional Fetching

Normally, when you enabled suspense it's guaranteed that data will always be ready on render:

jsx

function Profile() {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })

  // `data` will never be `undefined`
}

However, when using it together with conditional fetching or dependent fetching, data will be undefined if the request is paused:

jsx

function Profile() {
  const { data } = useSWR(isReady ? '/api/user' : null, fetcher, {
    suspense: true
  })

  // `data` will be `undefined` if `isReady` is false
}

If you want to read more technical details about this restriction, check the discussion here.