Por que escolhi Next.js em vez de Gatsby, Gridsome ou Nuxt?

Quando escolhemos uma estrutura para um novo projeto da web, geralmente tendemos a ficar com as ferramentas com as quais estamos familiarizados, independentemente de quão bem elas se encaixam no projeto. Estou tentando fazer exatamente o oposto. Sempre que surge uma oportunidade, tento novas tecnologias. O que aprendi depois dessas experiências? Por que acabo com Next.js como minha ferramenta de gerador de site estático (SSG) padrão? Neste post vou falar sobre como experimentei diferentes tecnologias web. Trata-se de encontrar uma ferramenta adequada dentro do Jamstack, como escolher exatamente o que é certo para o desenvolvedor e se integrar bem ao projeto dele, por que escolhi Next.js.

Sobre minha experiência em desenvolvimento web

Comecei minha jornada no desenvolvimento web com PHP e MySQL, e então, quando estava na universidade, mudei para a plataforma .NET. Eu gostava de segurança de tipo, modelo MVC, recursos de depuração de código. Foi assim, continuei usando .NET no futuro, fazendo programação e consultoria. Mas eu estava mudando gradualmente para o JavaScript e, em particular, as primeiras versões do Angular.



Há cerca de dois anos, mudei quase inteiramente para o Jamstack. Decidi dar uma olhada mais de perto no Vue.js , pois parecia a ferramenta JavaScript mais amigável que existe. Eu fiz meu site pessoalusando Nuxt.js. É um gerador de site estático que agora é chamado de estrutura intuitiva para o desenvolvimento de aplicativos Vue.js. Quando terminei este projeto, saiu a primeira versão do Gatsby , um sistema para construir sites estáticos baseado no React . Usei Gatsby em meu próximo projeto para criar o site Kentico Advantage , um projeto simples voltado para apoiar agências da web. Esta foi minha primeira experiência com o React. E o que encontrei então, realmente não gostei. Dificuldades muito grandes surgiram mesmo onde era necessário fazer alguma coisa ninharia.



Meu próximo desenvolvimento foi meu próprio site de casamento. Então eu dei Gatsby e reagir outra oportunidade, mas no final, apenas um par de dias depois, eu mudei para o Gridsome quadro para Vue.js. Na época, esse gerador de sites estáticos estava ganhando popularidade rapidamente. Encontrei-o literalmente em cada esquina. Graças a este SSG, consegui fazer um site simples e funcional em três horas. Eu estava simplesmente fascinado. Vue.js cresceu um pouco mais aos meus olhos.



Então, o projeto Sourcebit apareceu . É um plugin usado para combinar várias fontes de dados e SSG, que é responsável por transformar os dados e torná-los mais fáceis de usar. Dito isso, Next.js era o único gerador de site estático baseado em JavaScript suportado pela Sourcebit.... Portanto, depois de aprender o básico, usei Next.js em outro projeto.

Escolha de ferramentas com base na sua própria experiência ou na experiência de outra pessoa

Acima, mencionei as ferramentas que mais usei nos últimos dois anos. Mas, se os compararmos, então, como é frequentemente o caso, entre eles não será possível escolher aquele que pode ser colocado em primeiro lugar sem hesitação.



Digamos que você seja um desenvolvedor responsável por escolher as ferramentas certas para seu próximo projeto. O tempo de início do trabalho no projeto pode depender de qual você escolher, portanto, é improvável que você possa se permitir uma longa experimentação com muitas dessas ferramentas.



Você pode escolher ferramentas com base em sua própria experiência e na experiência de outras pessoas. Se você já trabalhou com o Angular antes, pode decidir primeiro olhar para as ferramentas que usam o Angular. Se você trabalhou com o Angular pela última vez há muito tempo, verifique com seus colegas o que eles usam. É verdade que, em tal situação, eu não perguntei a ninguém sobre nada, mas imediatamente escolhi Vue.js. O problema é que todos os meus colegas já haviam trabalhado com o React antes. Portanto, no final, tive que usar o Google para resolver os problemas emergentes.



