Suspense

🚨

O React não recomenda usar Suspense em frameworks de dados como o SWR (Mais informações). Essas APIs podem mudar no futuro como resultados da nossa pesquisa.

Você pode habilitar a opção suspense para usar SWR com React Suspense:

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>carregando...</div>}>
      <Profile/>
    </Suspense>
  )
}

💡

Note que a opção suspense não é permitida a mudar no ciclo de vida.

Em modo Suspense, data é sempre a resposta do fetch (então você não precisa checar se é undefined). Mas se um erro ocorreu, você precisa usar um limite de erro (Error Boundary) (opens in a new tab) para o capturar:

<ErrorBoundary fallback={<h2>Não foi possível obter posts.</h2>}>
  <Suspense fallback={<h1>Carregando posts...</h1>}>
    <Profile />
  </Suspense>
</ErrorBoundary>

💡

O modo Suspense suspende a renderização até que os dados estejam prontos, o que significa que pode causar problemas de waterfall facilmente. Para evitar isso, você deve fazer prefetch de recursos antes de renderizar. Mais informações

Nota: Com Fetching Condicional

Normalmente, quando você habilita suspense, é garantido que data estará sempre pronto na renderização:

function Profile () {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })
 
  // `data` nunca será `undefined`
  // ...
}

No entanto, ao usá-lo junto com uma busca condicional ou busca dependente, data será undefined se a solicitação estiver pausada:

function Profile () {
  const { data } = useSWR(isReady ? '/api/user' : null, fetcher, { suspense: true })
 
  // `data` será `undefined` se `isReady` é false
  // ...
}

Se você quiser ler mais detalhes técnicos sobre essa restrição, cheque a discussão aqui (opens in a new tab).

Server-Side Rendering

Quando usando o modo Suspense no lado do servidor (incluindo pre-rendering com Next.js), é obrigatório informar dados iniciais via fallbackData ou fallback. Isso significa que você não pode usar Suspense para obter dados no lado do servidor, mas fazendo a busca de dados totalmente do lado do cliente ou buscando os dados por meio do método de busca de dados à nível de framework (como getStaticProps com Next.js). Mais discussões podem ser enconrtradas aqui (opens in a new tab).

TypeScript Middleware