はぜにっき

日記です。(毎日更新ではない)

Next.js v9.4 で追加されたIncremental Static Regenerationの挙動を調べた

ReactにSSRとかファイルシステムルーティングとか色んな機能が付いたフレームワークのNext.jsのv9.4で Incremental Static Regeneration (beta) という機能が追加されました。
betaなのでGAになる頃には挙動が変わっていたり機能が増えていたりしそうですが、一旦現状の動きを調べてみたのでメモっておきます。

Incremental Static Regenerationについて

mizchi.dev

mizchiさんのわかりやすい解説を貼っておきます。

三行でどういうものかを書くと、
初回アクセス時にServer Side Renderingをすると同時に、生成されたHTML, JS等が所定の箇所に保存(キャッシュ)され、
初回アクセスで生成されたタイミングから暫くの間はキャッシュされたデータを使いレスポンスがされて、
キャッシュが破棄されてからアクセスされたら再度SSRしつつキャッシュを行う
という仕組み。

で、Vercelにデプロイする場合はVercelのCDNにキャッシュが保管され、めちゃくちゃ速くレスポンスが返ってくる。
CDNからレスポンスが返ってくるということは、(SPA部分でサーバへリクエストを送るような部分は除いて)サーバへのリクエストが飛びません。

すげーー!弊社のメディアこれでリニューアルしたい!!
ということでちょっと気になったいくつかの挙動を実際に動かして試してみることにしました。

補足: 仕様についてはこちらで議論されています。

英語できないのめちゃくちゃしんどい

github.com

調べたこと

  1. Incremental SSG + SPA 構成の作り方
  2. Incremental SSG で生成されたCDN Cacheはコードをdeployし直したら吹っ飛ぶか
  3. 2.でキャッシュが吹っ飛ぶ場合、Incremental SSG とは関係のない部分のコード変更でも吹っ飛ぶか

1. Incremental SSG + SPA 構成の作り方

普通にIncremental SSGにReact.Componentでできたコンポーネントを設置すればOK

gist.github.com

components/loading がReact.Componentでできたコンポーネントやっていることは全然ローディングじゃないけど。
コンポーネントJavaScriptも含めてキャッシュされるのでそれがブラウザ上で実行される動き。

生成される静的ファイルは .next/server/static/development/pages に置いてある。
ローカルだとIncremental Static RegenerationはされないのでHTML, CSSファイルは無いので確認はできない。

2. Incremental SSG で生成されたCDN Cacheはコードをdeployし直したら吹っ飛ぶか

A. 吹っ飛ぶ

一応確認した。
デプロイのタイミングで .next/ も全部デプロイされたコードに置き換えられるが、そのタイミングでSmartCDNのキャッシュも全部Purgeされるっぽい。
まあそうじゃなかったら旧バージョンのものが残り続けることになるのでよろしくない。

3. 2. でキャッシュが吹っ飛ぶ場合、Incremental SSG とは関係のない部分のコード変更でも吹っ飛ぶか

A. 吹っ飛ぶ

差分デプロイになってたりしないかな?って思ったけど違った。そうだよね。


調査に使ったコードは以下のリポジトリにあります。

github.com

デプロイ先はこっち
https://isr-and-spa-test-h9i09bkq9.now.sh/mag/1

実用を考えた際の課題

記事の更新をフックにその記事のキャッシュを消す、といった動作が現状できない

vercel.com

所謂CloudflareでいうCustom Purgeの機能がなさそう。

How do I use Cloudflare over your CDN (disable it)?) の欄があるし、CDNをVercelじゃなくてCloudflareにすればいいのかも。でもそれだとIncremental SSGの意味が無いような。

デプロイ直後にサーバの負荷が跳ね上がる

デプロイと同時にキャッシュが飛ぶので、その後のリクエストがURLに一回ずつ全部サーバまで飛んでくるようになる。
SSRだとキャッシュされずに全部飛んでくるのでそれと比べたらだいぶ少ないけど。
キャッシュされていることを前提にサーバの台数を減らしていたりすると、デプロイするたびに負荷が上がって大変なことになる。

そういう意味で、デプロイが差分でできたりすると良いなと思った次第。まあこれは難しいよなあ


tech.smartcamp.co.jp

インフラレイヤにあんまり力を入れたくはないけど実現できることは増やしたいので、VercelのFrontend All-inっぽい作りはめちゃくちゃ好き。
なんか貢献できないかな、zeit/next.js のissueとかPRをもうちょっと読んでみようと思いました。

やりたいこと自体はCloudflare + Nuxt.js Universal Mode(をどっかに置く) でできるんだけど、こう、楽したい。

