RemixにおけるSEOとUXについて

パフォーマンスの観点でUXの向上を考えたとき、データ取得に時間がかかるものは非同期で取得し、先にページをレンダリングさせた方が良いのは言うまでもない
Remixではdeferというものを使うことでサーバー側でデータ取得の完了を待たずにHTMLを返すことができる

ここで気になるのがSEO
サーバーから返すHTMLが完全なHTMLじゃないため、SEOの観点で不利になると思っていたが間違いだった

Remixでプロジェクトを作成すると、entry.client.tsxとentry.server.tsxというファイルが生成される
ここにはそれぞれクライアント側とサーバー側のエントリーポイントの処理が書かれている

entry.server.tsxを見ると
handleBotRequestとhandleBrowserRequestというのが存在する
isbot関数は、一般的なbotのUser-Agent文字列をデータベースとして持っているらしく
これにより検索エンジンのクローラー（ボット）からのアクセスの場合、handleBotRequestを実行し
ブラウザからのアクセスの場合は、handleBrowserRequestを実行している

handleBotRequestとhandleBrowserRequestの中身を見てみると
レスポンスを返している関数が異なることがわかる

handleBotRequestの場合、onAllReady関数でレスポンスを返しており
handleBrowserRequestの場合、onShellReady関数でレスポンスを返しいてる

onAllReadyは
すべてのコンポーネントがレンダリングされた後に呼ばれるため、
非同期のPromiseの解決を待ち、完全なHTMLを返す

onShellReadyは
初期のHTMLが準備できた時点でレスポンスを返すため
ブラウザに対しては、非同期にデータを読み込むことが可能となる

よって、SEOの観点は気にしなくて良さそう