Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む
こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 Partial Prerenderingは、特にStreamingと一緒に利用し、Vercelにデプロイした場合、強力に最適化が行われます。最適化は非常に高度で、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い分けといったインフラの構成まで絡む複雑な設計です。最終的にVercelにデプロイされた後の全体の動作イメージが頭に入っている方は少ないのではないでしょうか。 この記事ではPartial PrerenderingとStreamingについて、Vercelデプロイ後の動作イメージがついている状態を目指します。静的ルートやサーバーサイドフェッチなど単純な例から
やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話
こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile | web.dev
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile 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 for users, especially for websites that involve many back and forth naviga
Next.js Cacheのアツさをシェアしたい(App Router)
sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
Next.js 13 の cache 周りを理解する - Automatic fetch() Request Deduping
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping ← この記事 revalidate fetchCache (後日公開) Next.js 13 App Router の cache はむずかしい Next.js 13 以降 App Router と呼ばれる、app/ ディレクトリを起点とする新たなレイアウト・レンダリング機能が導入されました。 併せて、レンダリングを効率化するためのキャッシュ機構も大きく手を加えられました。 基本的には意識せずとも恩恵を受けられるものが多いですが、把握しておかないと意図しない描画に繋がる可能性もあるため、App Router を利用する場合には抑えておきたいところです。 App Router に対応している beta 版ドキュメント[1]に基本
Next.jsのISRで動的コンテンツをキャッシュするときの戦略
最近Next.jsのISR（Incremental Static Regeneration）を耳にする機会が増えてきました。Zennでも2021/3/17時点で記事や本などの一部のページでISRを採用しています。 ISRとは何か ISRを使うことで、動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能になります。Next.jsのISRはドキュメントに書かれているようにstale-while-revalidateという考え方でキャッシュが行われます。 具体的には、リクエスト時にページのキャッシュを作成し、次のアクセスではキャッシュされた古いデータを返します。その裏で次のアクセスに向けてキャッシュが再生成されるというイメージです。 これによりユーザー投稿コンテンツであってもCDNにキャッシュしやすくなるというわけです。 Next.jsでのISRの実装 デプロイ先がVe
リモートのデータ取得のためのフックライブラリの 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-
GitHubのREADME上の画像キャッシュはPURGEリクエストで破棄させられる
GitHubのREADMEの画像，とくにビルドステータス・カバレッジ・コードクオリティ関連のものが長期間キャッシュされてしまって困ったことは無いでしょうか？ RFCで標準化されていないようですが，PURGEというHTTPメソッドでリクエストを送るとそれを破棄させることができるようです。 mpyw@localhost:~$ curl -X PURGE https://camo.githubusercontent.com/f3bff8cae56a5e157f25ed6bf0a76aa610832897/68747470733a2f2f7472617669732d63692e6f72672f6d7079772f657863657065722e7376673f6272616e63683d6d6173746572 {"status": "ok", "id": "397-1491501868-7073
Modules | Chrome for Developers
Dig deeper into specific Workbox modules and browse their API reference to get information on available methods. Service Worker Packages workbox-background-sync Use background sync to reliably make a network request even if the user is offline. workbox-broadcast-update Send messages to pages when a cache is updated with a new response. workbox-cacheable-response Restrict which requests are cached
ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita
GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた情報不足だったため今回の記事を
Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
We can accomplish this using service worker. A service worker is a background worker that acts as a programmable proxy, allowing us to control what happens on a request-by-request basis. We can use it to make (parts of, or even entire) React apps work offline. You’re in control of how much of your UX is available offline. You can offline-cache just the application shell, all of the data (like Reac
Progressive Web Apps with Webpack - Michal Zalecki
software development, testing, JavaScript, TypeScript, Node.js, React, and other stuff My first offline web app heavily depended on AppCache and it was painful experience. Don’t get me wrong, AppCache initially blow my mind, in a positive sense. Web App without a web? In the browser? Sounds awesome, isn’t it? My further experiments with AppCache convinced me that unfortunately it’s not the path I’
Debugging Service Workers
プログレッシブ ウェブアプリ: オフライン コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 1. ようこそ このラボでは、既存のウェブ アプリケーションをオフラインで使用できるようにします。これは、プログレッシブ ウェブアプリ ワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。 学習内容 Service Worker を手動で作成する 既存のウェブ アプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする 必要な予備知識 簡易 HTML と JavaScript 必要なもの Service Worker をサポートするブラウザ 2. 準備 まず、この Co
Service Worker周りの知識をアップデートする（2017年クリスマス版） - Qiita
PLAID Advent Calendar 2017 23日目。 プレイド @otolabです。イブイブですね（古い）。 面白くて新しい技術はどんどん変化していきます。検索していてもなかなかうまい具合に情報に当たらない。せっかくみつけても情報が古いなんてことはザラ。 というわけで、今回はService Workerに関する最近の動きをまとめ、知識のアップデートを試みます。 前作「従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来」を2016年の中頃に書いているので、そこからの差分をざっくりと紹介したいと思います。 Service Workerとは？ まずは「とは？」から。 Service Workerとは、Web Workerの一種で、ブラウザで表示しているページ内のスクリプトとは独立して動くスクリプトです。必要に応じてサイトごとに見えないタブが開くイメ
Using a Service Worker with Next.js
I recently relaunched the website for the charity Build A School In Kenya and decided to build it using Next.js and deploy using Now. Next.js is a fantastic framework from the team at Zeit — a US based company working on a cloud platform targeting the JavaScript/Node ecosystem. One of the benefits of Next.js is the focus on universal rendering to maximise perceived performance for web applications
アメブロ2017: Isomorphic Web Appの進化編 | CyberAgent Developers Blog
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/sw-offline
GitHub - goldhand/sw-precache-webpack-plugin: Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets. You can optionally pass sw-precache configuration options to webpack through this plugin.
next.js/examples/with-sw-precache at canary · vercel/next.js
Workbox Broadcast Cache Update | Workbox | Google Developers