App 라우터 쿼리스트링

App 라우터 방식에서 쿼리 스트링을 불러오는 방식이 강의를 보니까 두 가지로 확인 됩니다.

두 가지의 차이점이 무엇 인지와 두 개를 병행하면서 사용해도 상관없는지 확인 부탁 드립니다.

1. useSearchParams( ) 사용

export default function Searchbar() {
  const router = useRouter();
  const searchParams = useSearchParams();
  //searchParams 훅은 쿼리스트링을 가져오는 것인데 빌드타임에는
  //쿼리스트링을 가져올 수 없으므로 빌드타임에서 오류가 발생한다.
  //그래서 해당 페이지는 사전렌더링에서 제외시켜야 한다.

  const [search, setSearch] = useState("");

  const q = searchParams.get("q");

2. searchParams를 함수에 인자로 넣은 경우

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<{
    q?: string;
  }>;
}) {
  const { q } = await searchParams;

안녕하세요, 인프런 AI 인턴입니다. Full Stack 개발자님.

Next.js에서 쿼리 스트링을 가져오는 두 가지 방식에 대한 차이점과 함께 병행해서 사용할 수 있는지에 대한 질문을 주셨군요. 각각의 방법과 유용한 사례를 설명드리겠습니다.

1. `useSearchParams` 사용

useSearchParams는 클라이언트 사이드에서 사용하는 React Hook으로, 쿼리 스트링을 동적으로 가져오는 기능을 제공합니다. 이 Hook은 페이지가 클라이언트 사이드로 렌더링된다는 가정을 하기 때문에, 빌드 타임에는 접근할 수 없습니다. 따라서, 서버 사이드 렌더링(SSR)이나 사전 렌더링에서 사용하게 되면 오류가 발생할 수 있습니다.

2. `searchParams`를 함수 인자로 받는 경우

이 방법은 서버 컴포넌트에서 사용하는 패턴으로, Next.js의 app 폴더 구조에서 getServerSideProps와 유사한 역할을 합니다. 이 방식은 searchParams가 비동기적으로 제공되기 때문에 요청이 완료되면 해당 데이터가 빌드 타임이나 요청 시 준비되어 있어야 합니다. 따라서, 서버 사이드에서 좀 더 안전한 데이터를 처리할 수 있습니다.

두 방식의 병행 사용 가능 여부

서버 사이드 컴포넌트를 사용하는 경우: searchParams를 함수 인자로 받는 방법이 적합합니다. 이는 서버 사이드에서 필요한 데이터를 즉시 가져오고, 비동기 처리가 가능하기 때문입니다.
클라이언트 사이드 상태 관리에 포커스하는 경우: useSearchParams를 사용할 수 있습니다. 특히 클라이언트 측 상태가 즉각적으로 반영되어야 하거나, URL 변화를 즉시 처리해야 할 때 적합합니다.

두 방법 모두 상황에 맞게 사용 가능하지만, 어느 경우에 클라이언트 사이드냐 서버 사이드냐에 따라 선택적으로 사용되는 것이 좋습니다. 사전 렌더링이 중요한 페이지에서는 서버 사이드 접근을, 클라이언트 상호작용이 필요한 페이지에서는 클라이언트 사이드 접근을 권장합니다.

인프런 커뮤니티 질문&답변

1. `useSearchParams` 사용

2. `searchParams`를 함수 인자로 받는 경우

두 방식의 병행 사용 가능 여부

관련 질문 및 레퍼런스

인프런 커뮤니티 질문&답변