I ran into this exact issue last week! The problem here is actually pretty simple - React doesn't like when you update state while a Suspense boundary is still hydrating.

Here's what's happening:

1. Your component starts hydrating
2. The Suspense boundary is waiting for DataList to load
3. Meanwhile, your useEffect runs and calls setData
4. React gets confused because you're changing state while it's still figuring out what to render

The fix? Wrap your state update in startTransition:

import { startTransition, useEffect, useState, Suspense } from "react";
import dynamic from "next/dynamic";

const DataList = dynamic(() => import("./DataList"), {
  suspense: true,
});

const DataPage = () => {
  const [data, setData] = useState([]);

  useEffect(() => { 
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => {
        // This is the key change!
        startTransition(() => {
          setData(json);
        });
      });
  }, []);

  return (
    <>
      <Suspense fallback={<p>LOADING</p>}>
        <DataList data={data} />
      </Suspense>
    </>
  );
};

export default DataPage;

This tells React "hey, this state update isn't urgent - finish your hydration first, then apply this change."

The other benefit? Your UI stays responsive because React prioritizes the important stuff first. Hope this helps! Let me know if it works for you.