import { Callout } from 'nextra/components'

# Suspense

<Callout emoji="🚨" type="error">
  Suspense es actualmente una característica **experimental** de
  React. Estas APIs pueden cambiar significativamente y sin previo aviso antes
  de que se conviertan en parte de React.

[Más información](https://reactjs.org/docs/concurrent-mode-suspense.html)

</Callout>

<Callout>
  Tenga en cuenta que React Suspense aún no es compatible con el modo SSR.
</Callout>

Puede activar la opción `suspense` para utilizar SWR con 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>
  Tenga en cuenta que la opción `suspense` no puede cambiar en el ciclo de vida.
</Callout>

En el modo Suspense, `data` es siempre la respuesta fetch (por lo que no es
necesario comprobar si es `undefined`). Pero si se produce un error, es
necesario utilizar un
[error boundary](https://reactjs.org/docs/concurrent-mode-suspense.html#handling-errors)
para atraparlo:

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

---

### Note: With Conditional Fetching

Normalmente, cuando se habilita `suspense` se garantiza que `data` siempre
estarán lista al renderizar:

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

  // `data` nunca sera `undefined`
  // ...
}
```

Sin embargo, cuando se utiliza junto con el conditional fetching o dependent
fetching, `data` estará `undefined` si la solicitud está **paused**:

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

  // `data` será `undefined` si `isReady` es false
  // ...
}
```

Si quiere leer más detalles técnicos sobre esta restricción, consulte
[la discusión aquí](https://github.com/vercel/swr/pull/357#issuecomment-627089889).
