I'm trying to lazy load a list of data with suspense and dynamic import in Nextjs. But getting following error:
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
I've tried using startTransition() but couldn't understand how to use it.
DataList.tsx:
import React, { useState } from "react";
interface Props {
data: any[];
}
const DataList = ({ data }: Props) => {
return (
<div>
{data &&
data.map((item) => {
return (
<div key={item._id}>
{item.title}
</div>
);
})}
</div>
);
};
export default DataList;
DataPage.tsx
import React, { Suspense, useEffect, useState } from "react";
import dynamic from "next/dynamic";
const DataList = dynamic(() => import("./DataList"), {
suspense: true,
});
interface Props {}
const Projects = ({}: Props) => {
const [data,setData] = useState<any[]>();
useEffect( () => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => setData(json))
} , [])
return (
<>
<Suspense fallback={<p>LOADING</p>}>
<DataList data={data} />
</Suspense>
</>
);
};
export default DataPage;
