Nuxt Server side rendering
最近在使用Nuxt發現有這個錯誤問題
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
像是這個狀態就會報錯
<span>
{{ $t('hello.success') }}:
<!-- 註解 -->
</span>
<!-- Good -->
<span>
{{ $t('hello.error') }}
<!-- 註解 -->
:
</span>
<!-- BAD -->
注意v-if的問題和v-for的使用
<template>
<div>
<client-only>
<span v-show="$vuetify.breakpoint.mobile"><span/>
</client-only>
</div>
</template>
<!-- Good -->
<template>
<div>
<client-only>
<span v-if="$vuetify.breakpoint.mobile"><span/>
</client-only>
</div>
</template>
<!-- BAD -->
$vuetify.breakpoint.mobile 基本上只能在client-only上，
傳入的變數Server side可能和Client side不一樣。
將程式碼從created()換到mounted() 或是 在created()使用if(process.client)