SWRを使おうぜという話2022
はじめに 2021年1月に以下のような記事を書きました。 内容はVercel社のオープンソースプロジェクトの一つであるデータフェッチライブラリであるSWRの紹介で、記事内に間違いなどもあったにも関わらずたくさんの反響を頂きました。 2022年半ばとなった今でも「いいね」を頂いております。 しかし、内容は2021年当時のものであり、ライブラリの仕様が少し変更となっておりますので、現在のSWRの仕様に合わせて新しく記事を書くことに致しました。 当記事の内容は「SWRを使おうぜという話」のシナリオに沿っての再掲と致します。 最後までどうぞお付き合いください。 SWRとはなにか SWRは、クライアントJavaScriptからのデータ取得とそれに関連する操作を提供するReact Hooks群です。 通常、Reactを使用してAPIサーバーからのデータ取得を非同期で行う場合、useEffectとfet
触ってみてわかったNext.jsと比べた時のRemixの特徴
本日11月23日Remixが正式にリリースされたので早速触ってみました。 Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRはサポートしていない Next.jsにはSSGやISRなどあらかじめデータをビルドしておいてその結果をリクエスト時に返すといった機能がありますが、Remixにはありませんでした。 その代わりRemixでは以下のようにページコンポーネントごとにheadersをexportするだけでHTTP headerをコントロールできる仕組みがあるので、そこでCache-Control
リモートのデータ取得のためのフックライブラリの SWR を使ってみる | メルカリエンジニアリング
こんにちは。Mercari Advent Calendar 2019 の 17 日目は Web UX Team 所属の @lightnet328 がお送りします。 どのようにリモートのデータを取得して管理するかは SPA 構成の Web フロントエンドにおいて大きなテーマの 1 つだと思います。最近では Apollo Client のようにデータ取得のためのクライアントとデータ管理のためのキャッシュ機構が一体化したライブラリが出てきています。 本稿で紹介する zeit/swr (以下、SWR) もそのような特徴を持っています。SWR はその名が示すとおり HTTP の stale-while-revalidate (略すと swr) というキャッシュ戦略に影響を受けているため、先に HTTP の state-while-ravalidate について紹介します。 HTTP の Cache-
Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた！ - Qiita
React17の次期新機能のSuspenseが凄い！ と思ったので少し学習していました！ Suspense自体の説明は下の動画がわかりやすいかも。 13:15ぐらいからプログラムのDemo 29:30ぐらいからSuspenseとはなんぞや、という説明をしてくれています。 Githubにdemoもあったので、実際に動かしてみたい方はこちらも是非是非 つまりSuspenseって何？ Suspenseっていう機能があるわけじゃないんです、すみません 概念というかなんといいますか 自分の意訳・解釈なので間違っていたら土下座しに行きます 外部APIからデータを取得・表示するような処理で使えるんですね。 読み込みを開始したらLoadingを出して、APIが戻ってきたらデータを表示してローディングを消して……っていう、reduxやsagaを使って今まで頑張ってきているものがあると思うんですね。 API実
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
