SWRを使おうぜという話2022
はじめに 2021年1月に以下のような記事を書きました。 内容はVercel社のオープンソースプロジェクトの一つであるデータフェッチライブラリであるSWRの紹介で、記事内に間違いなどもあったにも関わらずたくさんの反響を頂きました。 2022年半ばとなった今でも「いいね」を頂いております。 しかし、内容は2021年当時のものであり、ライブラリの仕様が少し変更となっておりますので、現在のSWRの仕様に合わせて新しく記事を書くことに致しました。 当記事の内容は「SWRを使おうぜという話」のシナリオに沿っての再掲と致します。 最後までどうぞお付き合いください。 SWRとはなにか SWRは、クライアントJavaScriptからのデータ取得とそれに関連する操作を提供するReact Hooks群です。 通常、Reactを使用してAPIサーバーからのデータ取得を非同期で行う場合、useEffectとfet
それSWRじゃなくてgetServerSidePropsでいいよねっていう場面の話
Next.jsでフロントエンドを作っているプロジェクトにSWRを導入した際に「SWRかgetServerSidePropsのどちらでデータ取得をすればいいのか迷う」みたいな意見があったので、チームで方針を作ったときに考えたことの話。 フロントエンドの構成については、バックエンドのREST APIを叩きに行ってデータを取得・更新する至って普通の構成。ただユーザーの認証をする必要があり、sessionの有無を見つつページの出し分けとかAPIの取得をする形になっている。認証部分はAWSのCognitoでクライアントにはnext-authを使用した。 データ取得の方針 データ取得・更新について、基本的にSWRを使用する方針にした。SWRについては周知の通りキャッシュ機構で高速にデータの表示ができるので使わない手は無いと思う。 また、next-authのuseSessionを使ってsession(に
SWR で SQL 発行量を節約する
最近 ORM の prisma を触る機会があり「フロントの設計次第で SQL 発行量が結構変わるなぁ」と改めて感じたのでメモ書きです（prisma に限らず、API 設計の際に考察ポイントになる内容です）。本稿では、次の様なアプリケーションを Next.js + prisma で実装するものとして話をすすめます。 著者・カテゴリーが登録できる 本を登録できる 本には、登録ずみの著者が 1 名設定できる 本には、登録ずみのカテゴリーが複数設定できる ユーザー認証が必要で SSG は想定していない タイトルのSWRは、こちらのライブラリを指します。 schema 定義 以下、雑にスキーマを定義します。Author・Category が親テーブル、Book が子テーブルです。 model Author { id Int @id @default(autoincrement()) created
useSWR で作る Form 画面の備忘録
管理画面のような CRUD 中心のプロダクトでは Form と CSR をよく利用します。SWR は開発体験に優れたライブラリですが、Form に利用する場合注意点があるので、備忘録として共有します（広義の SWR と紛わない様に、タイトルはuseSWRとしました） 視覚的安定性とキャッシュ はじめに、SWR や React Query を利用するモチベーションについて言及します。SWR は一意のキーに紐づいたキャッシュが無い場合、loading fallback を表示します。fallback 表示はたとえ一瞬であっても「チカっ」とした表示になるため「スムーズではない印象」を利用者に与えてしまいます。しかし SWR や React Query は有キャッシュ時は fallback を SKIP するため、ユーザー操作を妨げずに視覚的安定性を提供することができます。 このメリットは、反復画
そうです。わたしがReactをシンプルにするSWRです。
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
