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](https://reactjs.org/docs/concurrent-mode-suspense.html)

</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](https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors)
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](https://github.com/vercel/swr/pull/357#issuecomment-627089889).
