Publicamos uma nova tradução para aspirantes a desenvolvedores React. Esperamos que este artigo o ajude a escolher a ferramenta certa para seu próximo projeto.
Quando se trata de criar novos projetos no React, temos uma escolha óbvia: NextJS ou Create-React-App. Gatsby está em grande parte fora de uso devido a compilações lentas durante o dimensionamento. Além disso, o NextJS está se tornando um gerador de sites estáticos cada vez mais conveniente.
Foto de Artyom Sapegin no Unsplash
Neste artigo, vamos dar uma olhada nas vantagens e desvantagens do NextJS e do Create-React-App, bem como discutir quais casos de uso são adequados para cada um.
Criar-React-App
Create-React-App é um conjunto de ferramentas que permite criar novos aplicativos React. O CRA armazena dependências como webpack e babel dentro de scripts react. O Create-React-App facilita o trabalho com transpiladores e agrupadores.
Isso significa que atualizar essas dependências "ocultas" não é nada difícil. Você precisa esperar por uma nova versão dos scripts de reação e atualização. Não temos que mexer em consertar alterações de configuração do webpack.
Benefícios de usar Create-React-App
Unopinionated
Qualquer biblioteca pode ser usada, não há regras ou diretrizes. A escolha da biblioteca para roteamento também fica a seu critério.
O Create-React-Apps é renderizado no lado do cliente
Como estamos renderizando o Create-React-Apps no lado do cliente, a implantação é fácil. Podemos hospedar o aplicativo em qualquer hospedagem de arquivo, por exemplo, no S3. Os aplicativos CSR são muito mais fáceis de trabalhar!
Desvantagens de Create-React-App
Difícil de personalizar
Não há uma maneira integrada de personalizar o aplicativo. Se você precisar ajustar a configuração do seu webpack, sua única opção é usar uma ferramenta de terceiros como craco ou ejetar. No entanto, depois de executar o comando de ejeção, você perderá quase todos os benefícios de usar o Create-React-App.
Ele abstrai a complexidade de
Create-React-App funciona muito bem até que você tenha que fazer algo que não suporta. Vai ser difícil! Ao ocultar as configurações do babel e do webpack, o Create-React-App facilita os primeiros passos. No entanto, isso impede que os desenvolvedores aprendam mais sobre como essas ferramentas vitais funcionam.
Afeta negativamente o SEO
Como estamos renderizando o lado do cliente do Create-React-Apps, a ferramenta é complicada para implementar o SEO. O Create-React-Apps não deve ser usado para fins de comércio eletrônico ou marketing.
NextJS
Não é totalmente correto comparar NextJS e Create-React-App, porque NextJS é muito mais. Enquanto o CRA é uma ferramenta para criar aplicativos React, NextJS é uma estrutura para construí-los. Pronto para uso, o NextJS oferece renderização do lado do servidor, criação de sites estáticos, funcionalidade sem servidor e muito mais. Este é um conjunto completo de ferramentas que nos fornece tudo o que precisamos para criar aplicativos da web eficazes.
Quer ir ainda mais longe com o NextJS? Experimente o HappyKit .
HappyKit fornece aplicativos NextJS com tarefas repetitivas (tarefas CRON), análises muito simples e sinalizadores de recursos. Você pode se inscrever para o beta aqui !
Benefícios de usar NextJS
NextJS é extremamente rápido!
Graças à renderização do lado do servidor e à geração de sites estáticos, os aplicativos NextJS são executados de forma significativamente mais rápida. Em seguida, cuida das otimizações de desempenho padrão.
Fácil implantação A
Vercel (a empresa por trás do NextJS) facilita a implantação de aplicativos React full-stack . Alguns cliques do mouse e você tem um pipeline de implantação profissional. O processo inclui pré-implantações e implantações de produção.
NextJS fornece roteamento
NextJS fornece uma maneira rápida e fácil de criar APIs em aplicativos. Se seu aplicativo usa APIs de terceiros, geralmente você precisa de sua própria API para solicitações de proxy e armazenamento de token. O roteamento NextJS é perfeito para isso.
Fácil de personalizar O
NextJS permite que você personalize suas configurações de babel ou webpack. Adicionar carregadores de webpack ou plugins babel é fácil!
Desvantagens de usar NextJS
NextJS é uma estrutura opinativa
Há apenas uma maneira de trabalhar com rotas em NextJS e você não pode personalizá-la. O NextJS é limitado à sua rota baseada em arquivo e as rotas dinâmicas só são possíveis ao usar um servidor NodeJS.
Quando você deve usar o NextJS?
Ao criar uma página de aterrissagem,
NextJS é ótimo para criar uma página de aterrissagem e implementar outras tarefas de marketing.
Quando o SEO é importante
Ao construir sites de comércio eletrônico, a otimização de mecanismos de pesquisa é mais importante do que nunca. Graças à renderização do lado do servidor, o NextJS também se destaca nesse aspecto.
Ao construir sites,
a renderização do lado do servidor do aplicativo elimina a necessidade de os clientes renderizarem em seus dispositivos. Para usuários de dispositivos mais lentos, isso pode resultar em tempos de inicialização mais rápidos.
Quando você deve usar Create-React-App?
Ao construir um aplicativo fechado
Se seu aplicativo só for acessível a usuários autenticados, ele perde a maioria dos benefícios da renderização do lado do servidor. Nesse caso, os aplicativos CSR funcionam bem, são mais fáceis e baratos de hospedar.
Ao construir aplicativos da
web, eles geralmente se beneficiam menos da renderização do lado do servidor. Normalmente, esses aplicativos são reutilizados pelos usuários e podemos aplicar o cache para fornecer um carregamento extremamente rápido sem o custo e o incômodo do SSR.
Esperamos que este artigo tenha ajudado você a decidir se NextJS e Create-React-App são adequados para seu próximo projeto. Ambas as ferramentas são muito interessantes para criar aplicativos React. Você não poderá escolher um vencedor: para alguns casos é melhor usar NextJS, e para outros - Create-React-App.