Next.js(App Router)で、ビルド時のデータのまま、動的に最新のデータが取得できない。

Question

実現したいこと

・DBにinsertしたり、updateしたときに、新しいデータを表示させたい。

前提

フレームワークはNext.js(App Router)で、ORMはPrismaを使っています。
APIルートでデータを取得した後、クライアントコンポーネントでuseEffectを使って、最新データをリロードしようと試みていました。
開発環境では問題なく動作しましたが、Vercelにデプロイするとビルド時のデータのまま動きません。
動的にデータを取得するとき、APIを介してfetchしないほうがいいのでしょうか。

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

エラーメッセージはなし

Comments

[uky]

useEffectの依存配列には何を入れていますか？？

[uky]

載せれる範囲で構いませんので、該当のソースコードをいただければ回答できるかもしれません！

[junos]

>>ukyさん

ありがとうございます。お返事が遅くなりました。
useEffectの部分はこんな感じで書いています。

React.useEffect(() => {
const fetchData = async () => {
const response = await fetch('./api/Sample')
const data = await response.json()
setData(data)
}
fetchData()
}, [])

ちなみに、このコードを書いているファイルの先頭で、
export const dynamic = 'force-dynamic'
をつけると、予期した動作になりました。
正解とは違うかもしれませんが、今はとりあえずこれでしのいでいます。

[uky]

一旦は解消できているとのことで良かったです！
いただいている内容だけでは不透明なところが多く、パッと回答できなさそうですが、

DBへの書き込み後に書き込み後のデータをどのようにfetchしているのか次第な気がしました。
現状ではuseEffect内で初期マウント時にのみfetchするような処理に見えますので、ページ自体を更新（リロード等）させることで初期マウントを発生させる必要があるのではないでしょうか。

その点で言えば、force-dynamicはひとつ、解決の選択肢としては有効になったのだと思います。（強制的にサーバーフェッチ（≒ SSR）をかけるのでクライアントコンポーネントと呼べるのかわからないですが。。。

> https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
```
'force-dynamic': Force dynamic rendering, which will result in routes being rendered for each user at request time. This option is equivalent to getServerSideProps() in the pages directory.
```

[junos]

ukyさん

ありがとうございます！
おっしゃる通りで、データ更新後に再検証を挟むことで無駄をなくすことができたと思います！
とても助かりました！

Answer 1

データ更新の時に再検証させる
または

export const dynamic = 'force-dynamic'

を付け加えることで解決