Wrapping `tr` tag with `Link` gives Hydration Error in Next.js 14

Question

I'm using next.js 14. I want to wrap all of my <tr> tags in <Link>. But doing so gives me Hydration error.

I could do something like onclick={() => doThing()} but in that case, I have to make my component client side. (which I hardly want to)

Here's a minimal reproduceable code:

import Link from "next/link";

export default function Home() {
  return (
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <Link href="#">
          <tr>
            <th>John</th>
            <td>Williums</td>
          </tr>
        </Link>
      </tbody>
    </table>
  );
}

Error I get:

Answer 1

first make another component for table and name it Table then in Home component you have to import this component dyanmic and ssr false like this example:

import dynamic from 'next/dynamic'
const Table = dynamic(() => import('./table'), { ssr: false })
export default function Home() {
  return (
      <Table />
   );
}