Nuxt.js: Primeiras impressões
Tags: nuxt, vue, javascript, webdev
Published: 2020-02-14 02:07:25

Finalmente, meu primeiro texto aqui no DEV! :)

![Excitação](https://media.giphy.com/media/aQYR1p8saOQla/giphy.gif)

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!