前回useEffect
を使ってlocalStorageから値を取得することができた
他に調べているとNext.jsではDynamic Import
をサポートしているため、Dynamic Import
を使ってもlocalStorageから値を取得することができそうということに気づいた
使い方
検索履歴を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にも影響がありそう