タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all users
Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all users04/05/2024 This post is also available in 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français and Español. Browser Rendering API is now available to all paid Workers customers with improved session managementIn May 2023, we announced the open beta program for the Browser Rendering API. Browser Render
SWR(React Hooks)とaspidaで型安全にREST APIをfetchする - Qiita
TypeScript 4.1 で使えるようになる template string types が話題ですね 人類の悲願である Swagger/OpenAPI から静的型操作のみで使える型安全なクライアントを作製した猛者も現れました できました。 「型オンリーで」SwaggerのJSONを解析し、型安全なAPIクライアントを錬成しています。（URLが長すぎたので短縮してます） これはtemplate string typeなしではASTによるコード生成をしなければ達成できませんでした。https://t.co/jW98GIqMfz — ノーン (@nkowne63) September 1, 2020 この記事では template string types とは全く関係ない、上記ツイートでいうところの「 AST によるコード生成」によって型安全な HTTP リクエストを実現する「aspid
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vercel/SWR (以下 SWR)はデータフェッチのための React Hooks ライブラリで、データ取得のロジックを単純化したり様々な機能の恩恵を受けられます。 Kong/swrv (以下 swrv)は Vue において SWR と同じようなことを実現している Vue Composition API 向けライブラリです。 swrv については情報が少ない[1]ものの、SWR のドキュメントや事例を活用できるほど両者はよく似ています。とはいえ、両者には細かな違いが見受けられるため本記事にまとめました。両者の違いと特性を知っていただければ幸いです。 動作確認したバージョン React 17 react@17.0.2 swr@1.2.1 Vue 3 vue@3.2.30 swrv@1.0.0-beta.8 Vue 2 vue@2.6.14 @vue/composition-api@1.4
Caching clash: SWR vs. TanStack Query for React - LogRocket Blog
Most React applications communicate with remote data sources to persist and retrieve data records. Web application development teams nowadays tend to use REST and GraphQL-like communication patterns to implement their remote data source interfaces. Then, frontend development teams have to make network requests with various libraries through their React apps to sync data between the client side and
概要 先日Next.jsをFirebase Hosting + Cloud Functions For Firebaseにデプロイしてみましたが しばらくアクセスないタイミングでアクセスするとかなり重くて厳しかったので Firebase Hosting + SWRでサーバーサイドの処理なく開発できないか遊んでみた ついでに裏側のAPIをGraphQL(gqlgen)で作成してCloud RunにTerraform経由でデプロイ 全部書くと長くなりそうなので、後で振り返れるようにポイントポイントをメモしておく ローカル環境 これまで業務ではフロントエンド、バックエンド（API）どちらも 同じリポジトリに格納されているケースしか経験が無かったため 今回は実験的に別リポジトリにして、それぞれ独立させてみた バックエンド（API） GraphQL(gqlgen)の作成 業務ではRESTしか触ってな
JSer.info #622 - Bun 0.3.0がリリースされました。 Bun v0.3.0 Release Bun v0.3.0 · oven-sh/bun 高負荷時メモリ消費量の改善、GCでのクラッシュを修正など安定性が向上しています。 Node.js互換性として、child_processモジュール、Error.captureStackTrace() APIなどを追加しています。 そのほかには、consoleをAsyncIterableに変更、importしてるモジュールを自動的にnpmからインストールするようになっています。 また、Next.jsライクなルーティングをファイルシステムに対して行うFileSystemRouter APIの追加、expect()のmatchersの追加なども行われています。 React向けのデータ取得ライブラリであるSWR 2.0がリリースされてい
こんにちは，技術顧問のしけちあです． React (+ React DOM) で Web アプリケーション，特に SPA を作っていると，データの永続化の必要性がしばしば生じます．API バックエンドのあるアプリケーションであればこういった時に RDB ないし NoSQL データベース等を用いて永続化することも多いでしょう．しかしながら，API バックエンドを持たない構成の場合は，フロントエンドから RDB や NoSQL データベースを扱うのはとても難しい課題となります． そんなときに重宝するのが， Google の提供する Firebase Cloud Firestore です．すでに Firebase Authentication や Hosting を利用しているプロジェクトであればコマンド一つで導入できますし，そうでないプロジェクトも簡単に導入できることから，多くのプロジェクトで
非同期処理のテストを行う場合、モックを噛ませないとうまく行かないケースがどうしても存在する。 SWR1.0で導入されたmiddlewareを利用するとこれをいい感じに回避できることを見つけたのでまとめる 下準備 今回はまず下記のようなコンポーネントをテストすることを考える export const useDictionary = (word: string) => { return useSWR(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`, (url) => fetch(url).then(r => r.json())) } export const SearchResult: FC<{ word: string }> = ({ word }) => { const { data, error } = useDicti
Usage with Next.js – SWR
In Next.js App Router, all components are React Server Components (RSC) by default. You could only import the key serialization APIs from SWR in RSC. import { unstable_serialize } from 'swr' // ✅ Available in server components import { unstable_serialize as infinite_unstable_serialize } from 'swr/infinite' // ✅ Available in server components
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd
Shared Hook State with SWRMay 09, 2020SWR is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. 1 Let's look at an example of a useUsername hook: const useUsername = () => { return useState('') } const UsernameInput = () =>
GitHub - reck1ess/next-realworld-example-app: Exemplary real world application built with Next.js + SWR
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
SWRでGlobal Stateを実装する | Mitsuru Takahashi Personal Site
フロントエンドのstate管理はここ数年で様々な変遷を得て来ました。 近年、swr、apollo clientのようなサーバーデータをキャッシュするライブラリが出てからは、state管理がかなり最適化されたと感じています。 swrなどが出て以降のフロントのstateはこちらの記事で言及されているように サーバーデータのキャッシュ Global State Local State の3つで構成されるパターンが増えてきました。 上の記事では 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」 と言及されていますが、個人的にも同意見で、この構成がstate管理の最適解に近いと感じています。 実際、サーバーデータをswrなどがいい感じにキャッシ
電子書籍流通システム「DB4」 のフロントエンドについて（Next.js、SWR） 〜SWR編〜 - Tech Do | メディアドゥの技術ブログ
2022年6月1日に開催したエンジニア向け勉強会「Next.js（SWR・Web3認証）勉強会」。多くの方にご参加いただいたのですが、残念ながら都合が合わなかったり、後でイベントを知ったという方もいらっしゃるのではないでしょうか。 そうした方々向けに、テキスト起こし版を作成しました。スライド資料と合わせてご覧ください。 メディアドゥは、国内2,200社以上の出版社と150店以上の電子書店の間で電子書籍の流通事業を展開しており、国内流通シェアNo.1を誇る電子書籍流通システム「DB4」を自社で開発しています。今回はDB4のフロントエンドにおける使用技術やアーキテクチャ、実践しているテスト手法等をご紹介します。本記事では特に「DB4で利用しているSWR」に関して取り上げています。 登壇者紹介 二俣 雅紀 新卒入社2年目。主にDB4のフロントエンドの開発を担当。メディアドゥでバリューに沿った行動
Hey folks! If you recently worked with client side data fetching in Next.js, you probably heard of SWR. It comes with useSWR, a React hook that makes all the complicated stuff in client side data fetching (caching, revalidation, focus tracking etc.) easy as pie. You can implement it with just a few lines of code: // Import the hook import useSWR from 'swr' // Define a custom fetcher function const
｜DMM inside
How to Fetch and Update Data From Ethereum with React and SWR | Consensys
How to Fetch and Update Data From Ethereum with React and SWR Here's how to configure your dapp's frontend so token balances and fund transfers update in your users' Ethereum wallets. Ethereum allows us to build decentralized applications (dapps). The main difference between a typical application and a dapp is that you don't need to deploy a backend—at least as long as you take advantage of the ot
SWR と Suspense の問題
はじめに Suspense を使用したデータフェッチングが流行っているように思います。 私は愛用の SWR で Suspense を使おうと調べてみたところ、ドキュメントに次のような文章を発見しました。 React はまだサスペンスをデータ取得フレームワークである SWR などで使うことを 推奨していません。 これらの API は将来的に私たちの調査により変更される可能性があります。 詳しく調査して React の現在の仕様に関わる面白いことが分かったので記事にして共有します。 ちなみに SWR と Suspense の問題と言っていますが、これは Suspense を使用する全データフェッチングライブラリ（例：Tanstack Query）で生じる問題らしいです。 ですので私が調べたことが間違っていなければ、正しいタイトルは 「SWR と Suspense の問題」 ではなく 「Susp
こんにちは、プロダクト開発エンジニアの神長(kaminaga)です。 High Linkでは「カラリア 香りの定期便」などのサービスを開発しています。 coloria.jp 「カラリア 香りの定期便」はNext.jsを利用して構築されており、今回はユーザー体験の向上を目的に、データ取得/キャッシュライブラリの SWRを導入した話です。 目次 SWR導入の背景 【発端】ブラウザバック時スクロール位置を復元したい scrollRestoration を設定したが、スクロール復元位置がずれる Ajaxによるレイアウトシフトをどう回避するか 対応策① スクロール位置を保存しておき、ブラウザバック時に一定の遅延後、スクロール位置を復元する 対応策② APIキャッシュを導入し、非同期APIコールによるブラウザバック時のレイアウトシフトが発生しないようにする Next.jsにAPIキャッシュ(SWR)を
SWRについてざっくりまとめた - Qiita
この記事について SWRを調べて得た知見をざっくりまとめた記事。 キャッシュを管理するライブラリを使用するのは初めてだった為、その目線から感じた疑問や、この系統を調べると必ず出てくる「キャッシュ戦略」についてもやんわりまとめた。 この記事でまとめたこと SWRの概要について キャッシュ管理系ライブラリのざっくりとした概要・種類 stale-while-revalidateを利用したキャッシュ戦略について そもそもキャッシュ管理系ライブラリとは？ この系統のライブラリの立ち位置としては状態管理の中に属する部類 状態管理の中でも、キャッシュの状態管理に特化したライブラリ キャッシュ管理ライブラリの特徴 データfetchを行ってくれて、fetchしたデータをキャッシュとして管理できる キャッシュを保存するだけでは無く、サーバ側とのデータの同期や更新も可能◎ データ取得、ローディング状態、エラーが
【１】SWRSWRはデータフェッチに使うReactHookライブラリの一つ。Next.jsのチームが開発したもの。（名前はHTTP RFC 5861のstale-while-revalidateから由来） SWRによるデータフェッチは以下のような優先順位になっている。 ・まず最初にキャッシュからデータを返す。 ・次にフェッチリクエストを送る。 ・最後に最新データ取得してくる。 【２】使い方「useSWR()」でデータフェッチをする。この時 ・第一引数に「url」を渡す ・第二引数に「axiosの処理」に引き渡す(※axios等のfetcherの処理を書く) 【pages/home.tsx】 import AddVtuber from "../components/AddVtuber" //import {useEffect, useState} from 'react'; import a
はじめに SWRとはReactのデータ取得を快適に行うためのAPIを提供するライブラリです。 2022/12/09にメジャーバージョンである2.0がリリースされました。それを記念してこの記事では2.0によって追加された新機能を紹介します。 SWRが提供する移行ガイドはこちらです。 useSWRMutation SWR2.0ではuseSWRMutationという新しいhooksを利用できるようになりました。useSWRのようなhooksが呼び出されたタイミングで発火するのではなく任意のタイミングで発火させることができます。useSWRMutationは以下のように書いて利用します。 import useSWRMutation from 'swr/mutation' const { data, error, trigger, reset, isMutating } = useSWRMutati
React Loading State Pattern using Toast & SWR | theodorusclarence.com
React Loading State Pattern using Toast & SWRWritten on November 13, 2021 by Theodorus Clarence. Introduction Managing the react loading state can be a bit annoying, we need to set it to isLoading before fetching, then set it back to false after it is done. Then we also need to set it up to the button so we can show the loading state, or give some text as an indicator. Here is what it looks like w
Next.jsのSWRでデータを取得するときにaxiosを使った方法をご紹介します。 APIサーバーはLaravelを想定しています。 また、Laravelでデータを返すときはEloquentのAPI Resourcesを使用しているものとします。 https://laravel.com/docs/8.x/eloquent-resources なので記事データをリクエストした時、APIサーバーが返すデータは以下のとおりです。 { "data": { "id": 1, "title": "タイトル", ... "created_at": "2021-10-04T08:51:07.000000Z", "updated_at": "2021-10-04T08:51:08.000000Z" } }
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release 2.0.0-beta.1 · vercel/swr
両方使ってわかった Vercel/SWR と Kong/swrv の違い
Next.jsとFirebase HostingでSWR。ついでにGraphQLとCloud Run
2022-12-13のJS: Bun 0.3.0、SWR 2.0、Civet(CoffeeScript of TypeScript)
React + SWR で Firestore から “いい感じ” にデータを取得する方法
SWRのmiddlewareを使ってmockせずにテストする
Shared Hook State with SWR
SWR + Dynamic Routes in Next.js
SWRを活用してページネーションの実装を工夫した話 - DMM inside
SWRを導入してユーザー体験を向上させた話 (Next.js) - High Link テックブログ
nextjs with typescript:20 SWRの使い方｜fz5050
SWRの2.0がリリースされていたので新機能を学ぶ - Qiita
【Next.js】axiosを使ってSWRで取得する | りーほーブログ
SWR ver 2.0 の Optimistic Updates (楽観的 UI 更新)について
trafficnews.jp
note.com/itsuki34
reira.st.coresv.net
s-max.jp
s-max.jp
search.app