React Server Components do Next.js 13 em apenas 90 segundos

Caso você esteja curioso para ver um exemplo simples e prático de como utilzar o novo React Server Components disponível no Next.js 13, sugiro assistir o vídeo abaixo:

https://twitter.com/housecor/status/1587442962946039808

Porém nesse vídeo há um detalhe que pode ser melhorado, que é evitar fazer aquela request utilizando o fetch contra a própria API e exportar como uma função a lógica que busca o usuário (por exemplo, importar o model User), pois assim você pode importar isso diretamente no arquivo do componente e utilizar o método que busca os dados dentro da função que renderiza a View que a princípio o Next.js junto com os Server Components irá abstrair isso, sem expor nenhuma informação sensível no client-side sobre as consultas contra o Banco de Dados.

Um cuidado que eu teria é a forma que ele faz o cache das informações e o que faz exatamente de cache, pois no caso aqui do TabNews, tudo que importamos de propriedades usando o getStaticProps() fica publicamente disponível pelos arquivos distribuídos na CDN na rota /_next. Ou seja, se você importar um usuário inteiro, com campo password por exemplo, mas só usar parte do objeto dentro do componente, não interessa, o objeto inteiro que vem pela propriedade será cacheado publicamente, o que faz sentido, porque dinamicamente você poderia escolher consultar as outras informações para mostrar na View.

Então com essa nova onda de Server Components sugiro a todos da comunidade do TabNews realmente entender o comporamento do cache dos dados 🤝

Quem tiver informações sobre essa mecânica, não hesite em compartilhar aqui para a comunidade porque você estará fazendo um serviço muito grande para todos nós, principalmente porque iremos migrar para Server Components mais para frente e tentar reduzir ao máximo JavaScript enviado para o Client 🤝 🤝