以下の内容はhttps://let.blog.jp/tag/cacheより取得しました。


「/」 だけキャッシュされる
キャッシュがなんかおかしいなーと思って調べたら 「/」 のページだけ長期キャッシュになってました
静的ファイル置き場のファイルはこんな感じ

index.html
assets/index-abcdef.js
assets/...

SPA で 404 のときに index.html を返します
静的ファイルのサーブでは cache-control が設定されています

「/」 のときは静的ファイルのサーブとして index.html がサーブされて 「/foo」 などではエラーハンドラの処理として index.html がサーブされていました
結果 「/」 でだけキャッシュが有効になってました

index.html は静的ファイル置き場に置かないほうがいいのでしょうか
ファイルごとにヘッダー設定ができるものなら .js や .css みたいなリソースファイルの拡張子の場合だけキャッシュさせたり assets みたいなフォルダ単位でキャッシュさせるとかすればいいのですが 全体設定しかできないものだったので困りました
ログアウトとローカルデータ
ブラウザ内の一時保存で良いデータを localStorage に保存することがありますが 考えてみるとログアウトして別ユーザーでログインしたら別ユーザーにも引き継がれますよね
テーマとかサイドバーの開閉状態とかそれくらいなら別にいい気もしますが 例えばフォームの入力情報みたいのは他ユーザーが見れるとまずい気もします
例えばクラッシュに備えた自動保存で 投稿に成功したり入力を破棄しない限り再度開いたときにストレージから復元するような機能です
こういうのがあると ログインするものでは localStorage を気軽に使いづらいですね

似たようなもので長期キャッシュも問題になるかもしれません
max-age をつけてリクエスト不要のキャッシュにすると ログアウト後でも見れてしまいます
そもそも静的ファイルは隠す必要はないのかもしれませんけど
昔ながらの Apache + PHP だと 静的ファイルはアプリの処理に入る前に Apache で返すので公開されてますし
それに基本は .js か .css か画像系なので履歴に URL は残らなくてログアウト状態だとアクセスする URL はわからないはずです

問題になるのはログ系のファイルでしょうか
月や日付などが URL に含まれるようなもので更新されないデータです
更新されないんだからキャッシュさせたくなりますが ユーザーの情報が入ってるのでログアウト後に履歴から開いてみれるのは良くないです
こういうのがあると max-age に任せるだけじゃなくて E-Tag に対応させて 304 を返すような機能も入れておいたほうがいいかもですね
SPA の index.html はキャッシュしたほうがいいの?
これまでは初期表示に必要なデータを index.html に埋め込んでたので静的ファイルじゃないのでキャッシュなし
SPA を作る場合のキャッシュ関係の話で index.html もキャッシュするほうが良いみたいなことを見たので したほうがいいのかも?
だけどログイン中のユーザ情報など初期表示時に固定じゃない情報が必要なら index.html をキャッシュしても結局ページ開いた直後に API 呼び出しでもうひとつリクエストが必要になる
index.html がすごい重いファイルというならわかるけど SPA なら JavaScript で DOM 作るわけで index.html はほぼ空のはず
あまりメリットを感じられない

規模が大きなもので index.html も含めて静的ファイルは CDN で配布して 変化するデータはすべて API で別のサーバから取得 みたいな構成にしてると意味があるのかも
そんなことしない場合はやっぱりどっちでもよさそう



.js や .css をキャッシュさせるためにビルドごとにパスが異なる作りだと index.html もビルドで自動生成されたりする
Koa で SPA としてサーブする場合

app.use(static(...))

app.use(router.routes(...))

app.use(async (ctx, next) => {
await sendFile("/path/to/index.html")
})

公開フォルダにファイルがあればそれ
ないならルーターで処理
マッチするルートもないなら index.html

ビルドで出力された index.html なら場所は公開フォルダの内側
index.html に直接リクエストしたら static で処理されて 見つからない場合だと最後のミドルウェアで処理される
データを埋め込む場合は static のミドルウェアで処理されると埋め込めない
最後のミドルウェアでまとめて処理したい
静的ファイルじゃないから 公開フォルダじゃなくてテンプレート用フォルダに置くのが正しそうだけど このファイルだけ特別に移動も面倒

static を defer して最後のミドルウェアで公開フォルダ内のファイルの有無を確認して static で処理しないなら index.html に埋め込みしてレスポンスにできるけど 公開フォルダでマッチするファイルの有無を確認してるし ファイルの send 機能もあるならここで static の処理をすべてやってしまったほうがいいくらいになってる

埋め込み処理するなら公開フォルダに置かないようにするのが良いけど それが面倒なら index.html は埋め込みなしでキャッシュさせて API で情報受け取るのでもいいかも



以上の内容はhttps://let.blog.jp/tag/cacheより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14