Next.js version 12 업데이트 후 .server.js로 페이지 컴포넌트를 만들면 getServerSideProps, getStaticProps 둘다 필요없다고 하는 것 같은데 이것을 실험해보기 전에 getServerSideProps을 먼저 사용해봐야겠다는 생각이 들었다.

이번에 나현님의 PR에서 router에 shallow 옵션을 줄 수 있다는 것을 알게 됐는데 이것과 같이 사용해보려 한다.

• Static Generation : getStaticProps

• Server-side Rendering : getServerSideProps

구버전 next에서는 data fetching을 getInitialProps으로 진행했는데, 9.3부터는 getStaticProps, getStaticPaths, getServerSideProps으로 나뉩니다.

• 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.

// **************************************** e.g.1,
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}
  
// **************************************** e.g.2,
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

• 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옵니다.

• useEffect에서 dispatch를 이용해서 reqeust action을 보내는 것을 getServerSideProps을 이용하려고 했으나 hooks rule에 위배(hook은 컴포넌트 안에서 사용해야 함)
• 실험 불가
  • https://github.com/Ark-inflearn/inflearn-clone-front/issues/107
    • 가능한 방법이 있는지 확인해보기

"빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다. SSG (Static Site Generation) 개념입니다.

"page가 요청받을때마다" 호출되어 pre-rendering합니다. SSR (Server Side Rendering) 개념입니다. pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용하면 됩니다. 매 요청마다 호출되므로 성능은 getStaticProps에 뒤지지만, 내용을 언제든 동적으로 수정이 가능합니다.

// getStaticProp()에 의해 빌드시에 게시물이 채워집니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  // 외부 API endpoint로 Call 하여 Post 정보를 가져옵니다.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // posts 데이터가 담긴 prop를 빌드시간에 Blog 컴포넌트에 전달합니다.
  return {
    props: {
      posts,
    },
  }
}

export default Blog

• getServerSideProps에선 hooks를 사용할 수 없다. fetch를 사용해서 데이터를 가져온 뒤 props를 return 한 것을 컴포넌트에서 가져오는 방식으로 사용해야 될 것 같다.
• 리덕스를 사용하지 않아서 비지니스 로직을 모두 리덕스에 담을 수 없는 점은 아쉬운 것 같다.
• React 18버전이 정식 출시되고 다른 라이브러리들의 dependencies에서 React18이 추가가 된다면 Next.js 12의 React Server Components를 이용해서 테스트해보고 싶다.

• https://beside-lab.tistory.com/entry/Nextjs-getStaticProps-vs-getServerSideProps-%EC%B0%A8%EC%9D%B4%EC%99%80-%ED%99%9C%EC%9A%A9
• https://nunucompany.tistory.com/5

-> React 18버전 정식 출시 및 material UI 버전 올린 뒤 다시 시도할 예정

• ts파일로 만들 경우 jsx 문법 사용 불가능

• https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/getstaticprops%EC%99%80-getserversideprops-in-next-js-ab076c253d2c
• https://nextjs.org/learn/basics/data-fetching/with-data
• https://nextjs.org/docs/basic-features/pages#server-side-rendering
• https://kyounghwan01.github.io/blog/React/next/getInitialProps/
• https://velog.io/@gth1123/Next.js-Pre-rendering-and-Data-Fetching
• https://velog.io/@gth1123/Next.js-getServerSideProps