blog/2021/05/06/using-recoil-in-nextjs/

[utterances-bot]

next.js에서 recoil 사용하기 | Parkgang Dev Log

Intro 이번 글에서는 next.js에서 recoil를 사용하는 방법을 가이드 하도록 하겠습니다. 원래는 redux를 사용했었지만 기본적으로 필요로하는 코드의 양이 많아 내가 원하는 상태를 빠르게 저장하고 빼서 쓰고 싶었는데 개발하면서 딜레이가 생기는 경험이 있었습니다. 물론 지금은 redux too

https://parkgang.github.io/next.js/using-recoil-in-next.js/

[wj2kim]

안녕하세요 질문이 있습니다.
index page 에서 변경된 상태가 어떻게 post page 에서 지속가능한지 궁금합니다.
저는 안되더군요.. 전역상태가 계속 초기화 됩니다.
혹시 어떤 다른점이 있을까해서 댓글남깁니다!

[parkgang]

@wj2kim 안녕하세요! 답변이 늦었네요 혹시 _app.js 부분에 <RecoilRoot> wrapper는 하신건가요?

다른 page라도 전역 상태가 게속 유지되는 이유는 next.js의 첫 페이지 로드는 SSG 혹은 SSR으로 Server Side에서 가공되어 Response 되지만 그 이후 부터는 CSR으로 동작하기 때문입니다.

때문에 다른 page으로 이동하는게 사실 같은 html에서 이동하는 것이기 때문에 전역상태가 게속 유지되는 것입니다.

이에 대해서 추가적으로 next.js의 SSG 제대로 이해하고 사용하기 글을 작성해 놓았는데 이해가 안되신다면 한번 읽어보시면 좋을 꺼 같습니다. 감사합니다.

[yanggwangseong]

@parkgang 님 안녕하세요. 코드대로 페이지 이동 버튼 눌렸을때 잘되는걸 확인 했으나, 새로 고침 할때 상태값이 다 날라가버리는데 SSR,SSG라 그런것 같은데 해결방법이 없을까요?

[parkgang]

@yanggwangseong 안녕하세요. 😀 새로고침할 때 상태 값이 날아가는 것은 당연한 현상입니다. 왜냐면 상태 값은 Client Side 에서만 유효하기 때문입니다.

좀 더 기술적으로 설명하자면 JS 의 메모리 에서만 유효하게 남아있기 때문에 새로고침을 하면 접속되어 있는 페이지가 리로드 되면서 메모리 값이 초기화되는 것입니다.

이는 SSR , SSG 와 관련이 없습니다.

새로고침을 하더라도 남아있도록 하기 위해서는 Server 혹은 localstorage 에 값을 저장하는 방법 등이 있습니다.