Error [Next.js: Hydration failed (오류 확인 및 해결)]

 

오류 내용

Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <table> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error

 

 

해당 오류는 다양한 원인에 의해서 오류가 발생하므로 오류 원인을 파악하는 것이 가장 먼저 해야할 일이다.

 

 

원인 파악

원인을 찾은 결과는 <table> 안에 <tbody> 안에 <tr> 에 <th>나 <td>가 없어서 생긴 일이었다.

 

원인 코드

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>button</th>
        </tr>
    </thead>
    <tbody>
        <tr>(test)</tr>
    </tbody>
</table>

 

해결 방법 

<tr> 안에 <th> 나 <td>를 사용하면 된다.

 

한줄로 데이터를 병합하여 사용하고 싶어서 해당 코드가 나온것으로 예상된다

만약에 한줄로 하고 싶다만 colSpan 속성을 사용하는 것이 좋다

 

개선 코드

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>button</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colSpan={3}>(test)</td>
        </tr>
    </tbody>
</table>