Nuxt.js: Primeiras impressões

Finalmente, meu primeiro texto aqui no DEV! :)

Na última semana finalizei um curso introdutório sobre Nuxt.js, um framework baseado em Vue.js que se propõe a resolver o problema da renderização de páginas do lado do servidor. Aqui vão minhas primeiras impressões sobre o nuxt.

O que é?

O Nuxt é um framework javascript baseado em vue.js, onde a principal proposta, como citei acima, é resolver a problemática relacionada a SEO em SPAs construídas com vue.js. O nuxt resolve o problema através da geração de páginas estáticas no servidor antes da renderização do lado do cliente. Ou seja, a primeira vez que a página é acessada sempre é estática, entretanto as próximas páginas serão uma SPA comum.

Pontos positivos

• É conhecido pelos desenvolvedores que a configuração necessária para gerar páginas estáticas utilizando o vue-server-render provoca algumas dores de cabeça. Com o framework, tudo é bem transparente, as opções já são pré-configuradas da forma a comunidade julga mais eficiente e você só precisará se preocupar com isso em casos muito específicos.

• A estrutura dos arquivos é muito bem definida. Em termos de componentes vue, existem 3 pastas: layouts, pages e components.

  • A primeira pasta serve para definir os layouts globais de suas páginas. Um propriedade chamada layout pode ser usada nas páginas para definir o layout a ser utilizado, caso contrário, será utilizado o layout padrão.
  • A pasta pages é onde se concentram as páginas da aplicação. É nessa pasta onde a mágica acontece. Cada arquivo e cada subpasta contida aqui é automaticamente mapeada para uma rota da aplicação. Então basta estruturar seus arquivos como se fossem os caminhos da url. Além disso, caso sua url tenha uma parte dinâmica, basta adicionar um _ ao nome da pasta, esse parâmetro será mapeado automaticamente para o componente da página em questão.
  • No diretório components estão os componentes que compõem as páginas.

• O framework é facilmente extensível. Através de plugins é possível adicionar novas funcionalidades e módulos externos.

• É possível executar código no servidor antes da renderização da página. Por meio da action nuxtServerInit e da variável de ambiente process.client é possível executar código no servidor node que renderiza as páginas. Um exemplo de aplicação disso é realizar uma requisição à uma API para coletar o conteúdo de uma página e preenchê-la antes de renderizá-la.

• É possível construir uma SPA comum sem SSR. Caso sua aplicação não necessite de SSR você pode utilizar a seu favor toda a estrutura e as pré-configurações do framework, como vuex, router, plugins e etc em sua SPA.

Ponto negativo

• A quantidade de arquivos index.vue. Quando sua aplicação cresce a quantidade de pastas tende a crescer também. Cada pasta que representar uma rota em sua aplicação, precisará ter um arquivo index.vue que será traduzida para a subrota base daquele diretório. Isso torna, em minha opinião, difícil/confuso localizar os arquivos no editor.

Essas são minhas primeiras percepções a cerca do framework. Gostei bastante e espero utilizá-lo em breve em uma aplicação real.

E você, conhece o Nuxt? Já usou? O que Achou? Me conta nos comentários!

Abraços e até mais!

Comments

[Helen Dias]

Gosto bastante do Nuxt
Acho que ele facilita bastante no dia a dia
A opção de criar layouts é umas das coisas que mais gosto nele. Fica muito simples de gerenciar
E o roteamento através do pages é uma mão na roda, né? Hahaha