Règles SSR

Chaque règle présente sur cette page son objectif, sa configuration et ses exemples complets Mauvais et Bon, accompagnés de leurs explications. Les lignes surlignées montrent les modifications ; le code copié conserve la source complète. Les limites de prise en charge actuelles sont précisées avant les exemples concernés.

Toutes les règles · Options des règles · Correspondance de migration ESLint · Vérifications du projet · Attributs entre composants

ssr/no-browser-globals-in-ssr

Interdire les variables globales propres au navigateur dans un contexte SSR

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (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

Mauvais

Setup lit immédiatement window.innerWidth, alors que window n’existe pas lorsque le composant s’exécute sur le serveur.

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

Bon

La largeur initiale est une valeur de ref utilisable sur le serveur, et l’accès au navigateur est déplacé dans onMounted, qui s’exécute sur le client plutôt que pendant le setup SSR.

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

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

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles

ssr/no-hydration-mismatch

Interdire les valeurs non déterministes qui causent des divergences d’hydratation

Mauvais · Bon

Gravité par défaut: warning
Préréglages: happy-path, nuxt, ecosystem, opinionated
Correction automatique: Aucune ; examinez la modification proposée
Champ d’application: Templates et blocs des SFC Vue, avec le contexte du script requis par la règle
Options: Aucune option propre à la règle. La gravité et le choix des préréglages sont configurables.

Configuration (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

Mauvais

Le template évalue Math.random() pendant le rendu ; le serveur et le client peuvent donc produire des textes différents pour le même paragraphe.

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

Bon

Le paragraphe affiche l’état stable seed au lieu d’un nouveau résultat aléatoire. Dans cet exemple de style Nuxt, useState fournit l’état partagé et la valeur d’initialisation est la constante "stable".

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

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

Le bon exemple évite le diagnostic de cette règle avec la configuration ci-dessus ; d’autres règles peuvent encore signaler des diagnostics.

Implémentation · Toutes les règles