Suspense no Next 13

Se você esta bem-acostumado e confortável com o next 12, com todas as funções de getServerSideProps, getStaticProps... com folder pages, sei que e um choque, mas calma, todas essas funcionalidades do next 12 vai continuar funcionando da mesma forma no next 13, a maioria da mudança esta quando voce utiliza a folder app, então relaxa que você vai ter tempo para aprender sobre essas novas mudanças.

O next 13 trouxe uma facilidade muito grande para implementar loading em componentes com um tempo de request com a nova funcionalidade de Suspence.

Agora você tem 2 caminhos para mostrar loading nos seus components enquanto uma request e feita, vou mostrar as duas:

@path/<root>/app/page.js
<Page>
    <Suspence loading={<p>...loading</p>}>
        <Component />
    </Suspence>
</Page>

Dessa forma, quando o component estiver renderizando você pode mostrar o loading, enquanto o loading e feito, voce poderar colocar um component ou vários caso você queira.

A outra maneira e com + 1 file no <root> do current page, loading.js

@path/<root>/app/loading.js

export default function Loading(){
    <p>...loading</p>
}

Após fazer o componente de loading que sera renderizado caso o page.js esteja carregando, basta chamar o suspence embrulhando o page.js

@path/<root>/app/page.js
<Page>
    <Suspence>
        <Component />
    </Suspence>
</Page>

Gostei bastante de como o next 13 consegui-u separar essas responsabilidades, deixando arquivos mais organizados. E sempre e legal algo novo nê haha'

Você pode conferir todas as novas features no site oficial