getServerSideProps로 query string 가져오기

• 프로젝트: Co-Building
• 키워드: query string, getServerSideProps, redirect
• 상황
  1. 게임 대기방(Room)에는 고유한 roomId가 있다.
  2. 대기방의 URL을 이용하여 친구를 초대할 수 있어야하기 때문에, URL의 query string에 roomId가 들어있다.
  3. 대기방 페이지 진입시 url에 roomId가 없는 등 예외 상황에 대해 처리를 해줘야한다.
• 해결 방법
  1. 문제를 해결하는 다양한 방법이 있겠지만, 해커톤 당시 급박한 개발에 의한 버그 최소화와 예외 처리 로직 분리를 위해 getServerSideProps API를 이용했다. (성능면에선 최선이 아닐 수 있다.)
     
     
  2. getServerSideProps의 query parameter를 이용하면 URL에 있는 query string을 쉽게 가져올 수 있다.
     (query: An object representing the query string, including dynamic route parameters.)
     

       export async function getServerSideProps({ query }) {
       const roomId = query.roomId;
     
       return {
         props: {
           roomId,
         },
       };
     }

     
     
     
  3. roomId가 없을 경우 로비 페이지로 redirect시키는 로직을 추가한다. 일시적인 redirect이므로 permanent 값은 false로 설정한다. (307 temporary redirect)
     The redirect object allows redirecting to internal and external resources. It should match the shape of { destination: string, permanent: boolean }.
     

       export async function getServerSideProps({ query }) {
       const roomId = query.roomId;
     
       if (!roomId) {
         return {
           redirect: {
             permanent: false,
             destination: '/lobby',
           },
         };
       }
     
       ...
     }

     
     이제 roomId가 없는 경우 lobby 페이지로 redirect되고, 있을 경우 Room Page에서 roomId prop을 사용할 수 있다!
     

       export default function RoomPage({ roomId }) {
       ...
     }

     
     위의 상황과는 다르지만, 초기 상태값이 query string에 들어있거나/query string을 이용한 API를 렌더링 전에 호출해야하거나 하는 상황이라면 getServerSideProps의 query parameter가 유용할 것 같다.