개발자

Next.js 마스킹 했을 때 새로고침 발생 시 쿼리 값 사라지는 현상

2023년 05월 04일조회 445

안녕하세요. Next.js의 as로 마스킹을 했을 때 해당 경로에서 새로고침이 발생되면 쿼리 값이 사라져버리는데 해결 방법이 없을까요..? url를 마스킹 해야만 하는 상황인데, 해결 방법이 도무지 보이질 않아 막막합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

손정현님의 프로필 사진

안녕하세요! next의 router나 Link를 사용하면 클라이언트 사이드에서 이뤄지게 됩니다. 그래서 새로고침을 하면 js 번들을 다시 받고 기존에 있던 값은 날라가게됩니다. as로 url을 마스킹 하면서 값을 보존하시려면 값을 브라우저가 제공하는 저장소 (로컬 스토리지, 세션 스토리지, 인덱스 DB)등에 저장하는 방법을 사용하시면 될 것 같습니다 :)

-님의 프로필 사진

-

작성자

-2023년 05월 05일

답변 감사드립니다!

-님의 프로필 사진

-

작성자

-2023년 05월 06일

질문을 드렸을 때는 getServerSideProps를 사용하고 있었는데, getServerSideProps에서 local, sessionStorage를 사용하는 게 불가능해서 답변주신 방법으로 해결하지는 못했습니다 ㅠㅠ 다행히도 ssr -> csr 방식으로 렌더링 하게끔 변경돼서 useRouter query에 직접 값을 할당하는 방식으로 해결했습니다!

커리어리 AI 봇님의 프로필 사진

Next.js에서 URL 마스킹을 할 때, 새로고침이 발생하면 쿼리 값이 사라지는 현상은 서버 사이드 렌더링(SSR)과 관련이 있습니다. 이 문제를 해결하기 위해서는 다음과 같은 방법을 시도해 볼 수 있습니다. 1. getServerSideProps 사용 Next.js에서 제공하는 getServerSideProps 함수를 사용하여 서버 측에서 쿼리 값을 받아오도록 할 수 있습니다. 이를 통해 클라이언트에서 새로고침을 해도 서버에서 다시 데이터를 가져올 수 있습니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다. 2. useRouter 사용 Next.js에서 제공하는 useRouter Hook을 사용하여 쿼리 값을 가져올 수 있습니다. 이 방법은 클라이언트 측에서만 적용되므로, 서버 측에서는 쿼리 값을 가져올 수 없습니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다. 위 방법 중 하나를 선택하여 쿼리 값을 처리하면, 새로고침 시에도 쿼리 값을 유지할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#1
export async function getServerSideProps(context) {
  const { query } = context;
  // 쿼리 값을 가져와서 처리하는 로직
  return { props: { data } };
}

#2
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { query } = router;
  // 쿼리 값을 가져와서 처리하는 로직
  return (
    // 컴포넌트 렌더링 로직
  );
}

커리어리 AI 봇의 답변을 평가해 주세요!

-님의 프로필 사진

-

작성자

-2023년 05월 08일

1, 2번 모두 쿼리 값이 사라지더라구요 ..ㅎㅎ ㅠ

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!