UGA Boxxx

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

【Next.js】Dynamic Importを使ってlocalStorageから値を取得する

前回useEffectを使ってlocalStorageから値を取得することができた

uga-box.hatenablog.com

他に調べているとNext.jsではDynamic Importをサポートしているため、Dynamic Importを使ってもlocalStorageから値を取得することができそうということに気づいた

nextjs.org

使い方

検索履歴をlocalStorageから取得してレイアウトするSearchHistoryコンポーネントDynamic Importしてみる

import dynamic from 'next/dynamic'

const SearchHistory = dynamic(() => import('../components/SearchHistory'))

function Home() {
  return (
    <div>
      <Header />
      <p>HOME PAGE is here!</p>
      <SearchHistory />
    </div>
  )

SearchHistory.tsx

const getSearchHistory = () => {
  if (typeof window !== "undefined") {
    const serializedSearchHistory = localStorage.getItem("searchHistory");
    const searchHistory: Array<any> = serializedSearchHistory
      ? JSON.parse(serializedSearchHistory)
      : [];
  }
};

export default function SearchHistory() {
  const [historyList] = useState<Array<any>>(getSearchHistory());

  return (
    <div>
      {historyList.map(history => (<div>{history.foo}</div>))}
    </div>
  );
}

この方法でもSSGでの事前ビルドに影響なくlocalStorageが使えそう

useEffectとDynnamic Importはどちらがよさそうか?

useEffectでは非同期に実行されるため、ページの読み込みの度にロード中の状態(何も出さない、または、「Loading...」のような状態)が発生する

今回の利用箇所ではページの後続にあるため、データ取得後にパーツが出現する場合でも問題ないが、ページの先頭にだすパーツの場合はDynnamic Importの方がよいのかもしれない

検証していないが、CLSにも影響がありそう