【Hotwire】Hotwireについて知らなかったこと
はじめに
2024/1からRuby on Railsに関してプログラミングスクールで学習中であり、現在自分自身のアウトプット力を高めるために毎日投稿しています。
本日はこの動画を見て、学んだことをメモ程度に記載したいと思います。
Hotwire for Frontend Developersから学んだこと
Hotwireって、Rails専用のフロントエンド技術と誤認していた
Turbo Streamsを使用して、これまで散々非同期処理を行ってきましたが、このことすら認識していませんでした...。公式でもきちんと、どの言語でも対応している旨記載ありました。ちゃんと公式読まないとダメですね、、。
This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, ・・・ （https://hotwired.dev/）
今回拝見させていただいているこの動画では、Next.js上でHotwireを動作させているということで、とても興味深く面白い内容でした。
セキュリティ面でNext.jsより勝る点があること
こちらも知らなかったのでとても勉強になりました。
Next.js自体学べていないため、どのようなセキュリティ対策を取るのかも知りませんでしたが、Hotwireより世間的に使用されているイメージがあるので、ここは意外でした。（他の面で優れている部分があるからこそ、フロントの技術として採用する方が多いとは思いますが、、、）
- ネイティブ(MPA)、Hotwire： サーバはページに表示するHTMLのみをブラウザに送るため、意図しないデータをブラウザに送ってしまう可能性は低い。データ漏洩のリスクは少ないと言える。
- Next.js： サーバで取得されたデータを、開発者から見えにくいところで自動的にブラウザに送るため、注意しないとデータ漏えいにつながる。
例） - useEffect等でブラウザからデータをfetchした場合。
- Pages routerの場合、getStaticProps, getServerSidePropsの返り値も、ほぼそのまま自動的にJSONでブラウザに送られる。
prefetch機能
この機能に関しても初めて知りました。Hotwireに関しては最近できた機能のようです。（参考）
ヌルっと、サクッと動く機能を実装するのに、Next.jsを使用されている方が多いイメージですが、この動画のデモでもある通り、HotwireのTurbo DriveがNext.jsよりヌルッとサクッと動く可能性が高いことがわかりました。（Next.jsのprefetch機能では色々制約があるそうです）
最後に
私自身、Next.jsを深く勉強しているわけではないので、記述誤り等あるかもしれませんがご了承いただけますと幸いです。
今後も色々情報収集をし、自分自身の個人開発へ反映させていきたいと思います。
ありがとうございました。
Discussion