Outro fator que influencia a escolha de uma estrutura é o tamanho do projeto. Se você criar um site pessoal testando ferramentas nele, as questões que surgirão em seu trabalho serão simples. As respostas para elas geralmente são encontradas na documentação da ferramenta selecionada. Mas digamos que você esteja desenvolvendo um projeto corporativo. Eles usam compilações parciais, algumas partes do projeto são renderizadas no servidor, ele usa muitas fontes de dados. Se no decorrer do trabalho tiver alguma dificuldade, então com a ajuda da documentação não será possível resolvê-la, terá que procurar respostas fazendo perguntas aos colegas ou em algo como Stack Overflow.



Mencionei três ferramentas JavaScript acima. Mas Jamstack nem sempre é JavaScript. Talvez PHP ou Ruby esteja mais perto de você. Para encontrar o gerador de site estático adequado para você, dê uma olhada na tabela a seguir.





Não posso dizer nada sobre plataformas com as quais ainda não tentei trabalhar. Mas posso compartilhar minhas idéias sobre Vue.js, React e geradores de sites estáticos relacionados.

Vue.js: comparando Gridsome e Nuxt.js

O framework Vue.js é conhecido e renomado por sua excelente documentação. Gridsome segue o mesmo caminho. A documentação para este SSG é muito bem escrita. Tem tudo o que qualquer um que começa com o Gridsome pode esperar. Verdade. Quando li esta documentação, pareceu-me que seus autores estavam lendo meus pensamentos. Gridsome usa GraphQL. Portanto, as fontes de dados devem ser conectadas ao site usando plug-ins especiais. O Gridsome associa automaticamente modelos de dados a modelos com nomes correspondentes e organiza o roteamento. Para iniciantes, essa é uma grande vantagem. O Gridsome permite recursos externos de JavaScript. Eu sei que não soa como "prática recomendada", mas, por exemplo, se você baixar um modelo de um site como HTML5UP.net, esse modelo conterá alguma quantidade de código JS. Quando precisei de algo assim no Nuxt.js, tive dificuldades. No final, tive que reescrever a funcionalidade correspondente no Vue.



Resumindo minha experiência de uso do Gridsome, posso dizer que foi fácil para mim trabalhar. O framework me ajudou a conseguir o que eu precisava, não tive que lutar contra os obstáculos que essa plataforma colocaria na minha frente. O Gridsome permite que você acesse um site simples e funcional em apenas algumas horas.



Ao trabalhar com Nuxt, a coisa mais difícil era entender as especificidades de trabalhar com o armazenamento de dados Vuex e criar o Vuex.store... Esses repositórios são usados ​​em projetos Nuxt.js. Se um componente precisa trabalhar com dados, você precisa continuar a partir do fato de que todos os dados estão armazenados em um só lugar. Você pode, é claro, armazenar dados no nível do componente, mas muitas vezes acontece que diferentes componentes usam os mesmos dados. Como resultado, para evitar a duplicação de código, você precisa usar um único armazenamento de dados. Para implementar esse tipo de armazenamento, você não precisa de plug-ins especiais que coletem os dados necessários de algum lugar. Embora eu, por exemplo, tenha usado um plugin projetado para funcionar com CMS sem a IU do Kentico Kontent . Definitivamente, isso tornou minha vida mais fácil, mas eu poderia muito bem ter usado a API Fetch com o SDK de entrega.... Depois que tudo deu certo para mim, percebi que gosto desse padrão. É confiável e flexível. Eu, para trabalhar em grandes projetos, escolheria. Para utilizá-lo, basta, no início, dedicar algum tempo para conhecê-lo.



Nuxt.js suporta renderização do lado do servidor e modo de visualização. Uma grande comunidade se formou em torno dele. Tudo isso nos permite dizer que o Nuxt.js é um projeto mais maduro do que o Gridsome, e que o Nuxt.js é mais adequado para sites sérios.



Vamos resumir as informações sobre Gridsome e Nuxt.js listando seus pontos fortes (marcados com "+") e pontos fracos (marcados com "-") na tabela a seguir.

React: Gatsby Next.js

