장점
단점
getStaticProps
로 바꾸면 SSG로 바껴짐
npm build
npm start
SSG랜더링 짱 빠름(buil 때만 동작함)
SSR은 좀 느림
다이나믹한 페이지이다.
그래서 SSG로는 어렵지 않나..?
바로 보내준다.
모든 경로를 만들어주는 함수를 만들어줘야한다.
나올 수 있는 경로 만들어주는 함수
- fallback: false
없는 경로는 false로 처리
npm run build
사전에 페이지가 생성한것을 확인할 수있다.
빌드 산출물로 확인가능
fallback
옵션없었던 html 파일도 실시간으로 페이지가 생성돼서 반환된다.
실시간으로 생성해서 반환
빠르게 생성해서 반환한다.
페이지만 반환
뒤늦게 컨텐츠 채워짐
//Fallback 상태인지 아닌지 알려줌.
if (router.isFallback) {
return <div>Loading...</div>;
}
fallback이면 로딩중이 뜸.
if (!country) {
return <div>존재하지 않는 국가입니다.</div>;
}
이런식으로도 가능하구나.. 맨날 삼항식으로 문제품
url 파라미터만 getStaticPath를 쓸 수있다.
퀴리스트링은 접근못한다
q=korea
대응해야하는 경우의 수가 너무 많다.
어떠한 자원의 고유의 키여서 대응수가 예상가능함.
컴포넌트 내부에서 useRouter을 통해서 쿼리 스트링만 가져오기
쿼리값으로 내부에서 APIfmf 가져오면된다.
import { fetchSearchResults } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export default function Search() {
//쿼리 스트링 가져오기
const router = useRouter();
const { q } = router.query;
// 쿼리스트링에 있는 나라들 저장 배열
const [countries, setCountries] = useState([]);
// 나라 값 가져오기
const setData = async () => {
const data = await fetchSearchResults(q);
setCountries(data);
};
// 쿼리가 달라지만 실행하게
useEffect(() => {
if (q) {
setData();
}
});
return (
<div>
{countries.map((country) => (
<div key={country.code}>{country.commonName}</div>
))}
</div>
);
}
//* 위에 함수는 객체로도 쓸 수 있어서 밑에처럼 사용가능
Search.Layout = SubLayout;