Regras da SSR

Cada regra desta categoria reúne nesta página sua finalidade, configuração e exemplos incorreto e correto completos. Os exemplos de projeto também incluem os arquivos compartilhados, que devem ser usados nos dois casos. As linhas destacadas mostram a alteração; o código copiado preserva o conteúdo completo. As notas de suporte distinguem os diagnósticos disponíveis das convenções ilustrativas e dos contratos sem produtor atual; ativar um ID não implementa uma verificação ausente.

Todas as regras · Opções das regras · Mapa de migração do ESLint · Verificações do projeto · Atributos entre componentes

ssr/no-browser-globals-in-ssr

Proibir variáveis globais exclusivas do navegador no contexto de SSR

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ssr/no-browser-globals-in-ssr": "warn"
      }
    },
  },
});

vp run lint

Incorreto

Setup lê window.innerWidth imediatamente, embora window não exista quando o componente é executado no servidor.

<script setup lang="ts">
const width = window.innerWidth;
</script>

Correto

A largura inicial é um valor de ref seguro no servidor, e o acesso ao navegador é movido para onMounted, que é executado no cliente em vez de durante o setup de SSR.

<script setup lang="ts">
const width = ref(0);

onMounted(() => {
  width.value = window.innerWidth;
});
</script>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras

ssr/no-hydration-mismatch

Proibir valores não determinísticos que causam divergências na hidratação

Incorreto · Correto

Severidade padrão: warning
Predefinições: happy-path, nuxt, ecosystem, opinionated
Correção automática: Nenhuma; revise a alteração sugerida
Aplicável a: Templates e blocos de SFC Vue, com o contexto do script quando exigido pela regra
Opções: Sem opções específicas da regra. A severidade e a seleção de predefinições são configuráveis.

Configuração (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({
  vue: {
    linter: {
      "preset": "incremental",
      "rules": {
        "ssr/no-hydration-mismatch": "warn"
      }
    },
  },
});

vp run lint

Incorreto

O template avalia Math.random() durante a renderização, então o servidor e o cliente podem produzir textos diferentes para o mesmo parágrafo.

<template>
  <p>{{ Math.random() }}</p>
</template>

Correto

O parágrafo renderiza o estado estável seed em vez de um novo resultado aleatório. Neste exemplo no estilo do Nuxt, useState fornece o estado compartilhado e o inicializador é a constante "stable".

<script setup lang="ts">
const seed = useState("seed", () => "stable");
</script>

<template>
  <p>{{ seed }}</p>
</template>

O exemplo correto evita o diagnóstico desta regra com a configuração acima; outras regras ainda podem emitir diagnósticos.

Implementação · Todas as regras