Inicie um Novo Projeto em React

Você definitivamente pode usar o React sem uma estrutura—é assim que você faria se utilizasse o React para uma parte da sua página. Entretanto, se você está criando uma nova aplicação ou site inteiramente com React, recomendamos a utilização de uma estrutura.

Veja o porquê.

Mesmo que você não precise de roteamento ou busca de dados a princípio, você possivelmente desejará adicionar alguma biblioteca para isso futuramente. À medida que seu pacote JavaScript cresce com cada novo recurso, você pode ter que descobrir como dividir o código para cada rota individualmente. À medida que suas necessidades de busca de dados se tornam mais complexas, é provável que você se depare com uma enxurrada de requisições cliente-servidor que fazem seu aplicativo parecer muito lento. Conforme sua aplicação recebe mais usuários com más condições de rede e dispositivos de baixo custo, você pode precisar gerar HTML a partir de seus componentes para exibir o conteúdo antecipadamente—seja no servidor, ou durante o tempo de compilação. Alterar alguma configuração para executar parte do seu código no servidor ou durante a compilação pode ser bem complicado.

Esses problemas não são específicos do React. É por isso que o Svelte tem o SvelteKit, o Vue tem o Nuxt, e assim por diante. Para solucionar esses problemas por conta própria, você precisará integrar seu bundler com sua biblioteca de roteamento e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas na criação de uma aplicação que carrega rapidamente mesmo enquanto cresce ao longo do tempo. Você vai querer enviar a mínima quantidade de código da aplicação em uma única viagem cliente-servidor, ao mesmo tempo que todos os dados necessários para a página. Provavelmente, você desejará que a página seja interativa antes mesmo que seu código JavaScript ser executado, para ter um carregamento progressivo aprimorado. Você pode querer gerar uma pasta de arquivos HTML totalmente estáticos para suas páginas de marketing que podem ser hospedadas em qualquer lugar e ainda funcionar com JavaScript desabilitado. Desenvolver essas capacidades você mesmo dá muito trabalho.

As estruturas React nesta página solucionam problemas como esses por padrão, sem nenhum trabalho extra da sua parte. Elas permitem que você comece de forma bem enxuta e depois dimensione seu aplicativo conforme suas necessidades. Cada estrutura de React tem uma comunidade, então encontrar respostas e atualizar ferramentas é mais fácil. Estruturas fornecem suporte ao seu código, ajudando você e outros a reaproveitar contexto e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada, é mais fácil ficar preso em versões de dependências sem suporte, e você acabará criando sua própria estrutura, porém sem uma comunidade ou meios de atualizar as dependências (e se for parecido com as que fizemos no passado, projetada mais aleatoriamente).

Se o seu aplicativo tiver restrições incomuns que não são bem atendidas por esses frameworks, ou você prefere resolver esses problemas sozinho, você pode criar sua própria configuração personalizada com React. Use react e react-dom a partir do npm, configure seu processo de construção personalizado com um bundler como Vite ou Parcel, e adicione outras ferramentas conforme necessário para roteamento, geração estática ou renderização do lado do servidor e muito mais.

O App Router do Next.js implementa na íntegra a especificação oficial dos Componentes de Servidor do React. Isso permite que você misture componentes apenas de servidor, componentes interativos e componentes gerados durante a construção (build) em uma única árvore React.

Por exemplo, você pode escrever um componente React apenas de servidor como uma função async que lê de um banco de dados ou de um arquivo. Então você pode passar dados deste componente para baixo, para seus componentes interativos:

// Este componente roda *apenas* no servidor (ou durante a construção).
async function Talks({ confId }) {
  // 1. Você está no servidor, então você pode se comunicar com sua camada de dados. Rotas de APIs não são necessárias.
  const talks = await db.Talks.findAll({ confId });

  // 2. Adicione qualquer quantidade de lógica de renderização. Isso não aumentará o tamanho do seu pacote JavaScript.
  const videos = talks.map(talk => talk.video);

  // 3. Passe os dados para baixo para os componentes que rodarão no navegador.
  return <SearchableVideoList videos={videos} />;
}

O App Router do Next.js também integra busca de dados com Suspense. Isso permite que você especifique um estado de carregamento (como um esqueleto) para diferentes partes da sua interface de usuário diretamente na sua árvore React:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Componentes de Servidor e Suspense são recursos do React ao invés de recursos do Next.js. Entretanto, adotá-los no nível do framework requer comprometimento e um esforço de implementação que não é trivial. No momento, o App Router do Next.js é a implementação mais completa. A equipe React está trabalhando com desenvolvedores de bundlers para tornar esses recursos mais fáceis de implementar na próxima geração de frameworks.