interface ResultPageProps { SNUM: number; } const ResultPage = ({ SNUM }: ResultPageProps) => { // 설문 정보 불러오기 const resultProjectQuery = useResultProjectQuery(SNUM); // 설문 진행 현황 불러오기 const resultProgressQuery = useProgressStatusQuery(SNUM); const [chartInfo, setChartInfo] = useState([]); const [selectedQuestionId, setSelectedQuestionId] = useState(''); useEffect(() => { setChartInfo(chartData); }, []); if (resultProjectQuery.isLoading && resultProgressQuery.isLoading) return null; const handleClickSelectQuestion = (questionId: string) => { setSelectedQuestionId(questionId); }; return ( {chartInfo.map((chartInfo) => ( ))} ); }; export const getServerSideProps: GetServerSideProps = async (context) => { try { const { params } = context; const snum = params?.snum as string; const snumParseNumber = +snum; // 설문 정보 프리 페칭 await queryClient.prefetchQuery({ queryKey: [queryKey.result.projectInfo, snumParseNumber], queryFn: () => getResultQuestionDataApi(snumParseNumber), }); // 설문 진행 현황 프리 페칭 await queryClient.prefetchQuery({ queryKey: [queryKey.result.statusInfo, snumParseNumber], queryFn: () => getProgressStatusApi(snumParseNumber), }); return { props: { SNUM: +snum, }, }; } catch (e) { return { props: {}, }; } }; export default ResultPage;

Hydration