Next.js App Router で route 毎に Cache-Control を任意に指定したいときは middleware を使う（今のところ）
App Router でトラディショナルな動的 SSR 既存〜今後のコンポーネントの互換性を踏まえて React を前提とし、フレームワークの分散を抑制するため Next.js を選び、多少の冒険ではあったが App Router での開発にトライしています。 今後は現在 Ruby on Rails のモノリシックコードベースで展開されている複数プロダクトを分割し、それぞれを Next.js で水平展開し直していくイメージです。 で、まずは App Router のフルパワー（サバクラに渡る重厚なキャッシュ機構）を要しない、ログインする操作こそあれだページの9割9分が Server Components としてレンダリング可能な領域をリプレース中。 つまり // app/layout.js export const fetchCache = 'default-no-store'; expo
[GraphQL] Apollo ServerのCache-Controlについて | DevelopersIO
GraphQLはエンドポイントが1つだけになるため、従来のHTTPキャッシュが使いにくいという側面があります。Apollo Serverはこれを解決するために、独自のキャッシュ機能を備えています。このキャッシュ機能を使うと、レスポンスの内容に応じて適切なCache-Controlヘッダーが追加されます。この情報に基づいて、CDNやBrowserでキャッシュを持つことが可能になります。 Cache-Controlヘッダーとは Cache-ControlヘッダーはHTTP/1.1仕様の一部として定義されたもので、リクエストとレスポンスの両方でキャッシュのためのディレクティブ (指示) が格納されています。Apollo Serverが関与するのはレスポンスのディレクティブのみです。Cache-Controlについて詳しく知りたい方はこちらの記事が詳しいです。 https://developers
![[GraphQL] Apollo ServerのCache-Controlについて | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6adfdb636955ae552276946831d9517b741613ee/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F11%2Feye-catch-apollo.jpg)
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
キャッシュを活用するために必要な知識と勘所 - そーだいなるらくがき帳
どうもキャッシュバスターズ、 id:Soudai です。 Cache（以下、キャッシュ）は特定の場面に置いて劇的な効果を発揮し、様々な問題を解決する反面、新たなコンポートやミドルウェアが追加され、複雑性が上がり、運用のレベルが上がるため、扱いに注意する必要があります。 キャッシュを活用することで、パフォーマンスの改善や負荷軽減が行われ、コンピュータリソースの最適化によるサーバコストの削減や、レスポンスの改善によるユーザエクスペリエンスの改善がされます。 反面、その劇的な効果に毒され安易に多用すると、サービスが強くキャッシュに依存してしまい、非常に壊れやすくなり、運用が難しくなってしまいます。これをWeb界隈では「キャッシュは麻薬」と比喩されて、戒められてきました。 そのためキャッシュを使わずにサービスが運用できるのであれば使わないに越したことはないのですが、ある一定以上の規模になった際にコ
「キャッシュは麻薬」という標語からの脱却 - id:onk のはてなブログ
これは はてなエンジニア Advent Calendar 2023 の 18 日目の記事です。昨日は id:gurrium による private-isuで70万点取るためにやったこと - ぜのぜ でした。私は 50 万点ぐらいで満足してしまっていたので、しっかり詰めていて凄いなと思う。 developer.hatenastaff.com Web アプリケーション開発において、「キャッシュは麻薬」という言葉がインターネット上をよく飛び交っています。YAPC::Kansai OSAKA 2017 の id:moznion のトークでよく知られるようになったワードじゃないかな。 初出はちゃんとは分からないんですが、少なくとも 2011 年には言われていますね。 「キャッシュは麻薬」とはよく言ったものだ。— TOYAMA Nao (@nanto_vi) November 5, 2011 キャッシ
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
HTTPキャッシュを使用して不要なネットワーク要求を防ぐ
ネットワーク上でリソースを取得するには、時間とコストの両方がかかります。 サイズが大きい応答では、ブラウザとサーバーと間で何度も往復する必要があります。重要なリソースがすべて完全にダウンロードされるまで、ページは読み込まれません。データ量が制限されているモバイルデータプランでサイトにアクセスしている場合、不要なネットワーク要求はすべて無駄なコストになります。どのようにすれば不要なネットワーク要求を回避できるのでしょうか。ブラウザのHTTPキャッシュは第1ディフェンスラインです。この方法は必ずしも最も強力または柔軟なアプローチであるとは限りません。また、キャッシュに格納された応答の存続期間を制御する能力も限定的です。しかし、これは効果的で、すべてのブラウザでサポートされているため、簡単に導入することができます。 このガイドでは、効果的なHTTPキャッシュ実装の基本について説明します。 ブラウ
CDN切り替え作業における、Web版メルカリの個人情報流出の原因につきまして - Mercari Engineering Blog
本日コーポレートサイトでお知らせした通り、Web版のメルカリにおいて一部のお客さまの個人情報が他者から閲覧できる状態になっていたことが判明しました。原因はすでに判明して修正が完了しております。また、個人情報を閲覧された可能性のあるお客さまには、メルカリ事務局より、メルカリ内の個別メッセージにてご連絡させていただきました。 お客さまの大切な個人情報をお預かりしているにも関わらず、このような事態に至り、深くお詫びを申し上げます。 本エントリでは技術的観点から詳細をお伝えさせていただきます。 2017年6月27日 CDNのキャッシュの動作について、CDNプロバイダと仕様について確認し検証を行いました。その結果一部記述に実際と異なる箇所があり、加筆修正いたしました。 概要 メルカリWeb版のコンテンツキャッシュをしているCDNのプロバイダ切り替えを行いました。 その際本来キャッシュされるべきでない
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
AWS、Amazon S3やEFSを爆速にする「Amazon File Cache」発表。複数のストレージを単一のビューでアクセス可能に
Amazon Web Services（AWS）は、8月10日に開催したオンラインイベント「AWS Storage Day 2022」で、新サービス「Amazon File Cache」を発表しました。 Amazon File Cacheはその名の通りAWSで利用できる高速なファイルベースのキャッシュです。特徴は2つあります。 1つ目は、ミリ秒以下のレイテンシと数百ギガバイト/秒のスループットという高い性能です。Amazon S3やNFSサーバといったストレージのキャッシュとして利用することで、これらのストレージに対するアクセスを高速化できます。 2つ目は複数のストレージに対する単一のファイルビューを提供できることです。AWSの説明によると、Amazon File CacheはAmazon S3やAmazon EFSなどAWS上のストレージだけでなく、AWSからオンプレミス上のファイルサー
メルカリShops のフロントエンド | メルカリエンジニアリング
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
CDNのパージとかを調べてみたまとめ(Cloudflare/Cloud CDN/Fastly) - くらげになりたい。
CDNを使ってキャッシュを活用したいなと思い、 いろいろ調べたときの備忘録。 調べたのは、Cloudflare/Cloud CDN/Fastlyの3種類。 まとめ Cloudflare 無料でも利用できる 単一URLのパージのみ 柔軟なパージはEnterpriseプランのみ Cloud CDN 価格が安く、前方一致でのパージも可能 キャッシュ削除が遅く、1分につき1回まで $0.09/GB、$0.0075/1万req Fastly 柔軟なパージができ、キャッシュ削除もはやい 最低月額料金$50が必要 $0.19/GB、$0.0090/1万req(アジア) 費用がかかるほど柔軟なパージができるけど、 月50ドルは悩ましい。。(´・ω・｀) 調べた内容 Cloudflare パージできる種類 URL指定 Cache-Tags指定(Enterpriseプランのみ) URLのprefix指定(En
Next.jsキャッシュ戦略はこんな感じで行こうと思う - koudenpaのブログ
Next.js セカンドインプレッション - koudenpaのブログで、書いた通りNext.jsとはしっかり付き合いはじめて日が浅いのだけれど、横目で眺めていた時期と主体的に触って感じたことからどういう構成をとるのかの考えが固まってきたので書いておく。 暫くたって見直して「とんちんかんなことを考えていたな」となるのも一興。 なお、「こんな感じで行こう」の対象は本業ではなくプライベートです。 考え方 目的 ポリシー 構成 ポリシー 最新情報を表示する需要への対応 想定AWS構成 感想 考え方 目的 ユーザーの体感速度向上 システムへの負荷低減≒ホスティングコスト低減 JavaScriptを処理しないクローラへのコンテンツ提供 この辺は当たり前のことではあるけれど、目的を見失わないように何を考えてキャッシュするのかは考えておきたい。 ポリシー キャッシュはシンプルに構成する Amazonのよ
Back and forward cache | Articles | web.dev
Back and forward cache Stay organized with collections Save and categorize content based on your preferences. Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience, especially for users with slower networks or devices. This page outlines how to optimize your pages for bfcache across all browsers
Next.js で SSR/SSG したページに Cache-Control などのヘッダを設定する
Next.js には強力な Incremental Static Regeneration がありますが、Vercel 以外にホストしている場合は使うことができません。そのとき、Cache-Control や Surrogate-Control ヘッダを用いて Fastly のような CDN にキャッシュを持たせたくなります。 このヘッダの持たせ方に少しクセがあったので備忘録的に書きます。 例えば、/articles/[id] にヘッダを持たせたいとします。 方法1. next.config.js で設定 next.config.js の headers で設定する方法です。 const cacheHeaders = [ { key: 'Cache-Control', value: 'max-age=0', }, { key: 'Surrogate-Control', value: 'pu
nginxでの静的ファイル配信時のキャッシュ(ETagやLast-Modifed) - [Dd]enzow(ill)? with DB and Python
ISUCON7の予選は、画像へのアクセスをいかに304で処理して帯域を節約できるかが肝でした。そこでnginxのETagやLast-Modified等の設定周りを見直してみます。 環境 以下の環境で試しました。 OS: Ubuntu 16.04 nginx: 1.10.3 Client: python-requests 2.8.1 初期設定 サーバ上の/public/sample.pngにサンプルの画像を配置し、http://host/sample.pngでアクセスできるようにnginx.confを設定します。以下で拡張子が*.cssや*.js、*.pngの場合は/public配下より配信されます。 server { listen 80; location ~* \.(css|js|png)$ { root /public; } } 今回はアクセスのテスト用にPythonのrequests
![nginxでの静的ファイル配信時のキャッシュ(ETagやLast-Modifed) - [Dd]enzow(ill)? with DB and Python](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c3e6ac15f379bcbadf3053dcd6ded9a17ba8d2a/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdenzow%2F20171126%2F20171126221155.png)
GitHub Actions: Setup-node now supports dependency caching
July 2, 2021 You can now run Node.js projects faster on GitHub Actions by enabling dependency caching on the setup-node action. setup-node supports caching from both npm and yarn package managers. - uses: actions/setup-node@v2 with: node-version: '14' cache: npm For questions, visit the GitHub Actions community Maintainers now have additional control over when they must approve Actions runs for ne
HTTPレスポンスボディを送ったあとに、Cache-Controlを変更可能にする仕様 - ASnoKaze blog
HTTPでキャッシュは、サーバがHTTPレスポンスを返す際、Cache-Controlヘッダをつけることで、どのようにキャッシュするか指示することができます。ヘッダ自体はレスポンスボディより前に送る必要があります。 Mark Nottingham氏らによって提案された「Updating HTTP Caching Policy in Trailers」という仕様では、HTTPレスポンスボディを送り終わってから、Cache-Controlを変更可能にします。 具体的には、Trailer FieldでCache-Controlを送った際の挙動について定義を与えています。 HTTP Trailer Field まずは、Trailer Fieldについて説明します。 HTTPのセマンティクスの仕様(URL)では、HTTPボディを送ったあとにあとからヘッダ(正確にはFieldと呼ぶ)を送ることができま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to clear/flush the DNS cache in Google Chrome?
Webアプリケーションのキャッシュ戦略とそのパターン / Pattern and Strategy of Web Application Caching