在宅勤務の主な装備を紹介しておきます

こんにちはこんにちは。みんな在宅で装備を揃えたかと思うんですが、こちらのデッキを紹介しておきます。
比較的安価で揃えられるものの中で、良さそうなやつを集めたのでお金があまり無い人の参考になれば。

合わせて読みたい

社での働き方 tech.smartcamp.co.jp

つらみ hazepoem.hateblo.jp

f:id:hazeblog:20200413203256j:plain
全体像

www.amazon.co.jp

ガス式の昇降式デスクです。
今は売り切れてしまっているんですが、26,999円で購入しました。
同サイズの電気式の昇降式デスクよりはかなり安く、軽いです。
そんな頻繁にスタンディングにしないだろうし、持ち運びが楽で気楽に模様替えしたいのでガス式に。安かったからっていうのもあるけど...

大きさも見た目も使い勝手もかなり良いのでコスパ良しです。おすすめ。

ディスプレイ

会社のディスプレイを拝借して(許可を貰って)家で使っています。そんなに良いものではない。安いしもう一個買ってトリプルディスプレイにしても良いかもしれない。

モニタアーム

友人に教えてもらって買ったやつ。値段の割に妙に良い。
必要があればふたつモニタを付けられるというのは安心できます。

椅子

www.low-ya.com

会社で使っている椅子がかなり自分に合っていて、安いよ!と情シスが教えてくれたので購入。
アーロンチェアは前屈みっぽくなるんですが、これはちょっと後ろに倒れる感じ。長い間座っていても疲れないです。

フットレスト

椅子が後ろ向きで足に少し負担があるのでは?と思い、安かったので試しに購入したらめちゃくちゃ良かった。
会社用にも一つ買いました。本当におすすめ。

自転車漕ぎマシン

運動不足解消に。
朝に通勤時間と同じ時間、Twitterとかインターネットをしながら漕いでいます。あとMTG中。
負荷はちょっと弱いと思っていたんですが、長い時間漕ぎ続けているとわりとしんどくて、丁度良いみたいです。

追記

机の背面の強化を書き忘れていたので書いておきます。

これをふたつ横に並べています。
座ったときに上に置いたスピーカーがちょうど頭の高さになります。

スピーカー

www.soundhouse.co.jp

社の人におすすめを聞いたらこれになりました。


手札は以上です。対戦よろしくおねがいします。

JINSのAirframe Hingeless めっちゃおすすめ

普段はコンタクトレンズなんですが、在宅勤務が増えるにつれて眼鏡率が上がるだろうなと思い、買い替えてみました。

www.jins.com

眼鏡をあんまりかけたくない理由の一つにヒンジに髪の毛が引っかかりまくることがあるんですが、それが解消されて最高。
軽いし、レンズも大きくて境界の違和感も少ないし、ピッタリくっつくから適度な運動ならしても大丈夫そう。おすすめです。

TDD Workshop at SMARTCAMP 受けた

たのしかった、し、難しかった。
やった内容も公開して良いしtwitterとかブログとか書いてもいいよって仰っていたので書く

何やってたの

(事前にこれのどれかをローカルに持っておく)

github.com

午前中にこれ(ライブコーディング多め)を講演してもらい

speakerdeck.com

昼はこれをペアで解いた

Revenue Recognition · GitHub

gist.github.com

参加者の大半が自動テストを書いたことがある状態だったので、新作のお試し版になってちょっとラッキーだった(と思う)

演習でわかったこと

  • とりあえずModel作って < ApplicationRecord て書こうとした瞬間にRDBが存在しない世界であることに気付く
  • 俺たちはRuby on Rails(というかActiveRecord)の下で生きているんだなあ...
    • 「これってRubyの機能なんだっけ」っていうのを結構な回数言った
    • Rubyenumは無かった。enumでやろうとしたけどなくて配列にした(😇)
      • Moduleでやればよかった
  • 一回目が一番難しいし間違ったら手戻りがすごい
    • 変な焦り方をすると爆発するのは仕事と一緒。落ち着いて考える
  • 問題の大半が「どこにどう役割を持たせるか」なので、普段どこまでちゃんと設計してやっているかが如実にわかる
    • @haze-it は結構適当。あかん
    • デザインパターンは聞いたことがあってもまともに理解してないと使えない
  • Working Out Loudはスキルの一つ
  • それと同時に隣の人の話を聞くのも大事
  • ペアプロ普段からそこそこやっている気がするけどこの演習は意味わからん疲れ方するので前日はよく寝たほうが良い
    • 普段からそれぐらいの頭を使って仕事をしろっていう意味かもしれない...それはそう...

