-
[Next.js] localstorage 에 데이터 저장할 때 나타나는 에러 ( server,client 불일치) -ZustandFrontEnd/Next.js 2023. 8. 24. 16:09
https://github.com/pmndrs/zustand/issues/1145,
내가 어떤 데이터가 새로고침 되더라도 초기화 되지 않게 하기 위해 그것을 로컬 스토리지에 저장했음.
그래서 새로고침을 하더라도 데이터는 쭉 유지 되는데 콘솔 창 에러로 아래 같이 나옴.
warning: Text content did not match. Server: "0" Client: "2" app-index.js:31
Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>. on-recoverable-error.js:21
Uncaught Error: Text content does not match server-rendered HTML.
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
그래서 마운트 되기 전에는 아무 것도 리턴하지 않고 마운트 시에만 뜨게끔 변경해줬더니 해결 됨.
'use client'; import { useCart } from '@/hooks/useCart'; import { ShoppingBag } from 'lucide-react'; import { useRouter } from 'next/navigation'; import React, { useEffect, useState } from 'react'; const NavbarActions = () => { const router = useRouter(); const { count } = useCart(); const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) { return null; } return ( <button onClick={() => { router.push('/cart'); }} className="bg-black text-white px-3 py-1 rounded-full flex justify-center items-center space-x-2 hover:ring-2 hover:ring-offset-2 hover ring-black" > <ShoppingBag className="w-4 h-4 " /> <div>{count}</div> </button> ); }; export default NavbarActions;
'FrontEnd > Next.js' 카테고리의 다른 글
[Next.js] 테스트 종류 (0) 2023.09.12 [Next.js] route 에서 CORS 대응하기 (0) 2023.08.26 [Next.js] .env 파일에서의 NEXT_PUBLIC 키워드의 차이 (0) 2023.08.24 [Next.js] Next Image responsive size (0) 2023.08.21 내가 만든 컴포넌트가 어디에서 import 되고 있나? (0) 2023.07.24