Explicação de Addy Osmani sobre o App Router do Next.js e os React Server Components

• Addy Osmani faz parte da equipe do Google Chrome e domina bem frameworks e bibliotecas, a ponto de promover projetos como TodoMVC e HNPWA
• RSC?
  • Integra a busca de dados como elemento essencial da composição da árvore de componentes, permitindo espera no nível mais alto e serialização de dados no lado do servidor
  • RSC são componentes React stateless executados no servidor, oferecendo uma experiência que facilita a reutilização de códigos de forma sustentável entre componentes de servidor e de cliente (knitting)
  • Permite roteamento semelhante a SPA sobre uma arquitetura parecida com MPA
  • A implementação real (fornecida) varia de framework para framework
  • A equipe do React acredita que isso será amplamente adotado e impactará o ecossistema. Dan, da equipe do React, compara os Server Components ao esqueleto do fluxo de dados do app, enquanto os Client Components seriam como a carne em volta desses ossos
• Como o Next.js App Router e os Server Components se integram?
  • Suporte a RSC a partir do Next.js 13+
  • Componentes dentro do diretório app têm suporte automático a RSC
  • RSC aproveitam a infraestrutura server-side e as dependências para oferecer melhor desempenho e bundles menores
  • O Next.js App Router combina renderização no servidor e no cliente para aprimorar gradualmente o app e tornar a experiência do usuário mais natural. Também é possível declarar e usar Client Components (use client) e posicioná-los de forma intercalada dentro da mesma árvore de componentes
  • Têm surgido bons relatos de experiência com o uso do Next.js App Router
• Há vários outros tópicos relacionados, então vale a leitura.