講演も演習も学べたことは多いけど、それをうまく仕事に持っていけるかどうかは別なので頑張りたい

週4勤務からフルタイムに勤務形態を変えることになりました

合わせて読みたい:

hazediary.hateblo.jp

報告: 時短正社員(週4勤務) -> 正社員(フルタイム) への転換

2020年2月から、スマートキャンプでの勤務形態を変更しフルタイム勤務になることになりました。

内部事情的な話もそこそこあるため詳細な理由は控えますが、少なくとも半年以上はフルタイム勤務になりそう。
今年の後半か2021年ぐらいからは週4に戻したい気持ちはあります。

週1+αの クラウドワークス社の新規事業開発室のお手伝い は副業として続ける予定。今後ともよろしくお願いします。

整理

時短勤務、副業・業務委託者の受け入れは、開発プロセスがそれに合っていないと相当しんどい。
仕様共有の仕組みや取り決め、開発フロー等、理由は色々あるがフルタイムの4/5分の成果は出せていない感覚が暫く続いていて消耗することが多かった。

よく心配にあがるコンテキストスイッチや副業のことが頭から抜けない、といったことについては大きな問題はなかった。
昼休憩中に副業のほうのレビューをするといったこともよくあったが、それが原因で本業に影響が出たりしたことは一度もなかったと思う。

何となく課題感というか、どうすれば解決するかはイメージがついているが、それを今の開発チームで構築してうまく運用していくには人と時間が足りない。 半年後ぐらいには安心して週4に戻してちゃんと成果を出し続けられるようにしていきたいので、仕組み作りと採用はちょっと力を入れていくつもり。

「分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計」読んだ

12月、予定の隙間の時間を使ってゆっくり読んだ。

どういう本だったか

コンテナへのデプロイを前提とした、システム設計のパターン本。
だが、コンテナ化されていなくても適用できるパターンや思想は多く、近代的な設計のシステムでなくても参考になる内容も多かった。
モノリシックなアプリケーションに機能を追加する際のパターンといったものもあり、一通りさらっと読んで頭の片隅に置いておくと良さそうな内容だった。

kubernetesを使ったハンズオンもあり、具体的な構築イメージが湧きやすくとても良かった。

あとkubernetesに限らず、バックエンドのシステム開発、インフラ、コンテナ周りの前提知識はそこそこ必要。パターン本だからそらそう

個人的な感想

hazediary.hateblo.jp

読む動機は、仕事で少しずつ分散システムの思想、考えを使ってアプリケーション改善をやっていくための前提知識の獲得、とっかかりのため。
思っていたよりずっと薄く、気軽に開いて気軽に読めて良かった。
MapReduceってなんだっけ...と調べ直したり、KubernetesのConfigMap オブジェクトって何???てなったりして、事前にもっと知っておくべきものがありそうな気もするが、一旦読んで良かったなと思う。

パターン本、デザパタとかDDDとかあまり読むのが得意じゃなかったけど、一旦気軽に読んでおいて、何か似たような形見たことあるなーって思ったら読み返せばいいか、ぐらいの気持ちで読むとさらっと行けるのかなと今回思った。厚さが全然違うっていうのもあるんだけど。

f:id:hazeblog:20200105225957p:plain
社Slackのtimesにメモを書いている様子

普段、本を読んでいる途中に書くメモをinkdropに書いているんだけど、試しにslackのthreadを使って書いてみたらとても良かった。
短くも長くも書けるし、何より気楽。あと参考のリンクを貼るとOGPが展開されて良い

次に読む本

同じ文脈で次に読もうとしている本。
分散システムのデータ周りを中心とした、今回の本よりもでかくて分厚い本です。がんばろう。

2019年振り返りと2020年にやろうとしていること

2019年に書いたエントリ

hazediary.hateblo.jp

これ含め20記事。去年よりかなり減った。「日記」ぽいエントリが減っただけな気がするからまあ良いかなあ。

大きめの出来事

hazediary.hateblo.jp

転職、同時に兼業を始めた

年初に立てていた目標を見る

hazediary.hateblo.jp

仕事 - Ruby on Rails + React

仕事が変わったのでReactから離れてしまったが、Vue, Nuxtは書いている。
中身までちゃんと理解しているかと言われるとそんなことはない。2018年末よりはだいぶコードも読んだり書いたりできるようになったはず。
とはいえまだまだな部分が多いので来年はもっとコードを書いていきたい。

技術だけではなく、サービス設計、組織などについても考えていきたい。

