reCAPTCHA v3をReact Hooksで実装する - Uzabase for Engineers

こんにちは。 NewsPicks Web Product Unit の芥川（@aku11i）です。 NewsPicks の新Webフロントエンド基盤でNext.js・TypeScriptを使用した開発を行なっています。 今回、プロジェクトに reCAPTCHA (v3) を導入しました。 読み込みタイミングなどパフォーマンスに気を遣った実装をすることができましたので紹介したいと思います！ 実装方針 reCAPTCHA を導入するにあたり、次のような方針を立ててみました。 読み込みタイミングを制御する ページの初期レンダリングのタイミングでは reCAPTCHA が不要なパターンもあります。 そのため必要なタイミングで非同期で読み込めるようにし、他のリソースへの影響を抑えるようにします。 外部ライブラリを使用しない 今回は自前で実装してもシンプルなコードを維持できる見込みがありましたので、他