Table要素をレンダリングする際の「Hydration failed because the initial UI does not match what was rendered on the server」エラーへの対応

以下のコードでの「Hydration failed because the initial UI does not match what was rendered on the server」エラーに、しばし悩まされましたが、

import React from 'react';

function App() {
  return (
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </table>
  );
}

export default App;

以下のようにthead, tbodyでヘッダ・ボディを明示的にすることでエラーを解消できました。

import React from 'react';

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
        </tr>
      </tbody>
    </table>
  );
}

export default App;

このエラーが発生する場合、Reactが想定しないHTMLになっている可能性があるかも知れません。