Vercel의 React Best Practices 톺아보기 [1]

// someCondition이 false여도 getFlag()는 이미 실행된 뒤
const someFlag = await getFlag();
 
if (someFlag && someCondition) {
  // ...
}

// someCondition이 false면 getFlag() 호출 자체를 생략
if (someCondition) {
  const someFlag = await getFlag();
  if (someFlag) {
    // ...
  }
}

async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId);
 
  if (skipProcessing) {
    // 바로 return 하지만 이미 userData를 기다린 뒤임
    return { skipped: true };
  }
 
  // userData를 쓰는 건 이 분기뿐
  return processUserData(userData);
}

async function handleRequest(userId: string, skipProcessing: boolean) {
  if (skipProcessing) {
    // 기다리지 않고 즉시 반환
    return { skipped: true };
  }
 
  // 필요할 때만 fetch
  const userData = await fetchUserData(userId);
  return processUserData(userData);
}

// 잘못됨: 항상 권한을 가져옴
async function updateResource(resourceId: string, userId: string) {
  const permissions = await fetchPermissions(userId);
  const resource = await getResource(resourceId);
 
  if (!resource) {
    return { error: "Not found" };
  }
 
  if (!permissions.canEdit) {
    return { error: "Forbidden" };
  }
 
  return await updateResourceData(resource, permissions);
}
 
// 올바름: 필요할 때만 가져옴
async function updateResource(resourceId: string, userId: string) {
  const resource = await getResource(resourceId);
 
  if (!resource) {
    return { error: "Not found" };
  }
 
  const permissions = await fetchPermissions(userId);
 
  if (!permissions.canEdit) {
    return { error: "Forbidden" };
  }
 
  return await updateResourceData(resource, permissions);
}

// user,config는 병렬이지만 다음 줄의 profile은 첫 Promise.all이 끝난 뒤에만 시작됨
const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
const profile = await fetchProfile(user.id); // profile은 user만 필요 (config 완료를 기다릴 필요 없음)

import { all } from "better-all";
 
// user가 준비되면 profile 시작 → config fetch와 시간이 겹칠 수 있음
const { user, config, profile } = await all({
  async user() {
    return fetchUser();
  },
  async config() {
    return fetchConfig();
  },
  async profile() {
    return fetchProfile((await this.$.user).id); // user에만 의존
  },
});

const userPromise = fetchUser();
const profilePromise = userPromise.then((user) => fetchProfile(user.id)); // user 이후에만 profile 체인
 
const [user, config, profile] = await Promise.all([
  userPromise,
  fetchConfig(), // user,profile 흐름과 동시에 실행
  profilePromise,
]);

export async function GET(request: Request) {
  const session = await auth();
  const config = await fetchConfig(); // session과 무관한데도 auth 끝난 뒤에야 config 요청이 시작됨
  const data = await fetchData(session.user.id); // data는 session만 필요한데 config까지 기다린 뒤에야 시작
  return Response.json({ data, config });
}

export async function GET(request: Request) {
  // await 없이 호출만 → 네트워크/DB 작업은 즉시 시작 (병렬로 겹칠 준비)
  const sessionPromise = auth();
  const configPromise = fetchConfig();
  const session = await sessionPromise; // session 값만 먼저 확보 (data에 user.id 필요)
  // config는 이미 진행 중인 configPromise + 방금 시작하는 fetchData를 동시에 기다림
  const [config, data] = await Promise.all([
    configPromise,
    fetchData(session.user.id),
  ]);
  return Response.json({ data, config });
}

// 각 줄이 끝나야 다음 fetch가 시작됨 → 총 대기 ≈ user + posts + comments
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// 세 호출을 연달아 시작하고, 끝나는 시점만 한 번에 기다림 → 총 대기 ≈ 가장 느린 하나에 가깝게
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

async function Page() {
  const data = await fetchData(); // 페이지 전체가 여기서 대기
 
  return (
    <div>
      <div>Sidebar</div>
      <div>Header</div>
      <div>
        <DataDisplay data={data} />
      </div>
      <div>Footer</div>
    </div>
  );
}

function Page() {
  return (
    <div>
      <div>Sidebar</div>
      <div>Header</div>
      <div>
        <Suspense fallback={<Skeleton />}>
          <DataDisplay />
        </Suspense>
      </div>
      <div>Footer</div>
    </div>
  );
}
 
async function DataDisplay() {
  const data = await fetchData(); // 이 컴포넌트 트리만 대기
  return <div>{data.content}</div>;
}

function Page() {
  const dataPromise = fetchData(); // 바로 요청만 시작하고 await은 하지 않음
 
  return (
    <div>
      <div>Sidebar</div>
      <div>Header</div>
      <Suspense fallback={<Skeleton />}>
        <DataDisplay dataPromise={dataPromise} />
        <DataSummary dataPromise={dataPromise} />
      </Suspense>
      <div>Footer</div>
    </div>
  );
}
 
function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise); // 대기 중이면 Suspense, 완료 후 data
  return <div>{data.content}</div>;
}
 
function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise); // 같은 프로미스 → 같은 fetch 결과 재사용
  return <div>{data.summary}</div>;
}