Inicie um Novo Projeto em React

Você definitivamente pode usar React sem um framework—é assim que você usaria React para uma seção da sua página. Contudo, se você está construindo uma nova aplicação ou um novo site totalmente em React, recomendamos usar um framework.

E aqui está o porquê.

Mesmo que você não precise de roteamento ou busca de dados no início, você provavelmente vai querer adicionar algumas bibliotecas para eles. Conforme seu pacote JavaScript cresce com cada nova funcionalidade, você talvez tenha que descobrir como dividir o código para cada rota individualmente. Conforme suas necessidades de busca de dados ficam mais complexas, é provável que vá encontrar cascatas de comunicação servidor-cliente que fazem sua aplicação parecer muito lenta. Conforme seu público passe a incluir mais usuários com condições de rede ruins e dispositivos de baixo desempenho, você pode precisar gerar HTML a partir de seus componentes para exibir conteúdo cedo—seja no servidor, ou durante o tempo de construção (build). Mudar sua configuração para executar parte do seu código no servidor ou durante a construção pode ser bem complicado.

Esses problemas não são específicos ao React. É por isso que Svelte tem SvelteKit, Vue tem Nuxt, e assim por diante. Para resolver esses problemas por conta própria, você precisará integrar seu bundler com seu roteador e com sua biblioteca de busca de dados. Não é difícil fazer uma configuração inicial funcionar, mas há muitas sutilezas envolvidas em fazer uma aplicação que carrega rapidamente mesmo enquanto cresce ao longo do tempo. Você vai querer enviar a menor quantidade de código da aplicação, mas fazer isso em uma única ida e volta entre cliente-servidor, em paralelo com qualquer dado necessário para a página. Você provavelmente vai querer que a página seja interativa antes mesmo de seu código JavaScript ser executado, para suportar o aprimoramento progressivo. 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. Construir essas capacidades por conta própria requer trabalho de verdade.

Os Frameworks React nesta página resolvem problemas como esses por padrão, sem trabalho extra de sua parte. Eles permitem que você comece bem enxuto e então escale sua aplicação a partir das suas necessidades. Cada framework React tem uma comunidade, então encontrar respostas para perguntas e atualizar ferramentas é mais fácil. Frameworks também dão estrutura para seu código, ajudando você e outros a reter contextos e habilidades entre diferentes projetos. Por outro lado, com uma configuração personalizada é mais fácil ficar preso em versões de dependências não suportadas, e você essencialmente acabará criando seu próprio framework—embora um sem comunidade ou trajetória de atualizações (e se for algo como os que fizemos no passado, projetado de forma descuidada).

Caso você ainda não esteja convencido, ou sua aplicação tenha restrições incomuns que não são bem atendidas por esses frameworks e você gostaria de criar sua própria configuração personalizada, nós não podemos te impedir—vá em frente! Pegue react e react-dom do npm, configure seu processo de construção personalizado com um bundler como Vite ou Parcel, e adicione outras ferramentas conforme você precisar para roteamento, geração estática ou renderização no servidor, e etc.

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.