[개념정리] Next.js에서 searchParams를 사용하는 이유 (useSearchParams와의 차이)

문제

• useSearchParams()는 클라이언트 훅이라 SSR 단계에서는 실행되지 않음
• 서버는 브라우저의 URL을 직접 알 수 없기 때문에 검색어(query)를 모르면 API 요청 자체를 할 수 없음
• 따라서 검색 결과를 SSR로 미리 렌더링할 수 없고, 초기 진입 시 화면이 잠깐 비거나 로딩 상태로 보이게 됨
• SEO(검색엔진 최적화) 측면에서도 불리함

해결 - searchParams로 서버에서 쿼리 받기

• Next.js는 page.tsx(Server Component)에 searchParams를 props로 전달해줌
• 이걸 활용하면 서버에서도 쿼리값을 알고, 그걸로 API를 호출해 SSR 시점에 데이터를 미리 패칭할 수 있음

import SearchClient from "@/components/search/SearchClient";

type SearchParams = { query?: string };

export default async function Page({
  searchParams,
}: {
  searchParams: Promise<SearchParams>;
}) {
  const { query = "" } = await searchParams;
  return <SearchClient initialQuery={query} />;
}

요약

• searchParams는 서버에서 URL 쿼리를 받아 SSR 단계에서 API를 미리 호출할 수 있게 해줌
• useSearchParams는 브라우저에서만 실행되어 실시간 쿼리 변경을 감지할 수 있음
• 따라서 검색 결과 페이지처럼 “서버에서도 쿼리(keyword)를 알아야 API 호출이 필요한 경우”엔 반드시 searchParams를 사용해야 함

결론

• 서버에서 쿼리(keyword)를 알아야 API 요청 가능 → SSR 렌더링 가능
• SSR로 초기 데이터 렌더링 → SEO + 초기 로딩 속도 개선
• CSR로 이후 상호작용 처리 → 부드러운 사용자 경험 유지
• 즉, searchParams는 서버가 클라이언트의 URL 정보를 알 수 있는 유일한 통로 / SSR과 CSR을 결합한 하이브리드 렌더링의 핵심 역할을 함