質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

Q&A

解決済

NuxtJS 動的に生成したページをリロードしたらpreloadedの警告がでる件

b-c
b-c

総合スコア1

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

2回答

0グッド

0クリップ

10995閲覧

投稿2021/05/01 01:41

前提

環境

Nuxt: 2.15.3
Nuxt Content: 1.11.1
Netlify

ページ構成

pages/ post/ _slug.vue index.vue

設定(nuxt.config.js)

js

1export default { 2 ssr: true, 3 target: 'static', 4 //.... 5 generate: { 6 fallback: true, 7 async routes() { 8 const { $content } = require('@nuxt/content') 9 const posts = await $content('posts', { deep: true }) 10 .only(['slug']) 11 .fetch() 12 return posts.map((post) => `post/${post.slug}`) 13 }, 14 } 15}

Netlifyの設定

  • _redirect
/* /index.html 200
  • Prerendering

Netlifyの設定にあるPrerenderingは有効にしています。

実現したいこと

Nuxt Contentを使用したブログを作成しています。
OGPの設定を活かすために、SPAではなくSSGとして生成したページをNetlifyで公開しようとしています。

記事のコード

  • slug.vue

js

1export default { 2 async asyncData({ params, error, $content }) { 3 //記事の取得 4 let post = await $content('posts', { deep: true }) 5 .where({ slug: params.slug }) 6 .fetch() 7 post = post[0] 8 //関連記事の取得 9 const relation = await $content('posts', { deep: true }) 10 .only(['title', 'slug', 'image']) 11 .where({ tags: { $contains: post.tags }, slug: { $ne: post.slug } }) 12 .sortBy('createdAt', 'desc') 13 .limit(5) 14 .fetch() 15 return { 16 post, 17 relation, 18 } 19 }, 20}

発生している問題・エラーメッセージ

動的に生成したページ(_slug.vue)をリロードすると、ブラウザで以下の警告がでます。

(index):1 The resource <url>/payload.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

このページのpayload.jsの読み込みが遅いせいなのか、うまく動作しないところがあります。
この警告の解決方法がわかる方がいらっしゃいましたら、ご教授お願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

自己解決

slugでページを構成していましたが、これをpath(Nuxt Contentのディレクトリ構成)に変更することで解決しました。
なぜこれで解決できるのか、根本的な理由はよくわかっていません。

  • ページ構成
pages/ post _category _slug.vue index.vue
  • nuxt.config.js

js

1export default { 2 generate: { 3 fallback: true, 4 async routes() { 5 const { $content } = require('@nuxt/content') 6 const files = await $content('post', { deep: true }) 7 .only(['path']) 8 .fetch() 9 return files.map((file) => (file.path === '/index' ? '/' : file.path)) 10 }, 11 }, 12}
  • _slug.vue

js

1export default { 2 async asyncData({ params, error, $content }) { 3 let post = await $content('post', { deep: true }) 4 .where({ slug: params.slug }) 5 .fetch() 6 post = post[0] 7 const relation = await $content('post', { deep: true }) 8 .only(['title', 'slug', 'image', 'path']) 9 .where({ tags: { $contains: post.tags }, slug: { $ne: post.slug } }) 10 .sortBy('createdAt', 'desc') 11 .limit(5) 12 .fetch() 13 return { 14 post, 15 relation, 16 } 17 }, 18}

投稿2021/05/01 03:57

b-c

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

ブラウザで以下の警告がでます。

この警告自体は気にしなくて構いません。「<link rel="preload">でファイルを参照したけれど実際には使わなかった」というだけです。

投稿2021/05/01 03:00

maisumakun

総合スコア141476

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

b-c

2021/05/01 03:51

回答ありがとうございます。 「実際には使わなかった」というのが問題で、payload.jsが読み込まれていないがためにjs側でエラーになってしまうのです。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。