Interpretação do Lado do Servidor

A interpretação do lado do servidor (SSR), é a capacidade duma aplicação contribuir para a visualização da página da Web no servidor em vez de desenhá-la no navegador. O lado do servidor envia uma página totalmente desenhada para o cliente; o pacote de JavaScript do cliente assume o controlo, o que permite que a aplicação de Vue.js se hidrate .

Servidor de Node.js necessário

É necessário um ambiente de JavaScript para desenhar a nossa página da Web. Um servidor de Node.js precisa de ser configurado para executar a nossa aplicação de Vue.js.

Extender e controlar o servidor

Podemos estender o servidor com intermediário do servidor (serverMiddleware) e controlar as rotas com o intermediário:

export default function (req, res, next) {
  console.log(req.url)
  next()
}

export default {
  serverMiddleware: ['~/server-middleware/logger']

}

Ambientes de Servidor vs. Navegador

Como estamos num ambiente de Node.js, temos acesso aos objetos da Node.js como req e res. Não temos acesso aos objetos window ou document, pois estes pertencem ao ambiente do navegador. No entanto, podemos utilizar window ou document utilizando as funções gatilhos beforeMount ou mounted:

beforeMount () {
  window.alert('hello');
}
mounted () {
  window.alert('hello');
}

Etapas de interpretação do lado do servidor com a Nuxt

Passo 1: Navegador ao Servidor

Quando um navegador envia o pedido inicial, este atingirá o servidor interno da Node.js. A Nuxt gerará a HTML e a enviará de volta ao navegador com os resultados das funções executadas, por exemplo, asyncData, nuxtServerInit ou fetch. As funções gatilhos também são executadas.

Passo 2: Servidor ao Navegador

O navegador recebe a página desenhada a partir do servidor com o HTML gerado. O conteúdo é apresentado e a hidratação da Vue.js entra em ação, tornando-o reativo. Depois deste processo, a página é interativa.

Passo 3: Navegador para Navegador

A navegação entre páginas com o <NuxtLink> é feita no lado do cliente, por esta razão não é necessário acessar o servidor novamente, exceto se atualizarmos o navegador manualmente.

Advertências

window ou document indefinido

Isto deve-se à interpretação do lado do servidor. Se precisarmos de especificar que queremos importar um recurso apenas no lado do cliente, precisamos de utilizar a variável process.client.

Por exemplo, no nosso ficheiro .vue:

if (process.client) {
  require('external_library')
}

iOS e números de telefone

Algumas versões do Safari para telemóvel transformam automaticamente números de telefone em hiperligações. Isto acionará um aviso NodeMismatch, uma que o conteúdo da interpretação do lado do servidor já não corresponde ao conteúdo do sítio da Web. Isto pode tornar a nossa aplicação inutilizável nestas versões do Safari.

Se incluirmos números de telefone na nossa página de Nuxt, temos duas opções.

Usar um metamarcador para impedir a transformação

<meta name="format-detection" content="telephone=no" />

Embrulhar os nossos números de telefone em hiperligações

<!-- Exemplo de número de telefone: +7 (982) 536-50-77 -->

<template>
  <a href="tel: +7 (982) 536-50-77">+7 (982) 536-50-77</a>
</template>