getServerSideProps & Client Side Data Fetching

getServerSideProps

export const getServerSideProps = async () => { ... }

• 페이지 요청이 서버에 도달할 때마다 실행되는 함수, 서버에서만 실행됨
• 서버에 도달할 때 요청을 처리하기 때문에, 사전 생성할 필요 X, 동적 경로를 미리 지정할 필요 X
• 서버에서 데이터를 패치하여 초기 데이터를 전달하도록 구성되어 있음

export default function UserProfilePage(props) {
  return <h1>{props.username}</h1>;
}

export async function getServerSideProps(context) {
  const { params, req, res } = context;
  return {
    props: {
      username: "Max",
    },
  };
}

• res와 req 객체를 사용해서 요청을 조정하거나 헤더를 추가할 수 있음

export default function UserIdPage(props) {
  return <h1>{props.id}</h1>;
}

export async function getServerSideProps(context) {
  const { params } = context;

  const userId = params.uid;

  return {
    props: {
      id: "userId-" + userId,
    },
  };
}

• 동적 경로도 미리 지정하지 않아도 됨

Client Side Data Rendering

• 사전 렌더링을 할 필요가 없는 경우

1. 갱신 주기가 잦은 데이터
2. 특정 유저에게만 한정되는 데이터
3. 데이터 일부분만 표시하는 경우

➡️useEffect나 fetch를 사용해서 React 내에서 api로부터 데이터를 가져오는 것이 좋은 방법!