[React] 사전 렌더링, Suspense etc.

★ 이전 포스팅과 이어집니다!

2024.07.12 - [Frontend 📚/React] - [React] 하이드레이션(Hydration), Next etc.

[React] 리액트 기술 면접 핸드북 VII - 하이드레이션(Hydration), Next etc.

 

1. 사전 렌더링 함수 종류 ⭐️

• getInitialProps
  • Next 9.3 버전 이전에는 getInitialProps만으로 사전 렌더링 관련 문제를 전부 해결했지만, 9.3 버전부터는 getInitialProps가 3가지로 분리됨
  • getStaticProps, getStaticPath, getServerSideProps
• getStaticProps
  • 빌드시 고정되는 값으로 빌드 이후에는 수정이 불가능함
  • data를 빌드 시에 미리 땡겨와 정적(static)으로 제공
  • 매 유저의 요청마다 fetch할 필요가 없는 데이터를 가진 페이지를 렌더링할 때 유리함
  • 유저에 구애받지 않고 퍼블릭하게 캐시할 수 있는 데이터임
  • SEO 등의 이슈로 인해 빠르게 미리 렌더링해야만 하는 페이지에 사용
• getStaticPath
  • 동적 라우팅 + getStaticProps를 원할 때 사용
  • 정의하지 않은 하위 경로는 접근해도 화면이 뜨지 않음(error 페이지로 라우팅)
  • 동적 라우팅 시, 라우팅되는 경우의 수를 하나하나 넣어야 함
• getServerSideProps
  • 빌드와 상관없이, 매 페이지 요청마다 데이터를 서버로부터 가져옴

 

2. Suspense ⭐️

• Suspense란?
  • Suspense는 데이터를 불러오기를 위한 라이브러리가 아님
    
    
  • Suspense는 '컴포넌트가 읽어들이고 있는 데이터가 아직 준비되지 않았다'고 React에 알려줄 수 있는, 데이터 불러오기 라이브러리에서 사용할 수 있는 매커니즘임
  • 이후에 React는 데이터가 준비되기를 기다렸다가 UI를 갱신할 수 있음
    
    
  • 장기적인 관점으로는, Suspense가 데이터 출처와 상관없이 컴포넌트로부터 비동기 데이터를 읽는 데에 사용되는 주된 방식으로  사용되길 바람

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // 아직 로딩이 완료되지 않았더라도, 사용자 정보 읽기를 시도합니다
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // 아직 로딩이 완료되지 않았더라도, 게시글 읽기를 시도합니다
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

• Suspense로 가능한 것은?
  • 데이터 불러오기 라이브러리들(axios, SWR, react-query)이 React와 깊게 결합할 수 있도록 해줌
  • 의도적으로 설계된 로딩 상태를 조정할 수 있도록 해줌. suspense는 데이터가 어떻게 불러져야 하는지를 정하지 않고, 앱의 시각적인 로딩 단계를 밀접하게 통제할 수 있도록 해줌.
  • 경쟁 상태(Race Condition)를 피할 수 있도록 도움. await를 사용하더라도 비동기 코드는 종종 오류가 발생하기 쉬움, suspense를 사용하면 데이터를 동기적으로 읽어오는 것처럼 느껴지게 해줌.