皆さん、おはようございます！「zenncast」の時間がやってきました〜！今日は2024年5月19日、日曜日です。私はMCのマイクです。今日もZennでトレンドの記事をご紹介していきますよ〜。
まずは前回紹介した記事をざっとおさらいしましょう！前回は「WSL2+Ubuntu24.04+Docker＋GPUでつくる機械学習環境」、「なぜSQLiteはバイトコードを使うのか」、そして「AWSを使用したアプリケーションのローカルテスト」について触れましたね。どれも非常に興味深い内容でした！
さて、今日紹介する記事は5本あります。それでは早速、今日のトレンド記事を紹介していきましょう！
....
まず最初の記事はこちらです。「Next.jsのSSRF脆弱性 CVE-2024-34351」についてです。この記事では、Next.jsにおけるSSRF（サーバーサイドリクエストフォージェリ）脆弱性について詳しく解説されています。この脆弱性は、特定の条件下でHTTPヘッダーの`Host`を書き換えることで、内部APIや非公開サーバーへのリクエストを送信できるという問題です。特に、Next.jsをセルフホスティングで運用している場合や、Server Actionsを利用している場合に影響があります。バージョン`v14.1.1`で修正されていますが、カスタムサーバーを利用している場合はまだ注意が必要です。具体的には、`createRedirectRenderResult`関数が`Host`ヘッダーの情報を利用して`fetchUrl`を生成し、そのURLに対して`fetch`を行うことが原因です。この脆弱性により、内部APIや非公開のリソースにアクセスされる可能性があるので、対策が必要です。筆者はこの脆弱性を通じて、SSRF攻撃のリスクとNext.jsの`redirect`処理の詳細について学んだとのこと。特に、カスタムサーバー利用時の脆弱性対応やパフォーマンスの問題についても触れられています。
....
次に紹介するのは「Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す」という記事です。今年のGoogle I/Oで発表されたFirebaseの新機能「App Hosting」を使って、Next.jsのサーバーサイドレンダリング（SSR）を試してみたという内容です。Firebase Hostingは以前はクライアントサイドレンダリング（CSR）のみをサポートしていましたが、今回のアップデートでNext.jsとAngularのSSRがサポートされるようになりました。筆者は以前、OSSプロジェクト検索サービス「booby」をFirebase Hostingにデプロイしようとしましたが、SSRを実現するためにCloud Runを使用する必要がありました。しかし、今回のアップデートによりFirebaseでも簡単にSSRがサポートされることを知り、再チャレンジを決意。実際に試したところ、プロジェクト作成後に「App Hosting」を選択し、GitHubとの接続を設定するだけで簡単にデプロイが完了したそうです。料金プランについても触れられており、通信とストレージが月5GBまで無料で、サーバーサイドのランタイムはCloud Runなどの料金に準拠しています。この新機能により、Firebaseは中小規模のモダンWebアプリのランタイムとしても注目される存在となりました。
....
続いての記事は「URLクエリパラメータによる検索画面をSuspenseで実装する3パターン」です。この記事では、Next.jsと`Suspense`を用いてURLクエリパラメータによる検索画面の実装方法を3つ紹介しています。まず、**Suspense + RSC (サーバーコンポーネント)**では、URLクエリパラメータを`page.tsx`の`searchParams`propsから取得し、RSCに渡すことができます。次に、**Suspense + CC (クライアントコンポーネント)**では、`useSearchParams`でURLクエリパラメータを取得し、クライアントサイドフェッチにはTanstack Queryなどのライブラリを使用することが推奨されています。最後に、**Suspense + useTransition**では、初回データフェッチのフォールバックUIとして`Suspense`を使用し、トランジション中のローディングUIを表示する仕組みを実装。各パターンの実装コードや、トランジション状態を管理するためのコンポーネントのコード例も紹介されています。記事の最後には、それぞれのメリット・デメリットを考慮し、適切な実装方法を選ぶことの重要性が強調されています。
....
次に紹介するのは「React Compiler を試す」という記事です。React Compilerがオープンソース化され、公式ドキュメントにもページが追加されました。この記事では、React Compilerを用いて無駄な再レンダリングを抑制する方法を検証しています。まず、ViteでReactプロジェクトを作成し、React 19 Betaにバージョンアップ。次に、Babelプラグインとして提供されているReact Compilerをインストールします。`use memo`ディレクティブを使用することで特定のコンポーネントやフックのみをコンパイル対象にする「opt-in」モードを設定。サンプルコンポーネントを作成し、再レンダリングの挙動を確認。`memo`によってメモ化されたコンポーネントがPropsの変更により再レンダリングされるのに対し、React Compilerを使用すると再レンダリングされないことを確認しました。依存関係を正しく理解し、再レンダリングを抑制するReact Compilerの効果が強調されています。
....
最後に紹介するのは「【セキュアな個人開発のお供に!!】 Honoで作ったMPAに、Cloudflare Accessを使って簡単に認証をかける」という記事です。この記事では、個人開発者が作成した簡単なWebアプリに対して、一般公開を避けつつアクセス制限をかけるための方法として、Cloudflare Accessを用いたGitHub認証の実装手順が紹介されています。手順は、DNSレコードの追加、エンドポイントの作成、GitHubログインの設定、認証設定の順に進められます。最終的に、認証がかかったエンドポイントにアクセスし、GitHubログインを実行することで、アクセスが制限されることを確認。Cloudflare WorkersとAccessを利用することで、個人開発のWebアプリに簡単かつ効果的にGitHub認証を導入できることが強調されています。
....
さて、今日の紹介はここまでです。もう一度簡単におさらいしましょう。最初の記事は「Next.jsのSSRF脆弱性 CVE-2024-34351」、次に「Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す」、続いて「URLクエリパラメータによる検索画面をSuspenseで実装する3パターン」、その次が「React Compiler を試す」、そして最後に「【セキュアな個人開発のお供に!!】 Honoで作ったMPAに、Cloudflare Accessを使って簡単に認証をかける」でした。
詳しい内容はショーノートに書いてあるので、ぜひチェックしてみてくださいね！また、番組の感想もどしどしお待ちしています。
それでは、次回もお楽しみに！マイクでした〜。