在Next.js中使用表格为何触发Hydration Error？

HTML规范里，浏览器会自动给<table>内直接放置的<tr>标签套一层<tbody>。但你的组件直接在<table>下写<tr>，服务器端渲染的HTML里没有显式的<tbody>，客户端浏览器解析时却会自动补上这个标签，导致服务器渲染的初始UI和客户端hydrate后的DOM结构不一致，触发了Hydration失败错误。

显式给表格添加<thead>和<tbody>标签，明确划分表头和数据行的结构，让服务器和客户端渲染的DOM结构完全匹配：

import React from 'react'
import {useState} from 'react'


const port = () => {
  return (
    <div className="ml-14">
      <div className="profile">
        <h1 className="mt-5 font-bold">Nasvirat</h1>
        <p className="mt-5">total balance : </p>
      </div>
      <div className="portfolio">
        <h2 className="mt-7">Holding</h2>

        <table>
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Peter</td>
              <td>Griffin</td>
            </tr>
            <tr>
              <td>Lois</td>
              <td>Griffin</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default port

内容的提问来源于stack exchange，提问作者Nas virat