useEffectをやめて、Suspenseを使おう

2023/05/05 132 users Suspense useEffect React SPA 開発

Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹... 続きを読む

React Hooks ライブラリ SWR 2.0で追加されたuseSWRMutationを使ってみた | DevelopersIO

2023/01/01 10 users DevelopersIO React Hooks エントリ

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 SWRとは SWRは、データの取得や更新に便利なReact Hooksライブラリになります。Next.jsを開発していることでも有名な、Vercelが提供しています。 developersIOでも以下のエントリが投稿されています。 少し前にSWR 2.0が発表されました... 続きを読む

アソビュー流、SWRの使い方。可読性・保守性の高いhooks活用法 - asoview! TECH BLOG

2022/12/08 10 users asoview アソビュー React Hooks 保守性

はじめに アソビュー！ Advent Calendar 2022の8日目です。 2019年ごろから基本的にReact hooksを使用しており、REST APIを呼ぶ際も以前紹介したこちらのようにhooksベースで行っています。今回はその中でSWRに着目してご紹介したいと思います。tech.asoview.co.jp SWRとは？ SWRとはstale-while-revalidateの考えに基づ... 続きを読む

Next.js の API Routes から SWR の型推論を導く

2021/12/02 7 users routing TypeScript 型推論 API 定義

ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API R... 続きを読む

useSWRInfiniteを使うとページング(無限スクロール)の処理がシンプルに書けて気持ちいい！

2021/05/21 6 users ページング 無限スクロール 処理 気持ち わたし

はじめに こんにちは、最近SWRを使いこなすのが楽しくなってきた今日この頃の、からまげです。 SWRでページング(無限スクロール)する際、useSWRInfiniteを使うと驚くほどシンプルにコードが書けることがわかり、共有したくてこの記事を書いています。 この記事が、誰かのお役に立てれば幸いです。 わたしは、「Focus Caf... 続きを読む

SWRで爆死を避ける。firebase Cloud FirestoreとNext.js。

2021/03/06 17 users 爆死 Next.js

Vercel謹製のSWRの便利さや導入の簡単さについて語りました。 そしてそれに感動を覚えたらとにかく使いたくなります。 だって既存のプロジェクトに導入するのも簡単だから（！） Firestore サーバーレスでのアプリケーションやデータをほとんど持たないwebサイトを作成するときは、私はfirebaseのFirestore(GCP)をよく利... 続きを読む

Next.jsに「できるだけ」依存しないReactアプリケーションの構成

2021/01/17 9 users Reactアプリケーション Next.js Router

TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR... 続きを読む

Vue に stale-while-revalidateがやってくる - STORES Tech Blog

2020/09/29 21 users Vue stores Nuxt しくみ フロントエンド開発

STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界... 続きを読む

Next.js + Vercel + swr + TypeScript (No Redux + No SSR) で短期間チーム開発した - またのきかいに

2020/05/07 7 users きかい TypeScript Vercel プロトタイプ 世間

はじめに タイトルにある通り Next.js + Vercel + swr + TypeScript という構成で短期間チーム開発をした。 以下のように特殊な状況なので色々試してみた。 開発状況 約3週間の短期間開発。 世間にリリースしない。プロトタイプを作って終了。メンテナンスもしない。 フロントエンドを触るのは自分を含めて3人。 自分・... 続きを読む

「zeit/swr」のpagination exampleでScroll Position Restoreを試す - Qiita

2019/12/30 6 users YouTube Qiita ZEIT SPA スクロール位置

こちらはNext.js Advent Calendar 2019の22日目の記事です。 はじめに 例えばYoutubeをスマホで見ていたときに、↓のように一度ページ遷移をしてからブラウザバックしたときにスクロール位置が一番上まで戻ってしまった経験はないでしょうか。 これはSPAが抱える課題の1つで、解決するためには「Scroll Position Restore... 続きを読む

SWR: React Hooks for Remote Data Fetching

2019/10/28 26 users

IntroductionSWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with th... 続きを読む

「生物が眠る理由」　睡眠で脳回路はクールダウンされる　東京大学 | 大学ジャーナルオンライン

2018/02/15 240 users 脳回路 生物 睡眠 大学ジャーナルオンライン 東京大学

　海馬が学習や記憶に関わっていることは古くから知られている。しかし、神経細胞には限りがあるため、あるレベルに到達するとそこで飽和し、それ以上の記憶ができなくなってしまう。そのため何らかの「クールダウン」の機構が海馬に備わっていると予想されてきた。 東京大学の研究グループは、海馬から発生する「sharp wave ripple（以下、SWR）」という脳波が、睡眠中にニューロン間の繋がりを弱め、脳回路... 続きを読む