빠른 페이지 전환 시 Next.js 페이지에서 잘못된 데이터 렌더링 문제

Question

안녕하세요 . Next.js 페이지에서 데이터 렌더링에 관한 이상한 문제를 겪고 있습니다. 쿼리 매개변수 cid에 기반하여 고객 정보를 표시하는 Next.js 페이지가 있습니다. 이 페이지는 Axios를 사용하여 API에서 고객 데이터 및 관련 그룹 데이터를 가져와 이를 페이지에 렌더링합니다.문제는 다른 고객 ID (cid=1, cid=2 등) 간을 빠르게 전환할 때 발생합니다. 때때로 페이지를 빠르게 전환할 때, 페이지가 올바른 cid의 데이터 대신 잘못된 cid의 데이터를 렌더링합니다. 예를 들어, cid=2에서 cid=1로 이동할 때, 페이지가 cid=1 대신 cid=2의 데이터를 렌더링됩니다. 뭐가 잘못된건지 잘 모르겠습니다. 혹시 해당 이슈를 겪어보거나 해결해보신분 있을까요?import { config } from '@/lib/headerConfig'; import axios from 'axios'; import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; // auth import { getSession } from 'next-auth/react'; // components const CustomersLayout = dynamic(() => import('@/components/customer/layout/Index')); const Spinner = dynamic(() => import('@/components/global/Spinner')); // zustand import { useCustomersStore } from '@/middleware/zustand/customers'; const CustomerInformationPage = (props) => { const router = useRouter(); const { customers, setCustomers, setPreviousPage } = useCustomersStore(); const [customer, setCustomer] = useState({}); const [groups, setGroups] = useState([]); useEffect(() => { setCustomers(props.customers); setPreviousPage(props.previousPage); }, [props.customers, props.previousPage]); useEffect(() => { const fetchData = async () => { try { if (router.query.cid) { const customerData = await fetchCustomer(router.query.cid); const groupsData = await fetchGroups(router.query.cid); setCustomer(customerData); setGroups(groupsData); } } catch (error) { console.error('Error fetching customer or groups:', error); } }; fetchData(); }, [router.query.cid]); const fetchCustomer = async (cid) => { const controller = new AbortController(); const { signal } = controller; try { const res = await axios.get(`/api/customer?cid=${cid}`, { signal, ...config }); return res.data[0]; } catch (err) { console.error(err); throw err; } finally { controller.abort(); } }; const fetchGroups = async (cid) => { const controller = new AbortController(); const { signal } = controller; try { const res = await axios.get(`/api/customer/groups?cid=${cid}`, { signal, ...config }); return res.data; } catch (error) { console.error(error); throw error; } finally { controller.abort(); } }; if (customers.length < 1) { return ; } return ( <> Customer Information {console.log({ customerID: customer.CustomerID, routerQueryCid: router.query.cid, })} <>

{customer && customer.CompanyName}
{groups.length > 0 && groups[0].ProjectGroupName}

); }; export const getServerSideProps = async (ctx) => { const session = await getSession(ctx); const { company_name } = ctx.query; const headers = ctx.req.headers; try { if (session && session.user.Permissions['Customer-Customer Information'].PermissionLevel > 1) { const customers = ( await axios.get(`${process.env.NEXTAUTH_URL}/api/customers`, { headers: { Cookie: headers.cookie, authorization: process.env.HEADER, }, }) ).data; const previousPage = ctx.req.headers.referer || ''; return { props: { customers, previousPage, }, }; } else if (session && session.user.Permissions['Customer-Customer Information'].PermissionLevel < 2) { return { redirect: { destination: `/${company_name}/error/403`, permanent: false, }, }; } else { return { redirect: { destination: `/login?next=${ctx.req.url}`, permanent: false, }, }; } } catch { return { redirect: { destination: `/${company_name}/error/403`, permanent: false, }, }; } }; export default CustomerInformationPage;

Clickin · Answer

Nextjs는 기본적으로 모든 페이지에 다 캐싱이 적용된거로 알고있는데 캐싱 전략을 바꿔보세요자세한 설명은 다음 블로그 글 참조하시면 되겠습니다https://velog.io/@nab5m/Next-js%EC%9D%98-%EC%BA%90%EC%8B%B1

카니 · Answer

아직 못 겪어봤는데.. 왠지 걱정이 되는건 뭔지.. ㅜ.ㅜ;궁금해서 댓글 달아봅니다..

Sang Hyun Han · Answer

제가 abort Controller를 잘못쓰고 있었네요. https://stackoverflow.com/questions/78208940/issue-with-next-js-page-rendering-wrong-data-when-navigating-quickly-between-pag여기에 채택된 답변 보시면 될것같습니다!

빠른 페이지 전환 시 Next.js 페이지에서 잘못된 데이터 렌더링 문제

3개의 답변

Q&A 목록