- Published on
NextJS 2. Data Fetching
- Author
- Name
- yceffort
nextjs์ ๊ณต์ ๋ฌธ์๋ฅผ ๋ณด๊ณ ์์ฝํ ๋ด์ฉ์ ๋๋ค.
Table of Contents
1. getInitialProps
Nextjs 9.3 ์ด์ ์๋ getInitialProps
๋ฐ์ ์กด์ฌํ์ง ์๋๋ค. ์ต์ ๋ฒ์ ์ธ 9.3์์๋ ๋ฐ์์ ์ค๋ช
ํ getStaticProps
๋ getServerSideProps
๋ฅผ ์ฌ์ฉํ๊ธฐ๋ฅผ ๊ถ์ฅํ๋ค. (์ ์ง deprecate ๋ ๊ฒ ๊ฐ์ ๊ธฐ๋ถ์ด๋ค.)
getInitialProps
๋ ํ์ด์ง์์ ์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, ํ์ด์ง๊ฐ ํธ์ถ๋ ๋ ์ต์ด๋ก ๋ฐ์ดํฐ ์กฐ์์ ๊ฐ๋ฅํ๊ฒ ํ๋ค. ์ด ๋ง์ ๋ป์, ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์จ ๋ค์์, ์ด ๋ฐ์ดํฐ์ ํจ๊ป ํ์ด์ง๋ฅผ ๋ด๋ณด๋ธ๋ค๋ ๋ป์ด๋ค. ์ด๋ ํนํ SEO ๋ฑ์์ ์ ์ฉํ๋ค.
์ฃผ์:
getInitialProps
๋ฅผ ์ฐ๋ ์๊ฐ nextjs์ automatic static optimization์ด ๋ถ๊ฐ๋ฅํด์ง๋ค.
์์ ๋ฅผ ์ดํด๋ณด์.
import { NextPageContext } from 'next'
import React from 'react'
import fetch from 'isomorphic-fetch'
interface EmployeeInterface {
id: number
employee_name: string
employee_salary: number
employee_age: number
profile_image: string
}
export default function Data({ data }: { data: EmployeeInterface[] }) {
return (
<>
<h1>Employee list</h1>
{data.map(
({ id, employee_age, employee_name, employee_salary }, index) => (
<div key={index}>
<span>{id}.</span>
<span>{employee_name} </span>
<span>${employee_salary}</span>
<span> {employee_age} years old</span>
</div>
),
)}
</>
)
}
Data.getInitialProps = async (_: NextPageContext) => {
const response = await fetch(
'http://dummy.restapiexample.com/api/v1/employees',
)
const { data } = await response.json()
return { data }
}
getInitialProps
๋ด ์์ ๋น๋๊ธฐ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ ์จ ๋ค์์, props๋ฅผ ๋ง๋ค์ด ์ปดํฌ๋ํธ์ ๋๊ธด๋ค. ํ๊ฐ์ง ๋ช
์ฌํ ๊ฒ์, ์ฌ๊ธฐ์ ์ปดํฌ๋ํธ์ ๋๊ฒจ์ฃผ๋ ํ์๋ JSON.stringify
์ ๋น์ทํ๋ค. ๋ฐ๋ผ์ ๋๊ธธ ์ ์๋ ๋ฐ์ดํฐ๋ ์์ Object์ฌ์ผ ํ๋ค.
์ค์ ํฌ์ธํธ
-
์ฒ์ ํ์ด์ง๊ฐ ๋ก๋ฉ ๋๋ค๋ฉด,
getInitialProps
๋ ์๋ฒ์์๋ง ๋ก๋ฉ๋๋ค. ๊ทธ๋ฌ๋next/link
๋๋next/router
๋ฅผ ํตํด์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์ ํ์ด์ง ์ด๋์ด ์ผ์ด๋๋ค๋ฉด, ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์ ์คํ๋ ์ ์๋ค. -
getInitialProps
๋ ์์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ ์ ์๋ค. ์ค์ง ๊ฐ ํ์ด์ง์์๋ง ์คํ ๊ฐ๋ฅํ๋ค. -
1๋ฒ์ ์ด์ ์ ๋ฐ๋ผ์,
getInitialProps
๋ด์์ ์๋ฒ์ฌ์ด๋์์๋ง ์คํ๋ ์ ์๋ ๋ชจ๋์ ๋ด์ฅํ๊ณ ์๋ค๋ฉด, ์ฃผ์๋ฅผ ๊ธฐ์ธ์ฌ์ผ ํ๋ค. ๋ง์ฝ ์๋ฒ์ฌ์ด๋์์๋ง ์๋ํ๊ณ ์ถ์ ๋ก์ง์ด ์๋ค๋ฉด, ์๋์ฒ๋ผ ํ๋ฉด ๋๋ค.
Data.getInitialProps = async ({req}: NextPageContext) => {
console.log('fetch some data')
const response = await fetch(
'http://dummy.restapiexample.com/api/v1/employees',
)
const {data} = await response.json()
let isServer = false
if (req) {
// is server side???????
isServer = true
}
return {data, isServer}
}
2. getStaticProps
์ ์ ํ์ด์ง ์์ฑ์ ์ง์ํ๋ฉฐ, ๋ฐ์ดํฐ๋ฅผ ๋ฑ ๋น๋ ํ์์๋ง! ์คํ๋๋ค.
export async function getStaticProps(_: NextPageContext) {
const response = await fetch(
'http://dummy.restapiexample.com/api/v1/employees',
)
const {data} = await response.json()
console.log('fetchData in build time!')
return {
props: {data},
}
}
๋น๋๋ฅผ ํด๋ณด๋ฉด ์๋์ ๊ฐ์ด ๋ฉ์์ง๊ฐ ์ถ๋ ฅ๋๋ค.
...
Automatically optimizing pages ..fetchData in build time!
Automatically optimizing pages
Page Size First Load
โ ฮป / 458 B 68.2 kB
โ /_app 352 B 67.7 kB
โ ฮป /about 301 B 68 kB
โ โ /data 412 B 68.2 kB
โ ฮป /posts/[id] 303 B 68 kB
+ shared by all 67.7 kB
โ static/pages/_app.js 352 B
โ chunks/d43014630f87ab6320ffd55320a44642064161b7.111b68.js 9.77 kB
โ chunks/framework.9daf87.js 40.1 kB
โ runtime/main.d2cfdc.js 16.8 kB
โ runtime/webpack.a34f97.js 744 B
ฮป (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ (Static) automatically rendered as static HTML (uses no initial props)
โ (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
...
data๋ฅผ ๋น๋์์ ๋ฏธ๋ฆฌ ๋ก๊ฒจ์์ staticํ๊ฒ ์ ๊ณตํ๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ next๋ฅผ ์คํํด๋ณด๋ฉด ๋ฐ์ดํฐ fetch๋ฅผ ํ์ง ์๋๋ค๋ ๊ฒ์ ์ ์ ์๋ค. ์ด๋ฏธ ๋น๋ ์์ ๋ฐ์ดํฐ๋ฅผ ๋ก๊ฒจ ์๊ธฐ ๋๋ฌธ์, ๊ต์ฅํ ๋น ๋ฅธ ์๋๋ก ํ์ด์ง๊ฐ ๋ก๋ฉ ๋๋ค.
getStaticProps
๋ ์๋์ ๊ฐ์ ๊ฒฝ์ฐ์ ์ ์ฉํ ๊ฒ์ด๋ค.
- ๋งค ์ ์ ์ ์์ฒญ๋ง๋ค fetchํ ํ์๊ฐ ์๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง ํ์ด์ง๋ฅผ ๋ ๋๋ง ํ ๋
- headless CMS๋ก ๋ถํฐ ๋ฐ์ดํฐ๊ฐ ์ฌ๋
- ์ ์ ์ ๊ตฌ์ ๋ฐ์ง ์๊ณ ํผ๋ธ๋ฆญํ๊ฒ ์บ์ํ ์ ์๋ ๋ฐ์ดํฐ
- SEO ๋ฑ์ ์ด์๋ก ์ธํด ๋น ๋ฅด๊ฒ ๋ฏธ๋ฆฌ ๋ ๋๋ง ํด์ผ๋ง ํ๋ ํ์ด์ง.
getStaticProps
๋ HTML๊ณผ JSONํ์ผ์ ๋ชจ๋ ์์ฑํด ๋๊ธฐ ๋๋ฌธ์, ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด CDN ์บ์๋ฅผ ํ๊ธฐ ์ฝ๋ค.
๊ทธ๋ฆฌ๊ณ ์๋์ ๊ฐ์ ์ฌํญ์ ์ ๋ ํด ๋์.
- ๋น๋ ํ์์์๋ง ์คํ๋๋ค.
- ์๋ฒ์ฌ์ด๋ ์ฝ๋๋ค. ์ ๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์ ์คํ๋์ง ์๋๋ค. ์ฌ์ง์ด ๋ธ๋ผ์ฐ์ JS ๋ฒ๋ค์๋ ํฌํจ๋์ง ์๋๋ค. ๊ทธ๋ฅ props๊ฒฐ๊ณผ๋ฌผ ์์ฒด๋ฅผ JS ๋ฒ๋ค์ ํฌํจ์ํค๊ณ ์๋ค. ํ์ด์ง์์ ์์ค ๋ณด๊ธฐ๋ฅผ ํ๋ฉด, ์๋ ์ฒ๋ผ ๋ฐ์ดํฐ๋ฅผ ์์ ๋ค๊ณ ์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
<script id="__NEXT_DATA__" type="application/json">
{
"props": {
"pageProps": {
"data": [
{
"id": "1",
"employee_name": "Tiger Nixon",
"employee_salary": "320800",
"employee_age": "61",
"profile_image": ""
}
]
},
"__N_SSG": true
},
"page": "/data",
"query": {},
"buildId": "ExAlLKs0H7K3JGmYT162x",
"nextExport": false,
"isFallback": false,
"gsp": true
}
</script>
- Page์์๋ง ๊ฐ๋ฅํ๋ค.
- ๊ฐ๋ฐ ๋ชจ๋์์๋ ๋งค ๋ฒ ์์ฒญ์ด ๊ฐ๋ค.
3. getStaticPaths
์์์ ์ธ๊ธํ getStaticProps
์ ๋งค์ฐ ์ ์ฌํ๋ค. ์ฐจ์ด๊ฐ ์๋ค๋ฉด, getStaticPaths
๋ ๋ค์ด๋๋ฏน ๋ผ์ฐํธ์์๋ง ์ด๋ค๋ ๊ฒ์ด๋ค. ์ค๋ช
๋ณด๋จ ์์๋ฅผ ๋ณด๋๊ฒ ๋ ๋น ๋ฅด๋ค.
/pages/post/[id].tsx
import React from 'react'
import fetch from 'isomorphic-fetch'
import { GetStaticProps } from 'next'
interface PostInterface {
userId: number
id: number
title: string
body: string
}
export default function Employee({ todo }: { todo: PostInterface }) {
const { userId, id, title, body } = todo
return (
<>
<h1>Todo</h1>
<div>userId: {userId}</div>
<div>id: {id}</div>
<div>title: {title}</div>
<div>body: {body}</div>
</>
)
}
export async function getStaticPaths() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
const paths = data.map(({ id }: PostInterface) => ({
params: { id: String(id) },
}))
return { paths, fallback: false }
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${params?.id}`,
)
const data = await response.json()
return {
props: { todo: data },
}
}
getStaticPaths
์์ /pages/post/[id]
๋ก ์ ๊ทผ ๊ฐ๋ฅํ ๋ชจ๋ ๋ชฉ๋ก์ ๋ก๊ฒจ์จ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฅํ ์ ๊ทผ ๋ชฉ๋ก์
[{"params": {"id": 1}}, {"params": {"id": 2}}]
์ ๊ฐ์ ํํ๋ก ๋ง๋ค์ด ๋๋ค. ๋ฌธ์์ ๋ค๋ฅด๊ฒ ๊ผญ ์ฃผ์ ํด์ผ ํ ๊ฒ์ value๋ ๋ฌด์กฐ๊ฑด string ์ด์ด์ผ ํ๋ค๋ ๊ฒ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ด์ ๋น๋ ํ์์ ๊ฐ๋ฅํ ๋ชจ๋ ๊ฒฝ์ฐ์ ์๋ฅผ ๋ก๊ฒจ์์ - ๋น๋ ํ๊ฒ ๋๋ค.
๋ช ๊ฐ์ง ๋ ์ํ์ ๋ณด๋๋ก ํ์.
pages/todo/[userId]/[id].tsx
export async function getStaticPaths() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/')
const data = await response.json()
const paths = data.map(({id, userId}: TodoInterface) => ({
params: {userId: String(userId), id: String(id)},
}))
return {paths, fallback: false}
}
pages/todo/[...slug].tsx
export async function getStaticPaths() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/')
const data = await response.json()
const paths = data.reduce(
(acc: Array<{params: {slug: string[]}}>, {userId, id}: PostInterface) => {
return acc.concat([
{params: {slug: [String(userId), String(id)]}},
{params: {slug: [String(id)]}},
])
},
[],
)
return {paths, fallback: false}
}
์ด๋ ๊ฒ array ํํ๋ก ๋๊ฒจ์ฃผ๋ฉด ๋๋ค.
{"slug":["10","95"]}},{"params":{"slug":["95"]}}
getStaticProps
์์๋ params
๋ก ์ ๊ทผํ๋ฉด
{"slug": ["1", "3"]}
์ฌ๊ธฐ์ ๊บผ๋ด ์ฐ๋ฉด ๋๋ค.
getStaticPaths
๋ ๋ฆฌํด ๊ฐ์ผ๋ก ์์ ๋ง๋ค์๋ paths
์ fallback
์ ๋๊ฒจ์ค๋ค. fallback
์ true๋ false๊ฐ ๊ฐ๋ฅํ๋ค. false๋ผ๋ฉด nextjs์ 404๊ฐ ๋ฌ๋ค. ์ด๋ ๋ฏธ๋ฆฌ ๋ง๋ค์ด ๋์ด์ผ ํ ํ์ด์ง์ ์๊ฐ ์ ์ ๋, ๋น๋ ํ์์ ์งง๊ฒ ๊ฐ์ ธ๊ฐ์ผ๋ก์ ์ด์ต์ ๋ณผ ์ ์๋ค.
๋ง์ฝ fallback
์ ๊ฐ์ด true๋ผ๋ฉด getStaticProps
๋ ์๋์ ๊ฐ์ด ๋ฌ๋ผ์ง๋ค.
-
getStaticPaths
์์ ๋ฆฌํด๋๋paths
๋ ๋น๋ํ์์ HTML์ด ๋ ๋๋ง ๋๋ค. -
์ฌ๊ธฐ์ ์์ฑ๋์ง ์๋ ์์ธ Path๋ค์ 404 ํ์ด์ง๋ฅผ ๋ฆฌํดํ์ง ์๋๋ค. ๋์ , NextJs๋ fallback page๋ฅผ ๋ณด์ฌ์ฃผ๊ฒ ๋๋ค. ์๋ ์์๋ฅผ ์ดํด๋ณด์.
export default function Employee({ todo }: { todo: PostInterface }) {
const { isFallback } = useRouter()
if (isFallback) {
return <>Fail!</>
}
const { userId, id, title, body } = todo
return (
<>
<h1>Todo</h1>
<div>userId: {userId}</div>
<div>id: {id}</div>
<div>title: {title}</div>
<div>body: {body}</div>
</>
)
}
export async function getStaticPaths() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts')
const data = await response.json()
const paths = data.map(({ id }: PostInterface) => ({
params: { id: String(id) },
}))
return { paths, fallback: true }
}
Fallback ํ์ด์ง์ props๋ ์๋ฌด๊ฒ๋ ์๋ค. ๋ฐ๋ผ์ props๋ฅผ ๊ฐ๊ณตํ๋ ์ฒ๋ฆฌ๋ฅผ ํด์๋ ์๋๋ค.
-
ํด๋น path๊ฐ ์๋ ํ์ด์ง์ ๋ํด์ Nextjs๋ ์๋ฒ๋จ์์ ์ ์ ์ธ HTML๊ณผ JSON์ ๋ง๋ค์ด ๋๋ค. ์ฌ๊ธฐ์๋
getStaticProps
์ ์คํํ๋ ๊ฒ๋ ํฌํจ๋๋ค. -
์ ์์ ์ด ๋๋ฌ๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ๋ ํด๋น path์ ๋ฐ๋ผ์ ๋ง๋ JSON์ ๋ฐ๊ฒ๋๋ค. ์ด JSON์ ํ์ด์ง ๋ ๋๋ง์ ํ์ํ Props๋ฅผ ์ ๊ณตํ๋๋ฐ ์ฌ์ฉ๋๋ค. ์ ์ ์ ์ฅ์์๋, fallback ํ์ด์ง์์ ์ ์ฒด ํ์ด์ง๋ก ์ค์๋๋ ๊ฒ์ผ๋ก ๋ณด์ผ ๊ฒ์ด๋ค. (fallback์ด ์ ์ ๋ณด์๋ค๊ฐ ๋ค์ ๋ฐ์์จ props๋ก ๊ทธ๋ฆฌ๋ ํ์ด์ง๊ฐ ๋ํ๋จ (isFallback์ด true์์ false๋ก ๋ฐ๋))
-
์ด์ ๋์์, ํด๋น path๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํ path์ ์ถ๊ฐํด๋๋ค. ๊ฐ์ path๋ก ์ค๋ ์์ฒญ๋ค์ ์ด์ ๋ง์น ๋น๋์์ ์ฌ์ ์ ๋ ๋๋งํด ๋ ํ์ด์ง ์ฒ๋ผ ์ ๊ณต๋๋ค.
๋ณต์กํ๋ค. ์๋ฅผ ๋ค์ด์ ์ค๋ช ํด๋ณด์.
export async function getStaticPaths() {
const items = Array.from(Array(10).keys())
const paths = items.map(value => ({
params: { id: String(value) },
}))
return { paths, fallback: true }
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const id = params?.id
if (Number(id) > 10) {
return {
props: {
todo: {
userId: 1,
id,
title: `์ด๊ฑด ์๋ฌ์ผ.`,
body: `์ ์ด๊ฑด ์๋ฌ๋ผ๋๊น.`,
},
},
}
} else {
return {
props: {
todo: {
userId: 1,
id,
title: `ํ ์ผ ${id}`,
body: `์ด๊ฑฐ ํ์. ${id}`,
},
},
}
}
๊ฐ ๋ก ๊ฐ์ ์ฝ๋์ง๋ง (...) getStaticPaths
๋ /todo/0
๋ถํฐ /todo/9
๊น์ง๋ง ๋ฏธ๋ฆฌ ๋น๋ ํ์์ ๋ง๋ค์ด ๋๋ค.
โ /todo/[id] 378 B 68.1 kB
โ /todo/0
โ /todo/1
โ /todo/2
โ [+7 more paths]
๊ทธ๋ฆฌ๊ณ ๋ง์ฝ ์ด๋ค ์ฌ์ฉ์๊ฐ ์ฒ์์ผ๋ก /todo/1111
๋ก ์ ๊ทผํ๋ค๊ณ ๊ฐ์ ํด๋ณด์. ๊ทธ๋ผ ์ฌ์ฉ์๋ ์ ์ fallback ํ์ด์ง๋ฅผ ๋ดค๋ค๊ฐ, ๋ค์ getStaticProps
๊ฐ ๋ ๋๋งํด์ฃผ๋ ์๋ฌ ํ์ด์ง๋ฅผ ๋ณด๊ฒ๋๋ค. ๊ทธ๋ฆฌ๊ณ nextjs๋ ํด๋น path์ ๋ํด ๋ ๋๋ง ํด๋ ๊ฒ์ ์ ์ฅํด๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ดํ์ ๋ค์ ์ ๊ทผํ๋ ์ฌ์ฉ์๋ fallback ํ์ด์ง๋ฅผ ๋ณด์ง ์๊ณ ๋ฐ๋ก ์์ ๋ง๋ค์ด ๋์๋ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ฒ ๋๋ค.
fallback ํ์ด์ง๋ ์ธ์ ์ ์ฉํ ๊น?
์์ฃผ ํฐ ์ปค๋จธ์ค ์ฌ์ดํธ์ ๊ฐ์ด, ๋ฐ์ดํฐ์ ๋ฐ๋ผ ๋ง๋ค์ด ๋์ด์ผํ ์ ์ ํ์ด์ง๊ฐ ๋ง์ ์ฌ์ดํธ์์ ์ ๋ฆฌํ ๊ฒ์ด๋ค. ๋ชจ๋ ํ์ด์ง๋ฅผ ๋น๋์์ ๋ง๋ค์ด ๋๊ณ ์ถ์ง๋ง, ๊ทธ๋ฌ๋ค๊ฐ๋ ๋น๋๊ฐ ์์ฒญ๋๊ฒ ์ค๋๊ฑธ๋ฆด ๊ฒ์ด๋ค. ๋์ , ๋ฏธ๋ฆฌ ๋ช๊ฐ์ ์ฃผ์ ํ์ด์ง๋ง ๋ง๋ค์ด๋๊ณ , ๋๋จธ์ง๋ fallback: true
๋ก ์ฒ๋ฆฌํ์. ๋๊ตฐ๊ฐ ์์ง ๋ง๋ค์ด์ง์ง ์์ ํ์ด์ง์ ์ ๊ทผํ๋ ค ํ๋ค๋ฉด, ์ ์ ์๊ฒ ๋ก๋ฉ ์ธ๋์ผ์ดํฐ๋ฅผ ๋์ฐ์. ๊ทธ๋ฌ๋ฉด ๋ฐฑ๊ทธ๋ผ์ด๋์์๋ getStaticProps
๋ฅผ ์คํํด์ ๋ ๋๋ง์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ฌ ๊ฒ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์ด ์์
์ด ๋๋๋ค๋ฉด, ๋ค๋ฅธ ์ ์ ๋ค์ ์ด์ ๋ฏธ๋ฆฌ ๋ ๋๋ง๋ ์ ์ ์ธ ํ์ด์ง๋ฅผ ๋ณผ ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ ์๋์ ๊ฐ์ ์ฌํญ์ ์ ๋ ํด ๋์.
- ํญ์
getStaticProps
์ ์ง์ผ๋ก ์ฐ์. ๊ทธ๋ฆฌ๊ณgetServerSideProps
์๋ ์ธ์๊ฐ ์๋ค. getStaticPaths
๋ ์๋ฒ์ฌ์ด๋์์ ๋น๋ ํ์์๋ง ์คํ๋๋ค.getStaticPaths
๋ ํ์ด์ง์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.- ๊ฐ๋ฐ ๋ชจ๋์์๋ ํญ์ ์คํ๋๋ค.
4. getServerSideProps
getServerSideProps
๋ฅผ ์ฌ์ฉํ๋ฉด, ๊ฐ ์์ฒญ ๋ง๋ค getServerSideProps
์์ ๋ฆฌํดํ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์๋ค๊ฐ ์๋ฒ์ฌ์ด๋์์ ๋ฏธ๋ฆฌ ๋ ๋๋ง์ ํ๊ฒ ๋๋ค.
export async function getServerSideProps(context) {
return {
props: {},
}
}
๋น๋๋ฅผ ํ๊ฒ ๋๋ฉด, ์๋์ ๊ฐ์ด ๋ํ๋๋ค.
Page Size First Load
...
โ ฮป /server 415 B 68.2 kB
...
ฮป (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
โ (Static) automatically rendered as static HTML (uses no initial props)
โ (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
context์๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒ๋ค์ด ํฌํจ๋์ด ์๋ค.
params
: ๋ค์ด๋๋ฏน ๋ผ์ฐํธ ํ์ด์ง๋ผ๋ฉด,params
๋ฅผ ๋ผ์ฐํธ ํ๋ผ๋ฏธํฐ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ค.req
: HTTP request objectres
: HTTP response objectquery
: ์ฟผ๋ฆฌ์คํธ๋งpreview
:preview
๋ชจ๋ ์ฌ๋ถ preview modepreviewData
:setPreviewData
๋ก ์ค์ ๋ ๋ฐ์ดํฐ
์ธ์ ์จ์ผ ํ ๊น?
getServerSideProps
๋ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ธฐ์ ์ ๋ฐ๋์ fetchํด์ผํ ๋ฐ์ดํฐ๊ฐ ์์ ๋ ์ฌ์ฉํ๋ค. ๋งค ํ์ด์ง ์์ฒญ์๋ง๋ค ํธ์ถ๋๋ฏ๋ก ๋น์ฐํ, TTFB๊ฐ getStaticProps
๋ณด๋ค ๋๋ฆฌ๋ค.
๊ทธ๋ฆฌ๊ณ ์๋์ ๊ฐ์ ์ฌํญ์ ์ ๋ ํด ๋์.
getServerSideProps
๋ ์๋ฒ์ฌ์ด๋์์๋ง ์คํ๋๊ณ , ์ ๋๋ก ๋ธ๋ผ์ฐ์ ์์ ์คํ๋์ง ์๋๋ค.getServerSideProps
๋ ๋งค ์์ฒญ์ ๋ง๋ค ์คํ๋๊ณ , ๊ทธ ๊ฒฐ๊ณผ์ ๋ฐ๋ฅธ ๊ฐ์ props๋ก ๋๊ฒจ์ค ๋ค ๋ ๋๋ง์ ํ๋ค.next/link
๋ฅผ ์ด์ฉํด์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ํ์ด์ง ํธ๋ ์ง์ ์ ํ๋๋ผ๋,getInitialProps
์๋ ๋ค๋ฅด๊ฒ ๋ฌด์กฐ๊ฑด ์๋ฒ์์ ์คํ๋๋ค.- ๋น์ฐํ page ์์๋ง ์คํํ ์ ์๋ค.