저번에 작성했던 prefetch를 드디어 성공하게 되어 간단히 정리해서 작성하겠습니다.

prefetch

prefetch를 작성하는 것은 react-query의 queryClient에 미리 데이터를 fetch하는 로직을 작성하는 것 입니다.

import React from "react";

import { HydrationBoundary, dehydrate } from "@tanstack/react-query";

import cacheQueryClient from "@/util/cacheQueryClient";
import { QUERY_KEY } from "@/util/query_key";
import serverUserCheck from "@/util/serverUserCheck";
import { createClient } from "@/util/supabase/server";

import type { User } from "@supabase/supabase-js";

const Prefetch = async ({ children }: { children: React.ReactNode }) => {
    const queryClient = cacheQueryClient();
    const supabase = createClient();
    await queryClient.prefetchQuery<User | null>({
        queryKey: [QUERY_KEY.myPageUser],
        queryFn: () => serverUserCheck(supabase),
    });

    return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
};

export default Prefetch;

위의 코드는 supabase의 로그인한 유저정보를 가져오는 것을 prefetch로 작성한 것입니다.

처음으로 prefetch를 작성하면서 기억나는 2가지 정도의 트러블 슈팅이있었습니다.

supabase

원인

기존의 supabase는 CSR로 사용하여 prefetch로 적용해도 데이터를 가져오지 못 하는 문제가 있었습니다.

해결

위의 문제는 로그인로직을 SSR로 변경하여 쿠키 및 서버에서 데이터를 fetch할 수 있게 만들었습니다.

async/await

원인

간단한 문제인 async/await를 사용하지 않은 것 입니다. 처음에 prefetch를 작성했을 때 위의로직 처럼 async/await를 사용하지 않고 빠진 상태로 작성하였습니다.
그래서 제대로 작동을 하지 않고, 생각지도 못한 에러가 계속 발생하여 좀 애를 먹었던거 같습니다.

해결

async/await를 사용하여 해결하였고 사용한 이후로는 생각하지 못한 에러가 발생하지 않게 되서 해결되었습니다.

소감

위의 문제들을 겪으면서 생각지도 못한 에러가 발생하였지만 어떤 이유인지 찾는 것이 생각보다 오래걸려 prefetch를 작성하는 것이 조금 오래걸렸던거 같습니다.
그래도 어떻게 적용되어 다행이다 생각이 되고 supabase를 처음 작성할 때 부터 SSR로 작성하는 것도 생각 해봐야 될꺼 같습니다.
CSR로 작성하였을 때 prefetch같은 서버를 사용하게 되는 것을 작성하게 될경우 SSR로 다 변경하는 과정을 거치게 되서 생각보다 귀찮은 작업들이 많아지는 거 같습니다.