(next.js) app 라우터에서 SSR로 쿼리 파라미터 받기
2023-09-19
Table of contents
쿼리 파라미터 받아오고 싶은데 useSearchParams 없이 어떻게 받아오지..?
Next.js 13버전에서는 서버 컴포넌트와 클라이언트 컴포넌트라는 개념이 있습니다.
서버 컴포넌트를 사용하면 Next에서 알아서 SSR을 해줍니다.
그러나 서버 컴포넌트를 사용하게 되면 일반 리액트에서 쓰던 useEffect나 useState 등 우리에게 엄청난 힘을 주는 훅들을 사용할 수 없습니다.
따라서 next/nevigation에 있는 useSearchParams도 사용할 수 없구요!!!
그러면 SSR은 해주고 싶고 쿼리 파라미터도 받아 오고 싶고 어떻게 해야 할까요?
서버 컴포넌트의 기본적인 props를 사용하면 된다!!
서버 컴포넌트의 props에 기본적으로 들어간 몇 개의 속성들이 있습니다.
그중에 searchParams라는 속성이 존재합니다!!! 이 속성을 이용하면 당연히 받아올 수 있겠죠?
그럼 이제 TypeScript 기준으로 코드를 까봅시다.
먼저 타입 지정부터 해봅시다.
interface PageProps {
params: {},
searchParams: { [key: string]: string | undefined}
}페이지 컴포넌트 props의 타입은 이렇게 지정해주면 됩니다.
근데 여기서 한 가지 주의할 점은 저 searchParams의 value가 단일 값이 될 수도 있지만 배열같은 것이 들어올 수도 있습니다.
그런 건 코드를 어떻게 짜냐에 따라 달라지기 때문에 각자의 상황에 맞게 수정해주면 됩니다.
다음으로 props를 받아오기만 하면 끝입니다.
export default async function Snippets(props: PageProps) {
const filteredSnippetsList = await filteredSnippets(props.searchParams.key);
return (
{filteredSnippetsList.map((post) => <div>{post.title}<div>)}</div>
);위 코드는 쿼리 파라미터 값에 따라 데이터가 동적으로 변하는 코드입니다. 참 쉽죠?
