Nuxt.js: Vue.js Framework

Nuxt.js é um framework de alto nível construído com Vue.js que abstrai muitas configurações e sugere várias boas práticas. O principal propósito do Nuxt.js é fornecer um ambiente completo para Server Side Render e Prerender.

Basicamente o Server Side Render e o Prerender tem como objectivo executar seu aplicativo Vue.js com Node.js, em vez de executar no Navegador. O principal benefício desde processo é entregar para o usuário o HTML pronto, algo muito importante para os mecanismos de pesquisa como Google, Bing, Yahoo e DuckDuckGo.

Quando o Nuxt.js é usado para Server Side Render, o HTML é processado pelo Nuxt.js a cada requisição (algo muito útil quando os dados mudam com frequência). Porém quando o Nuxt.js é usado para Prerender, o HTML é processado apenas uma vez e por isso que ao final temos um Static Site.

Enfim, o objetivo deste artigo é falar sobre o Prerender, mas se você quer saber mais sobre a diferença entre Server Side Render e Prerender, veja este tópico na documentação do Vue.js.

Nuxt.js: Prerender / Static Sites

Nas últimas versões do Nuxt.js foram realizadas várias melhorias com o objetivo de facilitar e agilizar a pré-renderização. Neste artigo do blog oficial do Nuxt.js tem alguns dados de benchmark que ajudam a entender a importância dessas melhorias.

Isso é algo muito bom para quem usa a arquitetura Jamstack e precisa de alta performance com muita segurança. Você sabe o quem Jamstack? Se não sabe, recomendo que leia este artigo onde descrevo os benefícios desta arquitetura.

Nuxt.js: Instalação

Para começar um projeto com Nuxt.js, basta executar:

npx create-nuxt-app <project-name>

cd <project-name>

Pronto, pastas e arquivos criados!

Vale ressaltar que o projeto Nuxt já vem com todos os diretórios previamente configurados, não vou entrar em detalhes sobre isso, mas na documentação do Nuxt tem uma explicação sobre a função de cada diretório.

Nuxt.js: Configuração Básica para um Static Site

Uma configuração muito importante para fazer uma pré-renderização é adicionar a propriedade target no arquivo nuxt.config.js:

// nuxt.config.js
export default {
  target: 'static',
};

Além de otimizar o processo de pré-renderização, essa configuração também disponibiliza a variável process.static para você usar dentro do app.

Outra coisa importante sobre isso é que as funções de Data Fetching somente serão executadas durante a pré-renderização. Ou seja, durante o uso do aplicativo as funções asyncData e fetch não serão executadas!

Nuxt.js: Comandos

Para iniciar o projeto no modo desenvolvimento, execute o seguinte comando:

npm run dev

Para fazer o pre-renderização de todo o projeto, execute o comando:

npm run generate

Após a pré-renderização todos os arquivos HTML, JavaScript e CSS estarão disponíveis na pasta "dist/". Esta é a pasta que você vai colocar no seu servidor quando seu projeto estiver pronto.

Para testar e visualizar o resultado da pré-renderização, basta executar:

npm run start

Basicamente o comando acima inicia um servidor HTTP com os arquivos da pasta "dist/". Para mais detalhes sobre os comandos do Nuxt, segue o link da documentação oficial.

Nuxt.js: Paginas e Roteamento

Uma função bem interessante do Nuxt.js é que o roteamento é gerado automaticamente de acordo com a estrutura de arquivos da pasta "pages/". Se você tem a seguinte estrutura:

pages/index.vue
pages/user/index.vue
pages/user/one.vue

Automaticamente o Nuxt configurará as seguintes rotas:

