서버사이드에서 query param 접근하기

useSeachParams는 클라이언트사이드 훅이다보니 ssr시 suspense로 감싸서 csr하지 않으면 build단계에서 워닝을 뱉더라.

구글 애드센스에서 csr되는걸 못 잡는다고 들어서 최대한 ssr을 늘리려다 보니 서버페치를 하기 위해 query param의 접근이 필요했다.

아래처럼 props로 searchParams를 받을 수 있다. 객체로 전달되지 않아 new 연산자로 URLSearchParams객체로 만들어줬다.

export default function SummonerPage({
  searchParams,
}: {
  searchParams: URLSearchParams;
}) {
  const params = new URLSearchParams(searchParams);
  const id = params.get("id") || "";
  const tag = params.get("tag") || "";
}

 

이러면 useSearchParams훅 없이도 dynamic rendering시 서버사이드에서 query param에 접근 가능하다.

static rendering 된 페이지에서 위 방식을 사용하면 빈 값이 나오더라 신기방기

다만 page.js가 아닌 layout.js에서는 사용 불가능하다. 라우터에 의해 변경되는 부분이 아니라 그렇단다.