この辺は転職前後ぐらいからよく考えるようになった。
前職との差分とか、理想形を考えてそこの差を埋めるための動きみたいなことを意識してやっている。これからも継続して続けたい

hazediary.hateblo.jp

趣味えんじにありんぐ - プロダクト開発 / 利益

個人プロダクトは特に作ってない。
副業が0->1、数人で作っている規模感のため割と小さく早く作る、みたいなのは出来ている。
マネタイズはまだまだだなあ、個人でできる範囲も結構狭いんだなというのを今年はたくさん感じた気がするので、ここは考えが変わったかも。やれたらいいんだけど。

表に出る機会

4~5回ぐらいLTした気がする。
Advent Calendar辺りが去年はなかった取り組みだったかなあ。
他の人に見られる文章っていうのを多少気にするようになった。

健康

去年よりは確実に健康になった。めでたい。
年末に溶連菌にかかってしまったが、それ以外は1〜2回風邪を引いた程度なので全然良い。
睡眠不足は徹夜麻雀とかカラオケとか泥酔とかしなければあんまりならなくなった。

今後の選択肢を増やす

副業をやり始めたり、転職を考えたタイミングでそれなりに選択肢はあるなあと思った気がする。

海外で働きたい意欲は元々特になかったが最近は更になくなってきてしまい、国内指向が強くなった。
放送大学、籍はあるんですが単位もそこまで取れていない。来年続けるか少し悩んでいる...

振り返り

仕事について

転職
今年も転職をした。
3回転職をしているけど、する理由も毎回違うし仕方ないというか、今のところ後悔はしていないし説明もできるから良いかなと思っている。

副業
本業と副業、両方をやっている体制は個人的にはとても楽しいし、本業だとあまり触れない方面の技術(Firebaseとか)が触れててとても勉強になっている。

ただ、副業で学んだことを本業で活かせているかというとそうでもないなあというのが最近ちょっと考え事になっていて、まだ自分の勉強のためにしか週4勤務ができていないので少し申し訳ない。
来年やっていくプロジェクトを考えていると、週4で本当になんとかなるかな、という不安もあったりするので、また少し後に振り返って考えてみようと思っている

長期スパンでのキャリアについてはまだわからない。数年は振り子みたいな形でエンジニアリングをやりつつ、飛び込むタイミングがあれば別のことをしつつ、みたいな感じになりそう。

仕事以外

ダイビングをやった。かなり楽しいけどお金が飛ぶ。
ゴルフを再開した。かなり楽しいけどお金が飛ぶ。ダイビングほどではない。
麻雀を会社でやるようになった。お金は飛ばないけど時間が飛んでいく。

彼女はいません。よろしくおねがいします。

来年やろうとしていること

Developerとして

来年はちゃんとエンジニアリングというか、技術をちゃんと付けたいなと思っている。
小手先でなんとかする、とかが多いほうだと思っていて、土台になる部分がまだ出来てはいないなあとよく感じるし、危機感も多少ある。
後述する通り、しばらくはバックエンドをやっていくのでそこにちゃんと集中できるように動いていきたい

本業

hazediary.hateblo.jp

にも書いているが、リファクタリング・サービス分割に関わっていくことになりそうなのでその辺りの知識習得と技術をやっていく、と思う。
急いで分散システムや設計の本を読んでいる。1〜2月ぐらいで読み切りたい&なんとなく理解したい。

プロダクトもそこそこでかいし負債もまあまああるので、既存のコード理解とかドメインロジックを理解した上で理想形を考えていく、というのをやる予定。
がんばりたい

副業

引き続き。
プログラマとしての成果を出した上で、本業だとすぐ出来なさそうな技術とか方針を習得するお気持ちは持ち続けたい。のと、前述の通りに本業にどうやったら還元できるかも考えつつ。

イベント・カンファレンス運営

Builderscon tokyo 2020 のスタッフになった のでやっていく。

スマートキャンプの勉強会にも結構かかわることになった。外から見た会社とか色々意識しながら施策を試していきたい。

アウトプット

コードで出せることはコードで、文章に起こすべきこと、言葉でちゃんと伝えないといけないことの使い分けを意識してやっていきたい。
考えや方針を文書で説明できるスキルはそれなりにあるっぽいので、うまく使っていく。

全体的に、無理して先のことを考えようとするとうまく行かない気がしているので、現状とあるべき理想のイメージだけを意識して動いていきたいねって思った。
プライベートは体調を崩さない程度に遊んで、温泉とかいっぱい入って良い感じにやりたい。

来年もよろしくお願いします。🙏