Next.js: クライアント コンポーネントがデータを変更した後にサーバー コンポーネントを更新する

Question

私はまだこのシナリオを理解しようとしているところです。 Next.js 13 でこれを行う正しい方法を誰かが提案できますか?

たとえば次のようにサーバー コンポーネントにユーザーのリストを表示します (MongoDB を使用):

リーリー

同じページで、ユーザーを追加するためのクライアント コンポーネントも定義しました:

リーリー

以下に示すように、両方がサーバー コンポーネント ページに一緒に表示されます。

リーリー

新しいユーザーがコレクションに追加されたことを UsersList に「リロード」または「通知」して、新規/更新されたユーザーを強制的に表示するにはどうすればよいですか?

Answer 1

https://stackoverflow.com/a/75127011/17964403 これはクライアント側での変更に最適ですが、クライアントからの入力を使用して検索/フィルタリングなどの操作を行い、同じデータを再フェッチしたい場合は、

のようなことを行うことができます。

リーリー

サーバーコンポーネントでは、検索パラメータを小道具として受け取り、検索パラメータが存在するかどうかを確認し、存在する場合はそのパラメータをフェッチ呼び出しで渡すと、フィルタリングされたアイテムが取得されます。

Answer 2

クライアント コンポーネントによって更新されたデータをサーバー コンポーネントに反映するには、router.refresh() (router は #) を使用できます。 ##useRouter()。 To Do リスト アプリの使用例を次に示します: リーリー リーリー

⚠️:

refresh()クロール リクエストはキャッシュされています。この例では cache: 'no-store' となっているのはそのためです。