Next.js에서 동적인 Data를 Fetching하는 방식은 아래의 4가지 방식이 있다.
-
CSR(Client Side Rendering)
-
SSR(Server Side Rendering)
-
SSG(Static Site Generation)
-
ISR(Incremental Static Regeneration)
CSR
import { useEffect, useState } from 'react'
import styles from '../styles/Home.module.css'
import axios from 'axios';
export default function Home() {
const [dateTime, setDateTime] = useState(null);
useEffect(async () => {
try {
const response = await axios.get('https://worldtimeapi.org/api/ip');
setDateTime(response.data.datetime);
}
catch (e) {
console.error(e);
}
},[]);
return (
<div className={styles.container}>
{dateTime || "불러오는 중 ..."}
</div>
)
}SSR - getServerSideProps
SSR에서는 브라우저에서 데이터를 받아오는 것이 아니라 서버에서 데이터를 미리 받아서 그 값을 이용해 구성한 html 파일을 브라우저에게 전달해주기 때문이다.
브라우저는 데이터를 받아올 필요없이 그저 서버에서 보내준 html파일을 렌더링하면 된다. 서버에서 데이터를 받아오는 과정은 페이지가 로드되기 전 진행된다.
getServerSideProps는 서버에서 실행되는 함수이다. 그렇기 때문에 저 함수안에 console.log("hello")를 넣어주면 브라우저가 아닌 서버의 콘솔창에 "hello"가 뜨는 것을 확인할 수 있다.
import styles from '../styles/Home.module.css'
import axios from 'axios';
export default function Home(props) {
const { dateTime } = props;
return (
<div className={styles.container}>
{dateTime || "불러오는 중 ..."}
</div>
)
}
export async function getServerSideProps() {
const response = await axios.get("https://worldtimeapi.org/api/ip");
return {
props: {
dateTime: response.data.datetime
}
}
}SSG - getStaticProps,getStaticPaths
빌스시 고정되는 값, 빌드 이후 값 변경 불가
getServerSideProps()는 매 페이지 요청마다 서버에서 실행되지만 getStaticProps()는 빌드할 때 한번만 실행되는 함수이다.
그러므로 화면에 표시된 시간을 빌드가 될 때 api 호출을 해서 받아온 데이터(시간)이다.
function Blog({ posts }) {
return (
<ul>
{posts.map(post => (
<li>{post.title}</li>
))}
</ul>
);
}
// // 빌드 타임 때, 정적으로 렌더링할 경로 설정
export async function getStaticPaths() {
return {
paths: [
{ params: { id: "1" } },
{ params: { id: "2" } }
......
{ params: { id: "10" } }
],
// 만들어지지 않은 것도 추후 요청이 들어오면 만들어 줄 지 여부.
fallback: true,
}
}
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
}
};
}- 해당 path로 설정해준 params 1~10까지만 처음에 정적파일을 생성해줌
- fallback false이면 다른 params 수는 404 에러를 띄운다.
- fallback true이면 다른 params 수는 처음에 처음에 빈화면을 잠시 렌더링하다가 백엔드에서 정적파일을 생성해준다.
- 그러면 next.js는 그 정적파일을 pre-rendering 목록에 추가해준다(production 환경에서만 development환경은 x)
- getStaticPaths 사용시 getStaticProps도 같이 써줘야됨
ISR - getStaticProps
getStaticProps()로 빌드시 데이터를 받아오되 일정 시간이 지난 후의 페이지 요청에 대해서는 함수가 다시 실행된다.
npm run build를 하고 npm run dev를 하면 페이지에 접속을 한 후 리로드를 계속 해보면 시간이 바뀌지 않지만 어느 시점에 갑자기 바뀐다.
빌드가 된 후 5초 뒤의 요청에 대해서는 빌드를 새로해 getStaticProps()를 다시 실행하도록 revalidate라는 것을 이용해 설정해줬기 때문이다.
매 5초마다 함수가 실행되는 것이 아니라 5초 뒤의 요청이 들어온 시점에 함수가 실행되는 것이다.
그렇기 때문에 6초뒤에 페이지를 리로드하면 5초 뒤의 시간이 아닌 정확히 6초 뒤의 시간이 표시된다.
import styles from '../styles/Home.module.css'
import axios from 'axios';
export default function Home(props) {
const { dateTime } = props;
return (
<div className={styles.container}>
{dateTime || "불러오는 중 ..."}
</div>
)
}
export async function getStaticProps() {
const response = await axios.get("https://worldtimeapi.org/api/ip");
return {
props: {
dateTime: response.data.datetime
},
revalidate: 5
}
}context objects
- pathname - 현재 pathname (/user?type=normal-> /user)
- query - 현재 query를 객체로 (http://localhost:3000/blog/test -> {id: 'test'}, /post?type=secret -> {type: 'secret'})
- asPath - 전체 path (http://localhost:3000/blog/test -> /blog/[id], /blog/test)
- req - HTTP request object (server only)
- res - HTTP response object (server only)
- err - Error object if any error is encountered during the rendering
