[next.js] getServerSideProps 사용법

안녕하세요. 원모 싸이버 스쿨입니다. 오늘은 좀 영양가 있는 포스팅을 해보겠습니다.

https://wonmocyberschool.com

저 위에 링크는 제 웹사이트인데요.

next.js로 프론트엔드를 짰습니다.

next.js가 뭔지 모르신다구요?

Next.js 제대로 알고 쓰자

이 분의 글을 읽어보시길 바랍니다.

---

next.js에는 데이터를 패치해 오는 방법이 세 가지가 있습니다.

Basic Features: Data Fetching | Next.js

• getStaticProps : 빌드 타임에 데이터를 사악 가져와서 정적 웹사이트를 만들어 줍니다. 업데이트가 자주 되지 않는 데이터로 이루어진 웹사이트는 요것을 사용하는 것이 좋지요.
• getStaticPaths : getStaticProps를 할 때 동적으로 경로를 만들어야 할 때 사용합니다.
• getServerSideProps : next.js 는 react.js의 데이터 패치 방식처럼 request마다 데이터를 패치합니다. 런타임에 데이터를 패치해 오는 것이지요. react.js는 브라우저에서 데이터를 받아오지만 next.js는 next.js가 배포된 서버에서 데이터를 패치한다는 차이가 있습니다.

이번 포스팅에서는 getServerSideProps를 알아보겠습니다.

---

getServerSideProps

next.js 프레임워크에는 pages라는 디렉토리가 있습니다. 이 곳의 자바스크립트 파일들이 웹사이트의 페이지가 되지요.

그리고 각 파일들은 react 컴포넌트여야 합니다. 완전히 react.js 확장팩이죠? 짱입니다.

pages 내의 react 컴포넌트에 다음 같은 코드를 적어 주시면 데이터를 매 요청마다 패치해 올 수 있습니다.

원모싸이버스쿨 블로그 프론트엔드에서 가져온 파일을 한 장 보면서 알아보겠습니다.

export async function getServerSideProps(context) {
  
  //context는 자바스크립트 오브젝트인데 여기 유용한게 많이 들어 있습니다. 공식문서 보시면 자세히 설명되어 있습니다.
  
  //아래 코드는 쿠키를 빼서 쓰는 모습입니다.
  const cookie = context.req ? context.req.headers.cookie : "";
  
  const token = tokenFromCookie(cookie);//쿠키에서 토큰만 빼는 함수가 위에 어디 있습니다.
  
  //이것은 그냥 데이터를 위한 API 엔드포인트입니다.
  const userProfileEndpoint = endpointMania("/api/user/profile");
  
  //자유롭게 자바스크립트 코드를 이용해서 데이터를 가져와서 지지고 볶고 할 수 있습니다.
  if (token === "") {
    const profile = { success: false, token: "없음" };
    return { props: { profile } };
  }
  try {
  	//저는 그냥 fetch를 썼는데 axios를 써도 상관 없습니다.
    const res = await fetch(userProfileEndpoint, {
      method: "GET",
      headers: {
        Authorization: token,
      },
    });
    const profile = await res.json();
    return {
      props: {
        profile,
      },
    };
  } catch (e) {
    console.log(e);
    const profile = { success: false };
    return { props: { profile } };
  }
}

요러케 하면 props 라는 키를 가진 자바스크립트 오브젝트를 리턴하는데요. 이 리턴한 데이터를 어떻게 가져다 쓰는지 보여드리겠읍니다.

... 이것저것 import 생략 ...

//이 파일의 페이지 렌더 함수입니다.
//완죤히 리액트 컴포넌트입니다.

const profile = ({ profile }) => { 
  //파라미터로 요러케 디스트럭터로 사악 받으면
  //기가막히게 패치한 데이터를 쓸 수 있습니다.
  
  ... 다른 코드 생략 ...
 
  //리액트 스따일 화면 렌더링 코드입니다.
  //리액트 props 처럼 패치 받아 넘긴 데이터를 마음것 쓰시면 됩니다.
  return (
    <div>
      
      //propfile로 넘겨주고 profile로 받고 propfile로 쓰는 모습입니다.
      
      {profile.success ? (
        
      ... 리팩토링 되지 않은 부끄럽고 더러운 코드 생략 ...
      
      //자바스크립트 객체이므로 객체를 쓰듯 마음것 쓸 수 있습니다.
      <p>소개 : {profile.data.description}</p>
          
      ... 리팩토링 되지 않은 부끄럽고 더러운 코드 생략 ...
    </div>
  );
};

//우리의 getServerSideProps입니다. 보통 page코드 아래쪽에 위치합니다.
export async function getServerSideProps(context) {
	... 위에 언급한 코드이므로 생략 ...
}

export default profile;

자세한 원모싸이버스쿨 블로그 프론트엔드 코드는 원모의 깃헙 리뽀지토리에서 확인하실 수 있습니다.

yonmoyonmo/wcs-blog-front-end

---

끝!

---