[NextJS] 검색 리스트 ssr(정적 렌더링) 구현

선영·2023년 10월 16일

next13 study

📚 Library

목록 보기

13/14

🧨 문제

검색 리스트 컴포넌트가 ssr이 되어야 할 것이 전적으로 csr이 되고 있다. 초기 렌더링시엔 ssr, 후엔 csr이 되게 해야한다.

🤔 시도

시도1) ssr렌더링이 필요한 컴포넌트만 layout.tsx로 옮겨본다.

pre-rendering되므로 깜빡거림을 해결할 수 있었다. 그러나 레이아웃 컴포넌트는 모든 경로에 적용되면서 상태를 유지하고, 다시 렌더링되지 않으므로 검색어를 입력하는 등 상태업데이트가 일어날때 다시 검색 리스트가 다시 렌더링되지 않는 문제가 발생했다.

시도2 ✅)

ssr렌더링이 필요한 서버 컴포넌트지만 상태업데이트가 필요한 컴포넌트들은 page.tsx에서 구성하고,

// app/search/page.tsx

... 모듈 가져오기 로직 => 생략

export default async function SearchPage({
    _,
    searchParams,
}: {
    _;
    searchParams: {[key: string]: string };
}) {
    const accessToken = getAccessToken();
    const {productsList, totalSize} = await makeProductsListPerType(
        searchParams,
        accessToken,
    );

    return (
        <>
            <SearchHeader totalSize={totalSize} />
            <SearchList productList={productsList} />
        </>
    );
}

리렌더링될 필요가 없는 컴포넌트들은 layout.tsx 에 구성을 해주었다.

// app/search/layout.tsx

... 모듈 가져오기 로직 => 생략

export default function SearchLayout({children}: {children: ReactNode}) {
    return (
        <>
            <SearchForm />
            <SearchFilters />
            {children}
        </>
    );
}

ssr렌더링을 위해 searchParams값을 활용해야했는데, 아무 값도 들어오지 않았다. 그래서 아래와 같은 형식으로 uri가 완성될 수 있도록 useChangeInputField 로직을 아래와 같이 수정해주었다. 그 외 utils.ts 파일에 쿼리스트링을 만들기 위한 searchParamList를 만드는 로직과 쿼리스트링을 가지고 데이터 요청을 하여 데이터를 받아오는 로직을 각각 분리해주었다. (추후 utils함수에서도 이 로직들을 분리해주는 것이 좋겠다.)

// hooks/useChangeInputField.ts

// ... 가져오기 모듈 생략

export default function useChangeInputField() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const searchTerm = searchParams.get('searchTerm');
  
  	// ... 그 외 훅 생략

    const handleConfirmSearch = (event: any) => {
        if ((event.type === 'keyup' && event.keyCode === 13) || event.type === 'click') {
           		// ... 생략

                // 라우터 푸시
                const searchParamList = makeSearchParamList({
                    searchTerm,
                });
                const queryString = [...searchParamList, 'nowPage=1'].join('&');
                router.push('search' + '?' + queryString);
        }
    };

    return {
        handleConfirmSearch,
    };
}