Next.js Pre rendering and Data Fetching - TEAM-ARK/inflearn-clone-front GitHub Wiki
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
- ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ด ์๋์ง ํ์ธํด๋ณด๊ธฐ
-
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
๋ฌธ์ ์ 1 : React 18๋ฒ์ ์ด ํ์ํ์ง๋ง material UI์ dependency ์กฐ๊ฑด๊ณผ ๋ง์ง ์์ ์ค์น ๋ถ๊ฐ๋ฅ
-> 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