_app 에서 getInitialProps 실행시 이슈

getServerSideProps

• 서버에서 실행됨
• ssr 시에 필요한 데이터를 미리 불러올 때 쓰임

_app.getInitialProps

• 최초에 앱이 렌더링될 때 실행
• 라우팅이 일어나는 순간 실행

getServerSideProps가 실행될 때_app.getInitialProps 가 실행 됨

라우팅 시 getServerSideProps이 수반되고
라우팅이 일어나면 _app.getInitialProps이 실행되므로

app

import App from 'next/app'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext)

  console.log('getInitailProps!')

  return { ...appProps }
}

export default MyApp

index

import { useRouter } from 'next/dist/client/router'

export default function Home() {
  const router = useRouter()

  function handleClick() {
    router.replace(router.asPath)
  }

  return <button onClick={handleClick}>Replace!</button>
}

export function getServerSideProps() {
  console.log('getServerSideProps')
  return {
    props: {}, // will be passed to the page component as props
  }
}

버튼을 누르면

getInitailProps!
getServerSideProps
getInitailProps!
getServerSideProps
getInitailProps!
getServerSideProps

Reference

• https://yceffort.kr/2021/12/nextjs-lesson-and-learn

• https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybook