[ Next.js 13 / page router ] getServerSideProps 통신데이터 SSR에 적용시키기

getServerSideProps

주요 기능은 특정 페이지의 index에서 해당 컴포넌트가 렌더링 되기 전에

Pre-Rendering(SSR)에 필요한 데이터를 해당 컴포넌트의 props를 통해서

데이터를 전달해 줄 수 있는 기능이다.

 

언제 사용하면 좋을까?

많은 경우가 있겠지만 가장 적합하다고 생각하는 상황은 응답받은 데이터를

html에 모두 포함된 상태로 seo최적화되어 렌더링되어야하고 동적으로 데이터가

자주 변경될 여지가 있고 반드시 최신화된 데이터를 보여주어야 하는 경우이다.

 

예시 소스코드

// pages/video/index.tsx

export interface VideoList {
    id: string;
    title: string;
    publishedAt: string;
    thumbnail: string;
    channelId: string;
    channelTitle: string;
    channelThumbnail: string;
    free: boolean;
    category: string;
}

export const getServerSideProps: GetServerSideProps<{ data: VideoList[] }> = async () => {
    const data: VideoList[] = [];

    const res = await getFirebaseData(); // 파이어베이스 데이터로드
    for (const row of res.data) {
        const youtube: any = await getYoutubeVideoData(row.id); // argument = videoId in FB
        const channelData: any = await getYoutubeChannelData(youtube.snippet.channelId);
        const newData = {
            id: youtube.id,
            title: youtube.snippet.title,
            publishedAt: youtube.snippet.publishedAt,
            thumbnail: youtube.snippet.thumbnails?.medium.url, // data = youtube "video" api
            channelId: youtube.snippet.channelId,
            channelTitle: youtube.snippet.channelTitle,
            channelThumbnail: channelData?.snippet.thumbnails.default?.url, // channelData = youtube "channel" api
            free: row.free, // from firebase
            category: row.category, // from firebase
        }
        data.push(newData);
    }

    return { props: { data } }
}

export default function Home({ data } : InferGetServerSidePropsType<typeof getServerSideProps>) {
    const element = useRef<CustomScroller>(null);

    return (
        <div className='relative w-full h-full overflow-hidden box-border bg-primary-dark-400 '>
            <header className='w-[375px] max-mobile-md:w-full fixed max-mobile-md:top-0 bg-primary-dark-400 z-10'>
                <NavBar />
                <CategoriesList />
            </header>
            <main className='absolute bottom-0 w-full h-[calc(100%-135px)] overflow-hidden'>
                <div className="relative w-full h-full">
                    <CustomScroller ref={element} universal={true}>
                        <MediaList data={data}/>
                        <button
                            type='button'
                            className="fixed bottom-16px right-16px"
                            onClick={() => {
                                if (!element.current) return
                                element.current.scrollTop();
                            }}
                        >
                            <ScrollTopIcon/>
                        </button>
                    </CustomScroller>
                </div>
            </main>
        </div>
    )
}

직접 진행했던 프로젝트에서 사용했던 코드이다. 통신해야 할 부분을 getServerSideProps에서 통신을 모두 마친 후에 메인 컴포넌트인 Home컴포넌트의 props로 데이터를 보내주었고 MediaList컴포넌트의 props로 통신완료된 데이터를 전달해주고있다.

 

Github: https://github.com/zeriong/side-project

 

유의할 점

getServerSideProps를 사용할땐 반드시 해당페이지의 메인 컴포넌트 파일(index.tsx)에서만 사용가능하다.

 

 

마치며...

처음에 ssr기능이 그저 next.js프레임워크를 사용하기만하면 되는 줄 알았는데 전혀 아니였다. 항상 새로운 프레임워크를 사용할땐 공식페이지에서 Document를 꼭 정독하고 프레임워크가 지향하는 개발의 자연스러운 방향과 기능들에 대해 인지하고 적재적소에 사용할 수 있도록 준비해두는 것이 개발자로서 더 올바른 자세라는 것을 깨달았다.