[Next Js] Error with permissions-Policy header: Origin trial controlled feature not enabled: browsing-topics

Next Js 이용 개발을 하다보면 많은 에러가 발생하는데, 이번엔 Permission=Policy header에러가 나왔습니다. 페이지가 정상적으로 작동하지 않는 것은 아닌데, 콘솔창에 에러가 도배가 되었습니다.
흥미로웠던 것은 새로고침을 하면 이 에러가 싹 사라지는 것이었죠. stackoverflow나 여타 다른 커뮤니티에서 도움을 얻었고 마지막으로 yijaee(velog.io@yijaee)님의 블로그에서 해결책을 발견하였습니다.

Eng) Next Js - cause errors - tried to find solution in stackoverflow - failed - found it at the blog yijaee(velog.io@yijaee).

아래와 같은 에러 발생시(Error like below)

Error with permissions-Policy header: Origin trial controlled feature not enabled: browsing-topics. Warning: Expected server HTML to contain a matching

Kor) 에러의 원인은 SSR(Server Side Rendering)과 CSR(Client Side Renderin)의 간격에서 렌더링 시 만들어지는 html이 달라서 발생하는 에러였습니다. 저의 경우에는 마크다운 파일안에 div태그와 script태그 등이 말썽을 일으켰습니다.

Eng) Cause of the error maybe(I'm not sure) be occur the difference of HTML structure between the serverside and the client side while render the page. In my case was the div and the script tag.

해결책(Solution)

useEffect를 이용. Using useEffect

  const [mounted, setMounted] = useState (false);

  useEffect(() => {
    setMounted(true);
  }, []);

하단 return에 mounted인지 체크를 하고 렌더링을 시킵니다.

    return ( mounted &&
    <Fragment>
        <div>
            
        </div>
    </Fragment>
    )

콘솔창에 에러는 사라졌습니다. Error would be gone.

---

참고

[Next Js] sitemap 만들고 업로드 하는 방법

[Next Js] 다국어 페이지 lang 설정방법

[Next Js]a title element error