はじめに
あなたは恐竜、好きですか？
私は大好きです。特にブラキオサウルス🦕！
そんな感じで最近少しずつDenoを触る機会が増えたので、学習の一環として記事を書こうと思いました。
（投稿初心者のため拙い文章かもですが、お付き合いただけますと幸いです🦕）
もし間違えがありましたらお気軽にご指摘ください～！
この記事の対象者
- IslandArchitectureって何よ
- なんとなく知ってるけど使いどころは知らん
IslandArchitectureとは🏝
必要な時に必要なところで必要なだけJSを
IslandArchitectureとは、ページ全体の静的な部分を「海」、JSが必要な動的な部分を「島」にたとえてレンダリングする手法のこと。
図に示すとこんな感じ。
なんでこの手法が生まれたか
要件に関わらずなんでもかんでもページ全体でJSを読み込ませると遅いやろ！！！
ほんの一部分にしかJSを使用していないのに、共通してJSを読み込ませていることでパフォーマンスを下げてげてしまっている。そんなことはないだろうか。
そんな課題を解決するために生まれました。
似たようなものとして、PHP（Laravelなど）で作られたものが該当します。
PHPでは静的な部分をサーバサイドでレンダリングし、動的な部分はクライアントサイドのJSを書いて実行しているためです。
使いどころ
早く表示させたいサイト
IslandArchitectureのメリットは何といっても静的コンテンツのロードが早く、必要な部分だけが動的に更新されるため、サイトのパフォーマンスが良くなること。
UX重視・パフォーマンス重視！であれば採用してもいいでしょう。
動的な部分が限られてるサイト
インタラクティブな要素が少ないブログサイトやニュースサイトには適していますね。
使わないどころ
動的な部分がほとんどのサイト
そもそもIslandArchitectureはMPAベース。
動的な部分が多い場合は、SPAで作るほうが良いかも！
参考→SPAとMPAって何が違うの？SPAにしたほうがいい？
規模が小さめなサイト
ページの速度よりリリースの速度を重視する場合はメリットが少ないです。
IslandArchitectureの設計・実装に頭を悩ますよりも別のことに頭を使いましょう。
おわりに
なんにでも言えますが良い悪いではなく要件次第なので、うまく活用してみてはいかがでしょうか？
みなさんも興味が湧いたら是非freshを触ってみてください！
IslandArchitectureはAstroも採用しているので、そちらも触ってみてもいいかもですね～
弊社開発課のXも是非フォローしてね🦕💨
参考
https://fresh.deno.dev/
https://qiita.com/oekazuma/items/87923acea03990fd71a2
https://deliv.tech/2020/11/10/mpa-vs-spa/