View
NextJS는 Pre-render을 지원하는데 화면 먼저 그리고 서버에 데이터를 가져와 보여주는 식이다.
Pre-render는 크게 두 가지로 구현할 수 있는데, Static 방식과 Server-side 방법이 있다.
- Static : html 먼저 그리고 데이터를 뿌는 방법
- Server-side : 서버에서 데이터를 가져와 html을 보여주는 방법이다.
짧은 영어 독해 능력으로 열심히 해석해보니까, Static 방식은 처음에 보여지는 속도는 빨라도 데이터 변경이 자주 발생하면 좋은 방법이 아니고, Server-side 방식은 조금 느릴수 있어도 데이터가 계속 바뀐다고 한다.
Static 방식도 getStaticProps에 'async'을 같이 쓰면 동기되어 데이터를 다 가져오고 html을 그린다고 한다.
사실 이미 이 방식은 예전부터 사용하던 고전적인 방식인데 NextJS는 서버와 클라이언트를 단일로 사용할 수 있고,
페이지별로 방식을 달리 적용할 수 있다는 점이 강점인것 같다.
(NextJS을 엄청 어렵게 생각했었는데 공부하다보니 익숙한 느낌이 들었다.)
기본 셋팅으로 만들어진 파일 조금 바꿔서 이것저것 테스트 해봤다.
실험 결과는 다음과 같다.
1. 서버 내용을 수정하면 바로 변경되는데 화면은 Hot 로딩되지는 않았다.
2. getStaticProps을 사용하면 footer가 보이고 나중에 main이 보였다.
3. getServerSideProps을 사용하면 데이터가 다 준비되고 화면이 한꺼번에 나왔다.
여러 블로그를 확인해보니 swr, fetch, axios 이렇게 3개를 많이 사용하고 있었다.
swr는 get method 같은 단순 조회용으로 사용해서 axios랑 같이 사용하는 것 같았다.
나는 통일하는걸 좋아해서 fetch로 할 것 같다.
// pages/index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import useSWR from 'swr'
function Home(props) {
const { data, error } = useSWR('/api/hello', fetch)
return (
<div className={styles.container}>
<Head>
<title>Beter</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
{/* props.name */}
{data && data.name}
</main>
<footer className={styles.footer}>
fffffff
</footer>
</div>
)
}
/*
export async function getStaticProps({ params }) {
const res = await fetch('http://localhost:3000/api/hello')
const data = await res.json()
console.log(data) // 여기서는 브라우저가 아니라 서버 콘솔에 찍힘
return {
props: {
name: data.name
},
revalidate: 30
}
}
*/
export default Home
// pages/api/hello.ts
import { NextApiRequest, NextApiResponse } from 'next'
const delay = require('delay')
type Data = {
name: string
}
export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
(async () => {
const result = await delay(2000, { value: 'ddd' }) // 느리게 결과를 보기 위해
console.log(result)
res.status(200).json({ name: 'John 하이하이' })
})()
}
'develop > react' 카테고리의 다른 글
| #4 NextJS, 드디어 Apollo 적용하기 (0) | 2020.09.28 |
|---|---|
| #3 NextJS에 PostgreSQL 연동하기 (0) | 2020.09.25 |
| React, Redux 개념 교육 (0) | 2020.09.23 |
| #1 NextJS, Apollo, GraphQl 개발 환경 셋팅하기 (0) | 2020.09.20 |
| React 교육 시작하기 (0) | 2020.09.20 |
