Loarding...
..../../..
カテゴリー:....
目次
Post date : ..../../..Category : ....
Next.jsのprojectでserver sideでdata fetchしてrenderingするcomponentでuseRefを使おうとしたら無限ループになってしまった。
検索したら、"use client"はasync functionでは使えないみたい。
https://nextjs.org/docs/messages/no-async-client-component
blogのひとつの記事をserver sideでfetchして、目次を作り、
目次のそれぞれのセクション名を押したらそのセクションにscrollIntoViewするという
blogにはよくある機能を作ろうとしたらこの問題にはまってしまった。
Reactの公式HP
https://react.dev/learn/manipulating-the-dom-with-refs
通りにuseRefで作ったが、
Next.jsでのserver side renderingではこのままではだめみたい。
Server ComponentでClient Conponentを呼び出せばいいみたい。
export async function ServerComponent(){ const dataList = await fetch(..省略..) <ClientComponent dataList={dataList}/>}
export function ClientComponent(dataList){ const myRef = useRef(null); return map.((dataList)=>(<span>data</span>))}
こんな感じ。