Next&Recoil&typescript로 조건부 렌더링은 안되는 건가요?

Question

안녕하세요리액트로 포트폴리오를 어느정도 마무리하고 디자인과 일부 기능들을 리팩토링 할겸 Next로 새로 개발을 시작했습니다.근데 ssr로 넘어오면서 이해하기 어려운 부분들이 많아 질문드립니다.Next페이지에서는 조건부 렌더링을 어떻게 해야하는지 모르겠습니다.어느정도 Next의 매커니즘을 이해하려고 시간을 써봤지만 키워드의 문제인지 React의 조건부 렌더링 등 이뿐만 아니라 찾기 힘든 부분이 많았습니다.제가 어디서부터 생각이 잘못되었는지 성찰하기 어려워 키워드를 여쭙고 싶습니다.아래 코드를 보고 도움 부탁드립니다.const Nav: NextComponentType = () => { const user = useRecoilValue(userState); return (

모두여기

{user.id !== undefined ? (

poogie "{user.id}"

) : (

로그인

)}

); }; const localStorageEffect: (key: string) => AtomEffect = (key: string) => ({setSelf, onSet}) => { if (typeof localStorage !== `undefined`) { const savedValue = localStorage.getItem(key); if (savedValue != null) { setSelf(JSON.parse(savedValue)); } onSet((newValue, _, isReset) => { isReset ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue)); }); } }; export const userState = atom({ key: `userState/${v1()}`, default: {} as UserType, effects_UNSTABLE: [localStorageEffect("user")], });이와 같이 로그인 시 유저정보를 로컬스토리지와 Recoil을 통해서 관리하고 있습니다.처음에는 로컬스토리지를 쓰는 것 조차 에러가 났었지만 로컬스토리지와 간섭은 가능해졌고이를 첫 index페이지에 보여주고자 하였습니다.제가 이해한 바로는 SSR을 통해 SEO의 장점은 가져가되 React의 CSR 특징은 버리지 않는다고 이해했는데서버에서 렌더링된 페이지와 브라우저에 렌더링된 페이지가 다르다며"Error: Hydration failed because the initial UI does not match what was rendered on the server."라고 에러를 보여주었습니다."Expected server HTML to contain a matching

in

." 같은 브라우저 콘솔창 에러도 보았으나 해결에는 도움안되는 에러로 파악 되었구요리코일을 이용하여 조건부렌더링이 자유로웠으면 하는데 적합하지 않은 생각일까요?그렇다면 다른 분들은 Next에서 토큰과 유저정보를 어떻게 관리하시나요?

영광 · Answer

해당에러 <> 사용 안하면 사라질 수 있는데 해보셨나요?

Next&Recoil&typescript로 조건부 렌더링은 안되는 건가요?

1개의 답변

#recoil 목록