DEV Community 日本語
フォロー
ツールハブの作り方:サブセカンドを維持する138ツール搭載の静的PWA
著者は最近、クリーンさ、プライバシー、そしてゼロブロートを優先した138個のインブラウザWebユーティリティスイートであるToolHubの構築に関する完全なアーキテクチャレトロスペクティブを発表しました。このサイトは、サブセカンドの高速性と完全なオフライン機能を備えるように設計されており、これらの機能を可能にする主要なエンジニアリングのトレードオフと技術的な決定がなされています。主要なアーキテクチャのハイライトの1つは、Next.js Static Exportの使用であり、これによりエッジCDNでホストされる100%静的なエクスポートモデルが可能になり、サーバーメンテナンスゼロと超低速な初回バイト時間が実現します。このアプローチは無限のスケーリングも可能にしますが、すべての動的コンテンツがブラウザメモリ内で厳密にクライアントサイドで実行される必要があります。著者はまた、カスタムService Workerキャッシング戦略を実装しました。これには、静的アセットのstale-while-revalidateと、HTMLドキュメントナビゲーションのnetwork-firstが含まれており、キャッシュされた後はすべてのツールで完全なオフライン機能が保証されます。さらに、著者はプログラムによるSEOエンジンを開発しました。これは、完全なJSON-LD構造化データと自動化された内部リンクメッシュを備えた静的なツールページを生成し、すべてビルド時に静的なHTMLに組み込まれます。このサイトはまた、ゼロCLS広告戦略を備えています。これは、広告ユニットがロードされる前に明示的な固定高さのレイアウトスロットを予約することで、レイアウトシフトを防ぎます。著者はToolHubサイトをユーザーが試せるように公開しており、ブログでエンジニアリングの完全なディープダイブを発表しました。そこでは、サイト構築における技術的な決定とトレードオフに関する詳細を共有しています。著者はユーザーからのフィードバックと提案を求めており、アーキテクチャに関する意見や新しいツールのアイデアを聞くことに前向きです。全体として、ToolHubプロジェクトは、高速でオフライン対応、プライバシーファーストのWebアプリケーションを構築するための革新的な技術的アプローチを幅広く示しています。