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