Nuxt.js 的一個常見錯誤警告
在 Nuxt.js
的使用過程中會遇到這樣一種錯誤:
[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.
簡單翻譯成中文是:
客戶端呈現的虛擬DOM樹與伺服器呈現的內容不匹配。 這可能是由不正確的HTML標記引起的,例如在<p>中巢狀塊級元素或缺少<tbody>。
經調查發現原因可能有多種,故寫些文字記錄下來,以後發現別的再補上:sob:。
可能原因 1 - 不符合HTML規範
就像警告資訊中說的那樣 - 由不正確的HTML標記引起的,例如在<p>中巢狀塊級元素或缺少<tbody>
。
對於這種情況,檢查下是否有這樣的模板內容是否有不遵守HTML規範的寫法,改正就好了,問題不大。
如果是某個引入的外掛導致的,自己沒辦法改,只能選擇用 <no-ssr>
不讓它在服務端渲染或者忽略警告。
可能原因 2 - 服務端和客戶端資料不一致
有時候按照原因1找了很久也沒能解決問題,但有其他一些怪異表現 - 列表渲染不正常:例如剛渲染完列表數量正常,載入完後數量就錯了,或有資料消失了。
我遇到的這種情況是我的程式碼不規範,更改了資料內部的結構,例如下面的程式碼:
props: { sources: Array }, computed: { formattedSources() { return this.sources.reduce((res, source) => { const urls = source.url.split('\n').filter(r => !!r) source.url = urls[0] res.push(source) urls.slice(1).forEach(url => { res.push({ title: url, url }) }) return res }, []) } }
這段程式碼中 source.url = urls[0]
這裡我改動了props裡的sources內部資料,導致 Nuxt.js
輸出資料到頁面,然後在瀏覽器端重新載入渲染時已近和服務端渲染時的資料不一致,出現了這個錯誤警告。那麼解決方法也有了,不要篡原資料。另外,在 computed
中篡改資料本來就是錯誤的寫法:flushed:。