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

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

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

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

58閲覧

Next.js × ISR で発生している404エラーの原因を特定したい

tegaafh

総合スコア0

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

AWS Amplify

AWS Amplifyとは、AWSを用いたWebアプリケーション向けのJavaScriptライブラリです。サインアップ/サインイン、MFA、コンテンツ管理、さらにサーバーレスなバックエンドの自動構築などの実装が容易にできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2025/03/27 04:13

編集2025/03/27 04:18

実現したいこと

ブログサイトをアプリ内のWebviewで運営しております。
我々のプロジェクトの開発環境は以下です。
基盤:AWS Amplify(Gen1)
Frontend:Next.js14(Pages Router)/ ISR
コンテンツ管理:microCMS
Error Tracking:Sentry

今回、記事のデータ管理を行なっているmicroCMS管理画面上で記事IDを更新したことで、旧記事IDに対するエラーが頻発しています。
このエラーの原因を特定したいです。

発生している問題・分からないこと

記事IDは各記事のリンクに使用しているため、古いキャッシュを見ているユーザーが、古い記事IDのリンクにアクセスすることによってこのエラーが発生していると思われます。
旧記事IDへのリクエストによるエラーが捕捉されているため、旧記事IDのリンクにユーザーがアクセス可能な状況が発生していると考えています。

旧記事IDへのリンクがクライアントサイドにあり、ユーザー間でシェアされている場合、追跡は難しいですが、アプリの性質上ユーザーがURLをコピーする操作には一手間必要であり、また広範囲かつ長期的にエラーが発生しているため、古いリンクがクライアントサイドにあることがエラーの要因である可能性は極めて低いと判断して考察から除外しています。

上記の前提を踏まえると、キャッシュによる影響がこの問題の要因であると考えられますが、具体的な対象方法、原因が特定できていません。

ISRのrevalidate期間は60秒であり、CloudFrontのキャッシュ生存期間も60秒です。
60秒経過後、キャッシュが更新されることになりますが、このエラーは長期的に発生しているため、古いキャッシュがどこかに残っていることになります。

CloudFrontのキャッシュをパージし、オリジン(Next.js)のキャッシュも再ビルドによって更新しました。
この時点で、CloudFrontにも、オリジンにも旧記事IDのキャッシュは存在しないと認識しているのですが、依然としてエラーが発生し続けています。

可能性として考えられるものがないか、些細なことでも良いのでご助言いただきたいです。

Amplify Hostingのカスタムヘッダーには、特定のパスに対して59秒間のキャッシュを許可し、古いキャッシュがあった場合に更新を強制するようなシンプルな設定を行なっていますが、それ以外は何もしていません。

エラーメッセージ

error

1"Error: fetch API response status: 404" 2上記はmicroCMS SDKからリターンされるエラー文言になります。

該当のソースコード

特になし

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

AWSサポートに同様の問い合わせを行なっていますが、Amplify Hosting側の問題である可能性は低いと回答いただいています。

その他、実装内で旧記事IDを直接指定してリクエストを送信するような処理は行われておりません。

補足

こちら側からクライアントサイドにキャッシュを設定するような処理は行なっておりません。
ブラウザ固有のデフォルト挙動については現時点で解明できていません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.32%

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

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

質問する

関連した質問