Next.js ssr 새로고침시 state 초기화

Question

보시기 편하게 연관없는 코드는 좀 삭제하였습니다.Next.js 작업중 getServerSideProps를 사용해 아래와 같이 wishlist를 패칭해왔습니다.interface LensByPeriodPageProps { wishlist: IBestLensItem[]; } function LensByPeriodPage({ wishlist, }: LensByPeriodPageProps) { return ( <> ); } export async function getServerSideProps(context: GetServerSidePropsContext) { const wishlist = await lensApi.getWishListForPeriodPage(); return { props: { wishlist, }, }; } export default LensByPeriodPage;그리고 아래 찜하기 컴포넌트에 부모 컴포넌트에서 받아온 wishlist state를 내려주었습니다.interface HeartItemProps { lensId: number; wishlist: IBestLensItem[]; } function HeartItem({ lensId, wishlist }: HeartItemProps) { const { data: session, status } = useSession(); const router = useRouter(); const [state, setState] = useState(false); useEffect(() => { (async () => { if (session?.user?.email && wishlist.length > 0) { if (wishlist.some((item) => item.id === lensId)) { setState(true); } else { setState(false); } } else { setState(false); } })(); }, [setState]); async function clickHeart() { if (status === "unauthenticated") { router.replace("/auth/signin"); } else { //되어있다면 if (status === "authenticated") { const wishlistApi = new WishlistApi(); const userId = session.user?.email; const userIdStr = String(userId); if (session.user?.email) { const result = await wishlistApi.addLike(userIdStr, lensId); setState(result); } } } } return ( {state ? ( ) : ( )} ); } export default HeartItem;하지만 새로고침을 할 경우 client에서 호출하는 데이터가 아니어서 그런건지 wishlist는 초기화되고state의 값이 true에서 false가 되어 찜하기가 풀리는 현상이 생깁니다. 새로고침 없이 페이지 이동만 하고 돌아오면 다시 해제됐던 찜하기가 잘 되어있는데 이런경우 client와 server를 동기화시킬 수 있는 방법이 redux, localstorage뿐인지 다른 간단한 방법이 더 있는지 궁금합니다.

캐티 · Answer

원래는 셋 상태가 데이터베이스에 들어가고 페이지를 처음부터 새로 불러오면 데이터베이스에서 셋 상태를 꺼내서 반영하는 부분이 들어가는데요.서버와 클라이언트의 값을 동기화 하려고 한다면 클라이언트가 렌더링을 하기 전에 서버 상태 값을 미리 출력해주면 되지 않겠나요.

kenu,전독시 · Answer

Redux와 localStorage는 Next.js 애플리케이션에서 상태 동기화 및 유지에 대한 일반적인 해결책이지만, 유일한 옵션은 아닙니다. 특정 요구 사항에 따라 서버 사이드 렌더링, 클라이언트 사이드 상태 관리, 또는 둘 다를 사용하는 하이브리드 접근 방식을 선택할 수 있습니다. 또한, Redux와 redux-persist을 통합하면 상태 유지 및 재구성을 단순화할 수 있으므로, 페이지 새로고침 시 상태를 유지하는 데 도움이 될 수 있습니다.클라이언트 사이드 상태 관리: 페이지 새로고침 시 상태가 유지되어야 하지만 SEO에 중요하지 않은 상태의 경우, 클라이언트 사이드에서 완전히 관리할 수 있습니다. 이는 React의 상태 관리 기능(예: useState, useReducer) 또는 클라이언트 사이드 스토리지 메커니즘인 localStorage를 사용하여 수행할 수 있습니다. 그러나 이 접근 방식은 서버와 클라이언트 간의 상태 동기화를 제공하지 않으므로, 이 경우에는 필요할 수 있습니다 1.localStorage를 사용한 상태 유지: localStorage를 사용하여 페이지 새로고침 시 상태를 유지할 수 있습니다. 이 방법은 상태가 변경될 때마다 상태를 localStorage에 저장하고 페이지가 로드될 때 상태를 localStorage에서 재구성하는 것을 포함합니다. 이 방법은 간단하지만 상태 유지 및 재구성 로직을 수동으로 처리해야 합니다 1.Redux와 redux-persist 사용: Redux를 사용하는 애플리케이션의 경우, redux-persist와의 통합을 통해 상태 유지 및 재구성을 자동으로 처리할 수 있습니다. redux-persist는 Redux 스토어를 localStorage(또는 다른 스토리지 메커니즘)에 저장하고 애플리케이션이 로드될 때 재구성하는 기능을 제공합니다. 이 접근 방식은 더 자동화되어 있으며 Redux와 잘 통합되지만, 여전히 클라이언트 사이드 스토리지에 의존합니다 1.getInitialProps를 사용한 상태 재구성: 다른 접근 방식은 Next.js 페이지에서 getInitialProps를 사용하는 것입니다. 이 함수는 서버와 클라이언트 모두에서 실행되므로, 데이터를 가져와 페이지에 props로 전달할 수 있습니다. 이 함수를 사용하여 애플리케이션의 초기 상태를 가져와 Redux 스토어에 전달할 수 있습니다. 그러나 이 접근 방식은 모든 사용 사례에 적합하지 않을 수 있으며, 빈번히 변경되거나 사용자 특정인 데이터를 가져와야 하는 경우에는 적합하지 않을 수 있습니다 1.하이브리드 접근 방식: 하이브리드 접근 방식은 초기 페이지 로드에 서버 사이드 렌더링을 사용하고 후속 상태 변경에는 클라이언트 사이드 상태 관리를 사용하는 것을 포함합니다. 이 접근 방식은 SEO 이점을 활용하면서도 반응형 사용자 경험을 제공할 수 있습니다. getServerSideProps를 사용하여 초기 렌더링을 수행하고, 후속 상태 변경에는 클라이언트 사이드 상태 관리(예: React 상태, Redux)를 사용할 수 있습니다 1.from: https://www.phind.com/search?cache=c3mxuhzb1lczsz9js0uanmcd

Next.js ssr 새로고침시 state 초기화

2개의 답변

기술 목록