Nuxt2のSSGで静的サイトを作っているけど、
一部のコンポーネントが非同期に読み込まれてるっぽい感じに。。

調べてみると、named slotsを使っていると、
Hydrationがうまく行かず、クライアントサイドでレンダリングされるよう。。

使ってたコード

以下のような感じで、ヘッダにロゴを配置するだけのコンポーネント

<!-- MyHeader.vue -->
<template>
  <header>
   <slot name="logo"></slot>
  </header>
</template>

<!-- page/index.vue -->
<template>
  <MyHeader>
    <template #logo>
      <MyLogo />
    </template>
  </MyHeader>
</template>

期待するのはこんな感じだけど、

<!-- page/index.vue -->
<template>
  <header>
    <MyLogo />
  </header>
</template>

読み込んだ瞬間は、こんな感じになる。。

<!-- page/index.vue -->
<template>
  <header>
  </header>
</template>

各パッケージのバージョンはこんな感じ。

nuxt ... v2.15.3
@nuxt/components ... v2.1.3
vue ... v2.6.12
@nuxt/vue-renderer ... v2.15.3
vue-server-renderer ... v2.6.12

やったこと

いくつかのissueが上がっていて、vue-server-rendererの問題っぽい。

ワークアラウンドとして、{ loading: true }オプションを付けるとよいらしい。

// nuxt.config.ts
import { NuxtConfig } from "@nuxt/types";

const config: NuxtConfig = {
  components: {
    loader: true,
    dirs: [{ path: "@/components", pathPrefix: false }]
  },
};

export default config;

これでクライアントサイドで再レンダリングされなくなった(*´ω｀*)

ほかのvue-server-rendererの問題だと、
コンポーネント名がHTML5のタグ名と同じ場合だと発生するよう。

今回はなかったのでこれではないっぽかった(*´ω｀*)

以上!! むずい。。(*´ω｀*)

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Nuxt2のnuxt/componentsでgenerateするとnamed slotsでレンダリングされない

使ってたコード

やったこと

参考にしたサイト様