UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Code Splitting】SEOへのアプローチ

Code Splittingを調べたところ、初期表示用とそれ以外のコードを分割し、サイトの高速化をする方法だと言うことがわかった

uga-box.hatenablog.com

ただ、このとき、初期表示用以外の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