【Nuxt.jsのエラー修正】パート2

今回発生した挙動

nuxt で作成したサイトをnpm run generateしてホスティングした際に遷移がうまくいかない。

n-linkで遷移しようとしてもURLは変更できるもののページはリロードされないと表示されない状況。

原因

レンダリングでエラーが発生している。

エラー分は下記になります。

[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.

修正する

• ブロックレベルの要素を<p>の中に入れ子になっている場合は修正
• tableタグに<tbody>を追加する
• <no-ssr/>を追加する 対象のGithubのissue

今回の自分の環境ではpタグの中にブロック要素を追加してしまっていたので修正したところ解決しました。

今回の学び

レンダーエラーが具体的にどのような挙動に影響するのかを学べた。