hmk run dev
next.js의 SSR 본문
Next js의 모든 페이지 들은 사전 렌더링 (Pre-rendering)을 한다.
- 더 좋은 퍼포먼스
- 검색엔진 최적화(SEO)
Pre rendering엔 두 가지 형태가 있는데
차이점은 언제 html 파일을 생성가는가에 있다.
1. 정적 생성
- 프로젝트 빌드 시점 생성, 모든요청에 활용
- nextjs는 정적 생성을 권고함
- 정적생성된 페이지들은 cdn에 캐쉬됨
- getStaticProps / getStaticPaths
- 미리 만들어도 되는 페이지 상품리스트, 블로그 게시글 등을 처리할때 유용
2. SSR
- 매 요청시 html 생성
- 항상 최신상태 유지
- getServerSideProps
페이지에 타이틀과 메타 정보들이 비어있는데
검색엔진 최적화를 위해 SSR을 이용해 해결 보겠습니다.
SSR 적용 전 코드
전형적으로 useEffect에서 axios.get으로 데이터를 호출해 state로 set 해주는 코드
const Post = ({item}) => {
const router = useRouter();
const { id } = router.query;
const [isLoading, setLoading] = useState(true);
const [item, setItem] = useState({});
const API_URL = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
function getData() {
Axios.get(API_URL).then((res) => {
setLoading(false);
setItem(res.data);
});
}
useEffect(() => {
if (id && id > 0) {
getData();
}
}, [id]);
return (
<>
{isLoading ? (
<div style={{ padding: "300px 0" }}>
<Loader inline="centered">Loading...</Loader>
</div>
) : (
<Item item={item} />
)}
</>
);
};
export default Post;
SSR적용 후 코드
getServerSideProps에서 데이터를 요청하고 response값을 props로 넘겨준다!
const Post = ({ item }) => {
return (
<>
<Head>
// 메타 데이터 추가
<title>{item.name}</title>
<meta name="description" content={item.description}></meta>
</Head>
{item && <Item item={item} />}
</>
);
};
export default Post;
export async function getServerSideProps(context) {
// context는 params나 요청 응답 쿼리 등이 담겨서 온다
const id = context.params.id;
const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
const res = await Axios.get(apiUrl);
const data = res.data;
return {
props: {
item: data,
},
};
}
useEffect vs getServerSideProps
useEffect는 구성 요소가 마운트된 후에 실행되므로 페이지가 로드된 다음 데이터가 나타납니다.
getServerSideProps은 이미 데이터가 있는 페이지를 로드합니다.
차이점은 페이지가 이미 로드된 후 플래시 데이터가 표시되는 것을 눈치채지 못할 것이며 html 문서가 데이터로 미리 채워져 훨씬 더 나은 검색엔진 최적화를 허용한다는 것입니다.
결국 데이터를 받는 시점이 다르다고 할 수 있습니다.
미리 받아서 데이터를 채워주고 있는 getServerSideProps가 검색 SEO 측면에서 좀 더 유리할 수 있습니다.
getStaticProps는 '빌드' 모드에서 페이지를 빌드할 때 사용됩니다.
구성 요소에 필요한 모든 데이터를 정적으로 제공하여 페이지를 더 빠르게 페이징하므로 사용하는 것이 좋습니다.
getStaticProps가 반환한 키로 데이터를 푸시하여 getStaticProps가 가져온 모든 데이터에 액세스할 수 있으며, 해당 데이터를 props구성 요소 자체의 props에서 사용할 수 있습니다.
정적 생성은 다음 게시물에서..!
'React' 카테고리의 다른 글
useMemo와 useCallback (0) | 2022.03.22 |
---|---|
Next.js 정적 생성(Static Generation) - getStaticProps, getStaticPaths (0) | 2022.03.01 |
Next.js의 장점과 프로젝트 구조 (0) | 2022.03.01 |
async, await (0) | 2021.05.20 |
쿠키방식 로그인 코드 (0) | 2021.04.17 |