このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Focused on web standards and modern web app UX, you’re simply going to build better websites Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. export async function loader({ request }) { return getProjects(); } export async function action
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
BOXILでエンジニアをやっている永井です。前回は入社エントリを書きましたが今回は技術的な記事を書こうと思います。 今回はCloudflareにおける画像の最適化処理のコストカットをした話をします。ざっくりいうとCloudflare内のKVという機能を使い、最適化をした画像をキャッシュしました。似たような問題で悩んでいる方は参考にしてもらえると嬉しいです。 TL;DR Cloudflareで画像のリサイズ（形式変更）を行っていた リサイズ後の画像はデフォルトではキャッシュされず、都度リサイズの処理が実行されていた Cloudflare内のWorker KV機能を使いキャッシュの実装をしたところ、コストがおよそ97%削減できた TL;DR 前提 問題 対策 Workers KVとは 注意事項とか サンプル 事前準備 KVのnamespace作成 KVをworkerに登録 流れ Keyについて
Next.jsでv12〜middlewareという機能が使えるようになりました。 middlewareに書いた処理はリクエストが完了する前に実行されます。Cookieの値に応じてルーティングを振り分けたり、Basic認証を導入したり等など、幅広い用途で使えそうです。 VercelとNext.jsの組み合わせが強いのは、VercelにNext.jsをデプロイするとこのmiddleware部分をEdge Functionsで捌いてくれるという点です。つまり、静的なページに対するリクエストに対して、オリジンサーバーに触れことなくmiddlewareを実行できるということです。 Vercel以外のプラットフォームだとどうなのか ドキュメントには以下のような記載があります。 This works out of the box using next start, as well as on Edge
「CDN」（content delivery network）という言葉からは、Googleのような大企業がいくつもの巨大なハードウェアを管理し、1秒当たり何百ギガビットものデータを処理する様子が想像されます。しかし、CDNは単なるWebアプリケーションです。私たちのイメージとは違いますが、それが事実です。8年前に買ったノートパソコンを使って、コーヒーショップの席に座りながらでも、きちんと機能するCDNを構築できます。この記事では、これから5時間でCDNを開発しようとするときに、直面するかもしれないことを紹介します。 まずはCDNの機能を明らかにしておきましょう。CDNはセントラルリポジトリ（通称：オリジン）からファイルを吸い上げ、ユーザーに近い場所でコピーを保存します。初期のオリジンはCDNのFTPサーバーでした。現在、オリジンは単なるWebアプリとなり、CDNはプロキシサーバーとして機
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
CloudFrontのキャッシュクリア（invalidation）を自動化してみた – 仕組みやCLIコマンドを解説 | thilog
こんにちは。てぃろです。 CloudFrontのキャッシュ（chache）をうまく使えてますか？ CloudFrontではWebアプリ配信のレスポンスをよくするためにキャッシュを使えます。しかし、アプリを新たにデプロイする時にはキャッシュをクリア（削除）しないと、古いアプリのまま使われてしまう恐れがあります。 そこで、アプリをデプロイするたびにCloudFrontのキャッシュを自動的にクリアできるようにしたいと思います。 CloudFrontのキャッシュ詳しい仕様は公式ドキュメントをご覧ください。 今回も自作のアプリフレームワークを題材に解説していきます。以下がフレームワークの概要説明の資料です。 CloudFrontのキャッシュクリアの操作をマネジメントコンソールで確認するまず、CloudFrontのキャッシュクリアの操作がどのようなものか見ていきます。 突然ですが、公式ドキュメントやマ
ページ読み込み時間と最初のバイトまでの時間を短縮する最高のWordPressキャッシュプラグインの７選 WordPressをキャッシュすることは複雑で、退屈な作業と感じる人もいるでしょう。このような複雑なテクノロジーの詳細を説明しようとすると、実際の本になるかもしれません。一方、キャッシュの考え方は、単純な数学の問題でたとえることができます。10×2は？答えは20に違いありません。なぜすぐにわかりますか？答えを覚えているためです。計算しなくてもよいですね。このように暗記と比較することは、ウェブサイトのキャッシュ処理を簡略化しますが、プロセスを視覚化し、WordPressのキャッシュプラグインが必要になる理由を把握するのに役立ちます。 あなたのウェブサイトは毎月数十回表示されます。表示回数は何百回、何千回、何百万回になるかもしれません。ウェブサイトが毎回同じまたはほぼ同じコンテンツを配信して
Intro 本サイトを (Non AMP) SXG に対応した。 これにより、 Google のモバイル検索では、結果を表示した時点でこのサイトの SXG が Prefetch され、結果を選択したら Cache から素早く表示されつつ、 アドレスバーにも本サイトのものとして表示される。 この、 Non AMP SXG 対応にあたって、本サイトの AMP の提供も停止することになった。 移行の作業ログと、関連する流れについて記す。 (Non AMP) SXG SXG については過去に解説した。 WebPackaging の Signed HTTP Exchanges 本サイトでは AMP SXG に対応しており、 Google Search からの AMP ページへの遷移には SXG が取得され、本サイトのドメインが表示される。 AMP SXG 対応 今年の 4 月に、 AMP だけでなく
Alec Brunelle Alec is a web developer who loves to work in all areas of the stack. Currently hacking on GraphQL services at Unity Technologies. Using GraphQL in your frontend application is a like playing a different ball game than when using REST. Client libraries such as urql, Apollo Client, and Relay are able to offer different capabilities than REST libraries such as Axios or fetch. How come?
はじめに こんにちは。マイグレーションチームの藤本です。 この記事では、先日のリニューアルに伴って導入したBackends For Frontends（以下、BFF）で、Redisを使ったキャッシュの事例をご紹介します。キャッシュを導入する際に起きる問題とその回避策について、サーバーサイドのアプリケーションで行った対策をもとに紹介していきます。 ZOZOTOWNリニューアルとBFF ZOZOTOWNで導入したBFFは、複数のAPIのレスポンスをフロントエンドが必要とする形式に集約して返却することを主な目的としています。これまでの実績から、大規模セール時のアクセス数は通常時の何倍にもなることがわかっており、BFFもそれに耐えられるパフォーマンスが必要です。 しかし、BFFに来たすべてのアクセスをそのままAPIに流すと、パフォーマンスに影響する恐れが出てきました。そのため、APIからのレスポン
ローカル・経路上のキャッシュを併用しよう キャッシュは再利用されるほどいいものです。 サイトの規模にもよるのですが、ローカルと経路上のキャッシュはそれぞれ性質が異なるため、ブラウザキャッシュだけ適切に設定しておけば経路上では不要というわけではありません。 ローカルキャッシュはキャッシュを持つクライアント自身がサイトを再訪する場合は有効ですが、キャッシュを持っていない新規クライアントには無効です。 経路上のキャッシュは新規クライアントに対してもキャッシュを返すことができるため、例えばサイトへの流入が突然増えるといった事態でも対処がしやすいです。 そのためコンテンツ次第ではありますが、ブラウザキャッシュのように特定のクライアントでしか使えないprivate cacheにするよりも、 効率を考えてローカル・経路上のどちらでもキャッシュができ、多数のクライアントで共有できるshared cache
Cache Stampede キャッシュが有効期限切れによってオリジン（データベースなど）へのアクセスが殺到することで負荷が高まってしまう問題を Cache Stampede (キャッシュ・スタンピード） と呼びます。Stampede は日本語にすると「殺到」というような意味合いの単語です。 ※他にも Cache miss storm だったり Thundering Herd だったり、Dog pile だったり、いろいろ呼び方はあるようです。 本記事では この Cache Stampede 問題への対策として memcached の機能をセマフォとして使い、オリジンへのアクセスを制御する方法について記します。 問題の整理のため、キャッシュを使う場合の典型的な処理を振り返りながら見ていきます。 単純なキャッシュ キャッシュには通常では有効期限があり、有効期限が切れるとキャッシュを使用せずに
この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ
Webアプリ負荷試験ガイド 目次 Webアプリ負荷試験ガイド 目次 前置き 時間がない人向け要約 about me 何故負荷試験を行うのか 負荷試験ツール 負荷掛けるツール 負荷計測 負荷の可視化 負荷試験の流れ 負荷試験スケジュールについて 注目すべきポイント シナリオ作成 アカウント情報は自動生成出来るようにする DB分割を行ってる場合はDB分割を意識したシナリオを用意する。 負荷試験元 http or https サーバ1台 サーバ単体での負荷 アプリの正常性の確認 サーバ複数台 KVS Memcached Redis RDB 問題になりやすいDB キャッシュの話 大前提 注意すべき点 CDNやProxyレベル local cache or remote cache local cache or memory cache(in app cache) references 更新情報 前
https://gyazo.com/6650f305b46ff9a2683fd11988e12cf3 https://gyazo.com/ed58dad9ca677c8ab54867fe08cf6817
こんにちは。プロダクト開発部のサーバサイドエンジニアの荒川です。普段はSansanのスマホアプリのAPIの開発をしています。 今回扱うテーマは皆さん大好きキャッシュ（Cache） です。 Webアプリケーションを開発するエンジニアである以上、キャッシュの存在からは逃れられないでしょう。 例えばパフォーマンスを向上させる手段として、キャッシュを仕込むことは往々にしてあるかと思います。 キャッシュを使えばパフォーマンスが向上しそう、というイメージも強いため安易に選択する戦略になりがちですが、正しく扱うことは本質的に難しいです。 しかしキャッシュを上手に使えば、ユーザ体験を圧倒的に向上させることができます。 そんな諸刃の剣キャッシュ💰について考慮するべきこと、その戦略を改めてまとめてみました。 今回の対象 今回の対象は、アプリケーションレベルでのキャッシュ戦略を取り扱います。 いわゆるキャッシ
メモ化 is 何 メモ化は高速化技法の1つである。 phperなら配列に関数/メソッドの戻り値をキャッシュしておいたことがあると思う。 この類のキャッシュはアプリケーションロジックと混ざると扱いが難しくなり バグを生むことがある。またキャッシュするロジック自体はボイラープレートだ。 どうにかDRYかつ疎結合にメモ化ができないかと思い、traitと無名クラスを使う方法を考えた。 利用シーン 処理が遅いメソッドを持つクラスがあったとする。 # 定義 class PoorClass { function slowProc($arg) { sleep(1); return $arg + 1; } } # 利用コード $obj = new PoorClass; for ($i = 0; $i < 5; $i++) { var_dump($obj->slowProc(1)); } trait Cach
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
