fetch on Render vs render as Fetch

Fetch on Render

• 컴포넌트가 렌더링 된 후에 데이터 페칭 시작.
• 일반적으로 useEffect 훅 사용해서
• 데이터가 로드되는 동안 로딩 상태를 표시한다.
• 워터폴 효과가 발생 할 수 있음. 부모 컴포넌트의 데이터를 기다린 후에야 자식 컴포넌트의 데이터 fetching 이 시작되어서.
  • 즉 각 컴포넌트가 렌더링 된 후에 렌더링이 시작해서, 부모 컴포넌트의 데이터 로딩 완료 후 자식 컴포넌트 데이터 로딩 시작하여 데이터 페칭이 순차적으로 일어남.

// Fetch on Render
function ProfilePage() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(u => setUser(u));
  }, []);

  if (user === null) {
    return <Loading />;
  }
  return <Profile user={user} />;
}

Render as Fetch

• 렌더링 프로세스를 시작하는 동시에 데이터 페칭 시작.
• Suspnese 와 함께 사용되어, 비동기 작업을 더 선언적으로 처리함
• 데이터가 준비되기 전에 UI의 일부를 렌더링 가능
• 여러 데이터 의존성을 병렬로 로드할 수 있어 성능 향상

// Render as you fetch
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails resource={resource} />
    </Suspense>
  );
}

function ProfileDetails({ resource }) {
  const user = resource.user.read();
  return <Profile user={user} />;
}