Next.jsにおけるサーバーアクションとルートハンドラーの使い分け
技術勉強会で、Next.js を使ったウェブアプリケーション開発の重要なトピックとして、サーバーアクションとルートハンドラーの使い分けについて話がありました。
それぞれの役割と使い分けのポイントを詳しく解説します。
サーバーアクション(Server Action)
サーバーアクションは、主にユーザーインターフェースからのデータ変更を扱うための仕組みです。Next.js のアプリケーションにおいて、ユーザーが何らかの操作を行った時に発生するサーバーサイドの処理を担当します。これらのアクションは、データベースへの更新や新規データの追加、削除といった操作が含まれます。
サーバーアクションの用途
- フォーム送信: ユーザーがフォームを送信した際に、データをバリデーションしてデータベースに保存する。
- アイテム削除や更新: リストからのアイテム削除や内容の更新など、ユーザーがインターフェースを通じて操作するアクション全般。
ルートハンドラー(Route Handlers)
ルートハンドラーは、Next.js アプリケーションが外部システムと連携するためのエンドポイントを提供します。API のように機能し、外部からリクエストがあった場合に特定の処理を行います。これにより、モバイルアプリや他のサービスからデータアクセスや操作ができるようになります。
ルートハンドラーの用途
- 外部 API 公開: 自社サービスのデータを外部に提供し、他のサービスやアプリケーションと連携できるようにする。
- モバイルアプリとの連携: 自社のモバイルアプリケーションがデータを取得したり、更新したりする際に利用する。
使い分けのポイント
-
内部操作 vs 外部公開
- サーバーアクションは、主に内部のユーザー操作に対して迅速に反応するために使用。
- ルートハンドラーは、外部デベロッパーや他サービスがアクセスすべきデータや機能を安全に公開するために使用。
-
アクセスの管理
- サーバーアクションの場合、ユーザー認証や許可の確認などが重要となる。
- ルートハンドラーは、API キーやトークンを使った外部アクセス管理が欠かせない。
セキュリティの違い
サーバーアクションは POST メソッドを使用し、Origin ヘッダーと Host ヘッダーの一致を確認することで CSRF 攻撃を防ぎます。
ルートハンドラーでは、手動での CSRF 保護が必要です。
All Server Actions can be invoked by plain
<form>, which could open them up to CSRF attacks. Behind the scenes, Server Actions are always implemented using POST and only this HTTP method is allowed to invoke them. This alone prevents most CSRF vulnerabilities in modern browsers, particularly due to Same-Site cookies being the default.
As an additional protection Server Actions in Next.js 14 also compares the Origin header to the Host header (or X-Forwarded-Host). If they don't match, the Action will be rejected. In other words, Server Actions can only be invoked on the same host as the page that hosts it. Very old unsupported and outdated browsers that don't support the Origin header could be at risk.
Server Actions doesn't use CSRF tokens, therefore HTML sanitization is crucial.
When Custom Route Handlers (route.tsx) are used instead, extra auditing can be necessary since CSRF protection has to be done manually there. The traditional rules apply there.
参考
結論
Next.js を用いたアプリケーション開発において、サーバーアクションとルートハンドラーはそれぞれ異なる役割を持ち、適切に使い分けることでアプリケーションの効率性と安全性を高めることができる。
サーバーアクションはユーザーインターフェースからの迅速なデータ操作に適しており、
ルートハンドラーは外部システムとの連携に適している。
これらの機能を理解し、適切に活用することで、より堅牢で信頼性の高いアプリケーションを構築することができる。
Discussion