miyaoka.dev

Next.jsブログのmarkdown編集時に表示更新する(2)

🧪 tech🔺 nextjs

Next.js ブログの記事編集時に自動表示更新機能を以前実装したが、スクロール位置が失われる問題が出てきたので実装方法を変更した。

image

なぜスクロール位置が失われるかというと、getStaticProps を再実行させてしまっているところに問題がある。これは SSR を引き起こすので新しいページとして更新されてしまい、そのためページトップに戻ってしまうということが分かった。

なので、ページはそのままにして内部のレンダリングのみ更新させたい。つまりページコンポーネントを更新すればそこだけ再レンダリングが行われる。ただし getStaticProps はまさに static であるため新しいコンテンツ内容は入ってこない。

そこで props をいったん state に入れて ページ内容を state から描画するようにし、再レンダリング時は useEffect で最新内容のコンテンツを state にセットし直して表示するようにした。コンテンツはファイルシステム内にありクライアントからはアクセスできないので、取得用に API を作りそこから fetch させる。

const [post, setPost] = useState(postData)

// dev時ならmount時に記事内容の再取得を行う
if (process.env.NODE_ENV !== 'production') {
  useEffect(() => {
    const fn = async () => {
      const res = await fetch(`/api/posts/${post.id}`).then((res) => res.json())
      setPost(res.postData)
    }
    fn()
  }, [])
}