routes: [
  { name: 'index', path: '/', component: 'pages/index.vue' },
  { name: 'user', path: '/user', component: 'pages/user/index.vue' },
  { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' },
];

Não vou entrar em detalhes sobre as regras de roteamento do Nuxt, mas recomendo que tenha um bom domínio sobre isso. No site oficial tem uma excelente documentação sobre as regras de roteamento e é praticamente uma leitura obrigatória.

Nuxt.js: Configurações para Pré-renderização

No arquivo "nuxt.config.js" tem uma propriedade "generate" que deixa você configurar vários aspectos do processo de pré-renderização.

// nuxt.config.js
export default {
  generate: {
    //...
  },
};

Nuxt.js Configurar rotas dinâmicas

A primeira configuração é a routes. Basicamente o Nuxt.js vai pré-renderizar todas as suas rotas, ou seja, todos componentes que estão dentro da pasta "pages/".

Porém se você leu a documentação que eu recomendei, você deve ter se deparado com as Dynamic Routes. Como o parâmetro da rota é dinâmico, você precisa especificar para o Nuxt com quais parâmetros você deseja fazer a pré-renderização. Caso contrário essas rotas dinâmicas serão ignoradas.

Digamos que você tenha a seguinte rota: "pages/users/_id.vue"

Logo na configuração você precisa fazer algo assim:

// nuxt.config.js
export default {
  generate: {
    routes: ['/users/1', '/users/2', '/users/3'],
  },
};

Também é possível especificar essas rotas buscando em uma API:

// nuxt.config.js
import axios from 'axios';

export default {
  generate: {
    routes() {
      return axios.get('https://example.com/users').then((res) => {
        return res.data.map((user) => {
          return `/users/${user.id}`;
        });
      });
    },
  },
};

Se você não fizer essa configuração as rotas dinâmicas não serão pré-renderizadas, mas as rotas funcionarão mesmo assim, graças ao fallback que identifica que a rota existe e faz um redirecionamento.

Nuxt.js: Configuração para Fallback

Dentro do Nuxt, fallback é quando uma rota não é encontrada e uma página de erro é exibida. Por padrão o comando "generate" gera um arquivo com o nome "200.html" para essas situações, mas você pode personalizar isso.

// nuxt.config.js
export default {
  generate: {
    fallback: '404.html', // Para alterar o nome da página de fallback
  },
};

Para personalizar o layout desta página, basta criar o arquivo: layouts/error.vue

Nuxt.js: Exclusão de rotas da pré-renderização

Caso você não queira fazer a pré-renderização de alguma rota, basta declarar:

// nuxt.config.js
export default {
  generate: {
    exclude: ['/admin'],
  },
};

Lembrando que mesmo não fazendo a pré-renderização, rota vai funcionar normalmente graças ao fallback.

Nuxt.js: Crawler

Lembra que eu falei anteriormente que as rotas dinâmicas precisão ser especificadas para que o Nuxt consiga fazer a pré-renderização.

Então, o crawler é mais um recurso que pode te ajudar com as rotas dinâmicas. Basicamente o crawler faz uma varredura de todos os links que você tem dentro do seu aplicativo e identifica os links que não tem rotas pré-renderizadas e coloca esses links na fila de pré-renderização.

Digamos que algum lugar do seu sistema você tenha este link:

<nuxt-link to="/users/1000">User 1000</nuxt-link>

Consequemente esta rota será pré-renderizada.

Se você preferir, também é possível desabilitar este recurso:

// nuxt.config.js
export default {
  generate: {
    crawler: false,
  },
};

Essas são as configurações mais comuns para o processo de pré-renderização, mas existem mais opções que você pode conferir na documentação oficial por meio deste link.

Nuxt.js: Content Markdown

É bem comum que sites de conteúdo (como blogs ou sites de notícias) adotem a pré-renderização como opção para performance, segurança e otimização de SEO. Para estes tipos de sites pode ser útil o plugin @nuxt/content.

Basicamente este plugin faz a renderização de markdown para HTML. Para usá-lo basta seguir estes passos

Passo 1:

npm install @nuxt/content --save

Passo 2:

// nuxt.config.js
export default {
  modules: ['@nuxt/content'],
};

Passo 3: Criar um arquivo markdown na pasta "content", por exemplo "content/article-1.md".

Passo 4: Configurar algum componente.

<template>
  <div>
    <nuxt-content :document="doc" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content }) {
    let doc = await $content('article-1').fetch();
    return { doc };
  },
};
</script>

Nuxt.js: Meta Tags

Algo muito importante para o SEO e que se integra bem com a pré-renderização é o uso de Meta Tags.

Para usar Meta Tags no Nuxt.js é muito simples, basta você declarar uma função "head" dentro do seu componente:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Title!',
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        },
      ],
    };
  },
};
</script>

Nuxt.js: Sitemap

Não esqueça de definir um sitemap.xml para seu site. Basta você instalar e configurar o módulo @nuxtjs/sitemap:

npm install @nuxtjs/sitemap --save

// nuxt.config.js
export default {
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://sharklabs.com.br',
  },
};

Nuxt.js: Canonical URL

Existe um módulo específico para URL Canônica e também é super fácil de instalar e configurar.

npm install nuxt-canonical --save

// nuxt.config.js
export default {
  modules: [
    [
      'nuxt-canonical',
      {
        baseUrl: 'https://sharklabs.com.br',
      },
    ],
  ],
};

Por fim...

O uso de Static Sites é um recurso que vem ganhando popularidade e o Nuxt é uma excelente ferramenta para isso.

Vale lembrar que neste artigo eu utilizei o Nuxt na versão 2.14 e o @nuxt/content na versão 1.5.

Dúvidas ou sugestões é só entrar em contato. Abraço.