Guides

Server Function の結果と画面更新

Server Function の実行結果と画面更新の関係を解説します。

Server Function の戻り値は、フォームへのフィードバックに使います。 更新後の Page は、保存済みのデータを表示します。

一度の呼び出しで結果と更新後のページを返す

設定フォームの保存では、Effront は次の順に処理します。

  1. Server Function のハンドラーが設定を書き込む。
  2. Effront がルートを再レンダーし、Page が保存済みの設定を読み取る。
  3. 一つのレスポンスで、関数の結果と更新後のページを返す。

送信ハンドラーから画面更新用のリクエストを追加する必要はありません。 JavaScript がない場合、ネイティブフォームの送信が成功すると、React のフォーム状態を含む完全な HTML ページが返ります。 Server Functions ガイドのように、Server Function をフォームや useActionState に直接渡してください。

画面より先に関数の結果が届く

ブラウザーからの呼び出しの Promise は、Effront が更新後のページを反映する前に resolve または reject します。 画面のほかの部分が更新中でも、フォームには「設定を保存しました」と表示されることがあります。 await の完了や送信中状態の終了は、新しい DOM 要素の存在を保証しません。 その要素へのフォーカス移動や計測は、更新後のコンポーネントがレンダーされるまで待ってください。

想定内の失敗は、フォームの状態として返します。 入力 Schema や未処理のハンドラーの失敗は、呼び出しを reject します。

画面更新の順序と書き込み順序は別

ブラウザーからの独立した呼び出しは、並行して実行されることがあります。 React の useActionState は、同じフックから送った呼び出しをキューに入れて順に実行します。

ブラウザーからの呼び出しの結果が届く前にページを離れた場合、Effront は現在のルートを更新します。 そのレスポンスによって、前のページへ表示が戻ることはありません。

保存 A の後に保存 B を開始すると、遅れて届いた A のレスポンスに同梱されたページがそのまま表示されることはありません。 それでも、保存 A が B の後にデータベースを変更する可能性はあります。 アプリケーションの書き込み順序のルールは、サーバー側のバージョン確認やトランザクションで保証してください。

レスポンスを受信できなくても、書き込みがロールバックされたとは限りません。 再試行する可能性のある書き込みには、重複検出を適用してください。