Next.js Remix 選定と機能まとめなど
Kouta Wakamatsuこのスクラップについて
モダンなフロント技術スタックで新しいアプリケーションを構築する案件が開始したため、技術選定とFWの機能など調査したことのまとめ
Kouta WakamatsuNext.js vs Remix
元記事
Kouta WakamatsuNextのServer ActionsとRoute Handler
pages routerの時の事は詳しくないが、app routerでバックエンド側の処理（データの取得、変更など）を行うときにどういった方法があり、どういった書き方が推奨なのかを調査していった。
両者ともクライアントサイドから呼び出せるサーバーサイドのコードを書くことができるが、
Server Actions
- 高レベルの抽象化
// app/action.ts
// use 'use server' directive to indicate it is a server action
'use server'
export async function updateUser(userId, formData) {
// ...
}
クライアントサイドではこれを以下のように呼び出す
'use client'
import { updateUser } from './actions'
export function UserProfile({ userId }: { userId: string }) {
// using `bind` to send the arguments to the sever action `updateUser`
const updateUserWithId = updateUser.bind(null, userId)
return (
<form action={updateUserWithId}>
<input type="text" name="name" />
<button type="submit">Update User Name</button>
</form>
)
}
Route Handlers
- 低レベルの抽象化
- like api
// app/api/route.ts
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id')
const res = await fetch(`http://www.example.com/product/${id}`, {
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY!,
},
})
const product = await res.json()
return Response.json({ product })
}
API Routes vs Server Actions
APIルートとサーバーアクションは、類似の用途に使用できますが、それぞれの使用例を見ることでその違いを理解しましょう。
TLDR
- データを取得する際はAPIルートを使用し、アクションや変更を行う際はサーバーアクションを使用します。
APIルート
APIルートはサーバーアクションよりも汎用性が高く、低レベルの抽象化です。クライアントサイドからサーバーサイドのコードを呼び出す方法として利用されます。REST APIを公開したり、クライアントサイドから呼び出すサーバーサイドコードを記述するのに適しています。
APIルートのデメリットは、Fetch APIを直接使用するか、React QueryやSWRのようなライブラリを通じて呼び出す必要があることです。このキットではSWRを使用しています。
一般的に、データを取得する際にAPIルートを優先的に使用するべきです。
サーバーアクション
サーバーアクションは、APIルートよりも高レベルの抽象化であり、POSTリクエストとしてクライアントサイドからサーバーサイドのコードを呼び出す方法です。
新しいユーザーを作成する、ユーザープロファイルを更新するなど、サーバーサイドでアクションや変更を行いたい場合に特に有用です。
revalidatePathやrevalidateTagなどのユーティリティを使用することで、特定のページやタグのキャッシュを無効にすることができます。