nextjs를 사용해서 아주 간단한 웹사이트를 만들어보고있는데,
구현해보면서 배운것들을 기록해보고자한다.
우선 nextjs는 react + ssr으로 유명하다.
리액트를 기반으로한 프레임워크이기때문에 지켜야할 룰들이있어서 공식문서를 보면서 구현중이다.
그 중 오늘 공부해본것을 기록해보면
데이터 페칭 시점에 따라 html구성이 달라진다.
우선 ssr 방식으로 구현을 해보고싶으면 아래처럼 getInitialProps를 사용해보면된다.
const Home: NextPage<{ pocketmon: PocketmonAPI }> = ({ pocketmon }) => {
return (
<div className={styles.container}>
<Head>
<title>Pocketmon</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
{pocketmon.results.map((info) => (
<div key={info.name}>{info.name}</div>
))}
</div>
);
};
Home.getInitialProps = async (ctx) => {
const response = await axios.get<PocketmonAPI>(
"https://pokeapi.co/api/v2/pokemon?limit=20"
);
return { pocketmon: response.data };
};아래의 사진은 브라우저에서 받은 index.html파일인데, body를 보면 알수있듯이 데이터가 박혀서 html이 넘어온다. 즉, 서버에서 이미 데이터페칭을 완료한 뒤 받아온 데이터를 렌더링 한 html을 클라이언트로 보내주는것이다.
그럼 리액트에서 보통 하는방식으로 해보자
useSWR을 사용해서 컴포넌트가 렌더링 되는 시점에 데이터 페칭을 해서, data의 유무에따라 loading or 리스트를 보여준다.
const Home: NextPage<{ pocketmon: PocketmonAPI }> = ({ pocketmon }) => {
const { data, error } = useSWR<{ results: Pocketmon[] }>(
"/api/list",
fetcher
);
return (
<div className={styles.container}>
<Head>
<title>Pocketmon</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
{data ? (
data.results.map((info) => <div key={info.name}>{info.name}</div>)
) : (
<div>Loading...</div>
)}
</div>
);
};이 코드를 실행시켰을때 html파일을 보면 초기엔 data가 undefined이기 때문에 loading만 렌더링된 채로 클라이언트로 보내진다.
