Code Splittingを調べたところ、初期表示用とそれ以外のコードを分割し、サイトの高速化をする方法だと言うことがわかった
ただ、このとき、初期表示用以外のJSは「遅延読み込み」するので、実際のコンテンツは描画時にレンダリングされていないことになる
そしてこれはSEOに悪影響を与えるのではと思い、解決策を調査してみた
以下の記事が参考になった blog.logrocket.com
この記事では、loadable-components
を使用してコンポーネントを非同期にロードする方法を紹介している
結論からいうとfallback
という機能を使う
fallback
はコンポーネントが非同期的にロードされている間に代わりのものを表示する機能
const OtherComponent = loadable(() => import('./OtherComponent'), { fallback: <div>Loading...</div>, })
SEOの解決のために、有効な静的HTMLを取得して保存しておき、それを代わりに出すというのを紹介していた
事前に静的HTMLを作成しておくという意味でSSGとの組み合わせ?のように感じる
ちょっと簡単にはいかなそうだが参考になった
ちなみにNext.jsにもfallbackオプションがある
https://nextjs.org/docs/basic-features/data-fetching#fallback-true