Vamos começar com Gatsby. Acredito que o recurso mais interessante desse framework seja representado por uma ferramenta para trabalhar com GraphQL chamada GraphiQL . Gatsby usa GraphQL. E o GraphiQL permite que você trabalhe com os dados usados ​​no site. Eu não posso enfatizar o suficiente a importância e utilidade desta ferramenta. Isso evita que o desenvolvedor tenha que ler a documentação da fonte de dados que está sendo usada. GraphiQL permite que você visualize dados interativamente. A partir dos dados, você pode escolher o que deseja. Isso resulta em consultas GraphQL geradas automaticamente que são copiadas para os componentes.





Trabalhar com GraphiQL



Usar GraphQL em Gatsby também significa procurar plug-inspara fontes de dados aplicáveis. É verdade que esses plug-ins estão disponíveis para todos os principais CMS sem uma interface de usuário. Outro ponto forte de Gatsby é que um grande número de plug-ins foi criado para este framework. Existem plug-ins para literalmente todas as ocasiões - de SEO, ao carregamento progressivo de imagens e à exportação de um esquema GraphQL.



Mas, ao trabalhar com Next.js, faltam ferramentas padrão para trabalhar com dados. Como resultado, o desenvolvedor precisa gastar tempo tentando descobrir exatamente o que usar em cada situação específica. Por exemplo, ao resolver problemas semelhantes, fui inspirado por este repositório e usei o padrão "Repositório". Se você pode viver sem GraphQL, Next.js lhe dará tudo o que Gatsby pode oferecer e muito mais.





Roteamento em Next.js



Next.js usa um modelo de roteamento baseado em arquivo. Isso torna muito fácil encontrar páginas e modelos, mesmo em situações em que você precisa trabalhar com um projeto desconhecido. Esta estrutura permite combinar páginas estáticas e páginas geradas dinamicamente. Esses dois mecanismos de criação de página podem até mesmo ser combinados em uma página. Isso facilita muito a implementação da funcionalidade de visualização domaterial. Ambos Gatsby e Next.js sabem como criar compilações incrementais. Mas no caso do Gatsby, você precisa hospedar o site na nuvem do Gatsby , e isso só é possível com plugins preparados com requisitos especiais.



Comparando Next.js e Gatsby, pode-se notar que Next.js gera pacotes de lançamento menores. Se falarmos sobre como encontrar materiais de ajuda e obter respostas às perguntas dos membros da comunidade, então, como a prática mostrou, Gatsby e Next.js parecem quase iguais a esse respeito.



Vamos resumir os prós e contras de Gatsby e Next.js.

Outras considerações a serem consideradas ao escolher uma plataforma

Ao decidir qual ferramenta usar para projetos web, muitas vezes pensamos assim: "A documentação é boa, muitas pessoas falam sobre ela no Twitter, lançamentos muitas vezes são lançados, há muitos plugins." Geralmente termina com esse raciocínio. Se você acredita que usará uma plataforma por muito tempo, se acha que ela pode ser utilizada em vários projetos ou até mesmo se tornar uma ferramenta oficial em toda a sua empresa, você também deve fazer as seguintes perguntas:

• , ?
• ?
• ?
• , , - ?
• ?
• - ?

Quando se trata de escolher frameworks web, costumo usar Vue.js sempre que possível. Parece-me que este framework, sem muita interferência em suas configurações padrão, permite que você crie o que eu preciso de forma rápida e fácil. Eu geralmente uso o Vue.js sempre que preciso de elementos personalizados e componentes tradicionais de sites que precisam de funcionalidade dinâmica. Estou construindo pequenos sites no Vue.js. E, como não uso o Vue.js para grandes projetos, costumo usar o Gridsome.



Para projetos maiores e mais sérios, uso a biblioteca React. Em Kentico, quase todo o desenvolvimento de front-end é baseado no React. A empresa planeja caminhar nessa direção no futuro. Portanto, é lógico que eu faça o mesmo. Se falarmos sobre a escolha de um gerador de site estático, agora uso Next.js e Gatsby, mas estou mais inclinado para o primeiro deles. Para mim, o maior recurso dessa estrutura é o roteamento baseado em arquivo, que também oferece suporte a rotas dinâmicas. Também gosto da compatibilidade com Sourcebit, que permitirá, se necessário, alterar as fontes de dados ou SSGs sem reescrever tudo do zero.



Quais geradores de sites estáticos você usa?