Closed4

ステータスコードが304になる問題についての調査記録

なにげにスクラップは初投稿。
何か気になることがあったときの調査記録として良さそうなので使ってみる。

現在Next.js × RailsAPIでポートフォリオを作成中。
Next.jsとRailsAPIの連携テストを済ませ、いざ本格的にバックエンドのリポジトリを作成して、再びNext.jsとの連携テストを行っている最中に軽度の気になることに遭遇。

その気になることとは、Rails側の外部APIを叩いてデータを取得する際、返ってきたステータスコードが`200`ではなく`304`で返ってきたということ。

便宜上、テスト用で作成したRailsAPIとの連携を`テスト連携`、本番用に作成したRailsAPIとの連携テストを`本番連携`と呼び分けることにする。

続く。

そもそも、ステータスコードというものについてすら最近ようやく理解したばかりで、HTTP通信などについてもまだまだ詳しくは理解できてはいない状態でこの問題を考えるのは沼にハマる予感がするが、このまま見過ごすのも気持ちが悪いので調べてみることにした。

元はと言えば、`テスト連携`時はこのようなことはなく、何回リクエストを送っても`200`が返ってきていた。
ところが、`本番連携`時になると、`テスト連携`時と殆どコードを変えていないにも関わらず`304`が返ってくるようになった。

`304`について色々と調べてみた。
調べてみた感じ、以下の内容が分かりやすかった。

この304というのは、304 Not Modifiedというもので 「未更新」という意味をもちます。サーバーからはデータをダウンロードせずにブラウザに記憶されているキャッシュを利用しているということです。

引用元:修正したはずのウェブデザインが正常に反映されない場合のキャッシュ削除方法

304は「未更新」を表します。私達が正常にWebページを見れているとき、多くは200ステータスが返ってきているのですが、実際には304ステータスのコンテンツが混じっていることもあります。このときWebサーバからはメッセージボディ、つまりコンテンツが返ってきません。ブラウザ側では304を受け取ると、ブラウザ内のキャッシュに残っているコンテンツを使ってWebページを表示しています。

引用元:【わかりやすい】HTTPステータスコードとは/301、404、503などの意味を解説

これらを踏まえて、その後に色々と試してみた結果分かったことは以下のようなものになる。
ここでRailsAPIへリクエストしているのは、その該当テーブルの全件データ取得の場合について。

  • 初回で1度APIへアクセスしてデータを取得した時は、ステータスコードは`200`となり、そのデータをブラウザがキャッシュとして保持しておく。
  • 再度そのAPIへアクセスした際、前回のデータから特に更新等ない場合は、前回時点でブラウザがキャッシュとして保持しているデータを返す。この時のステータスコードが`304`となる
  • また、DBなどに直接データを追加したあとに再度そのAPIへ全件取得のリクエストを投げると、ステータスコード`200`で返ってきて、追加したデータまで含めて返却される

大体こんな感じだと思う。なので、特に`304`が返ってきてもそこまで気にしなくていいのかもしれない。

ただ不可解なのは、最初に挙げた`テスト連携`の時には、ステータスコード`304`で返ってきたことは一度としてなかったように思えるので、テスト時と本番時でほぼ実装をしているのにその点だけ異なっているのはやや気がかり。

今後も調査を続けようと思うが、ひとまず`304`だったとしても、データ更新時には確りと新規データまで含めて取得できるようなのでこのまま開発を進めていこうと思う。

先程の投稿で、以下のように述べた。

ただ不可解なのは、最初に挙げた`テスト連携`の時には、ステータスコード`304`で返ってきたことは一度としてなかったように思えるので、テスト時と本番時でほぼ実装をしているのにその点だけ異なっているのはやや気がかり。

気になって`テスト連携`時のものでローカルサーバーを立てて確認したところ、全く同じように`304`を返した。。。

自分の思い違いだった…

`テスト連携`時のものでも同様に、初回はブラウザのキャッシュがない状態なので`200`でリクエストが成功し、更新ボタンでページ更新をするとDev ToolsのNetworkタブに`304`と見慣れた数字が並んだ…。

以上、この問題については一応解決したと思うので、閉じることにする。

HTTP通信についてまたひとつ賢くなったので良しとする😓

このスクラップは2021/02/14にクローズされました
ログインするとコメントできます