# Section2
13. SSG 소개
- SSR의 단점을 해결하는 사전 렌더링 방식
- 빌드 타임에 페이지를 미리 사전렌더링 한다
- 장점
사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는 매우 빠른속도로 응답 가능 - 단점
빌드 타임 이후에는 매번 똑같은 페이지만 응답한다, 최신 데이터 반영이 어렵다
⇒ 데이터가 자주 바뀌는 페이지 보다는 정적인 페이지에 적합하다
14. SSG 정적 경로에 적용하기
사용방법은 getServerSideProps와 똑같은데 이름과 타입만 바꿔주면 된다
-
함수 이름 변경
getStaticProps -
페이지 컴포넌트에서 props의 타입 변경
InferGetStaticPropsType<typeof getStaticProps>
$ npm run build를 통해 SSG가 적용되었는지 확인할 수 있다
build 실행시 터미널에 나오는 화면이다
○ → 아무것도 적용하지 않은 페이지들은 기본값으로 정적페이지로 설정
● → SSG
f → SSR
build 이후에는 $ npm run start로 실행해서 직접 브라우저로 확인할 수 있다
빌드타임에 데이터를 미리 불러올 수 없는 페이지
검색 페이지 같은 경우에는 context를 통해 query를 받아올 수 없다
사전렌더링이 진행되는 빌드타임에는 쿼리스트링(사용자가 직접 입력하는 검색어)을 알 수 없기 때문에!
그래서 이런 경우에는 클라이언트 측에서 직접 fetching해서 불러오도록 설정해줘야 한다
-
개발 모드 실행
$ npm run dev -
getStaticProps함수 삭제, 페이지 컴포넌트에서 props 삭제
-
페이지 컴포넌트에서 fetch하고 렌더링
// 📄 src/pages/search/index.ts
// 3-4. data를 업데이트할 useState 작성
const [books, setBooks] = useState<BookData[]>([]);
// 3-1. router를 통해 쿼리스트링 가져오기
const router = useRouter();
const q = router.query.q;
// 3-3. fetchSearchResult 함수 작성
const fetchSearchResult = async () => {
const data = await fetchBooks(q as string);
setBooks(data);
};
// 3-2. useEfffect로 쿼리스트링이 변경될 때마다 렌더링 되도록 설정
useEffect(()=>{
if(q){
fetchSearchResult();
}
},[q])$ npm run build를 통해 터미널을 확인해보면
/search 페이지는 기본값인 SSG 페이지로 설정되어 있고
$ npm run start를 통해 페이지 실행 후
네트워크 탭에서 확인시 SSG가 적용되어 기본 페이지만 렌더링 되는 것을 확인할 수 있다
15. SSG 동적 경로에 적용하기
동적 경로는 파라미터를 포함하여 여러개의 페이지(Dynamic Page)를 렌더링할 수 있기 때문에
빌드타임에서 사전렌더링이 실행되기 이전에 경로를 설정하는 과정이 필요하다
예를 들어
경로 설정에서 id:1, id:2, id:3을 설정하면
사전렌더링에서 book/1.html, book/2.html, book/3.html 이렇게 3개의 페이지를 준비해놓는다
경로 설정에 필요한 것이 바로 getStaticPaths이다
url 파라미터의 값은 반드시 문자열로 작성해준다
// 📄 src/pages/book/[id].ts
// getStaticProps 함수 위에 작성
export const getStaticPaths = () => {
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } },
],
fallback: false,
};
};fallback ⇒ path값으로 정해놓지 않은 경로로 접속 요청을 보냈을 때의 대비책
- false : 404 Not Found 반환 / path에 설정하지 않은 경로는 모두 404
- blocking : 즉시 생성 / SSR 방식으로 실시간 페이지 생성
- true : 즉시 생성 + 페이지만 미리 반환 / fallback 상태의 페이지부터 생성해서 보내준다
$ npm run build를 통해 book/1, book/2, book/3 페이지가 사전 렌더링 되어있는 것 확인
$ npm run start를 통해 페이지 실행 후
book/1, book/2, book/3 페이지 접속시 빠른 속도로 접속되는 것 확인,
path로 설정하지 않은 book/4 페이지로 접속시 아래 결과를 확인할 수 있다
16. SSG 폴백 옵션 설정하기
fallback : 'blocking'
- 즉시 생성 / SSR 방식으로 실시간 페이지 생성
- 한 번 접속한 페이지는 경로가 만들어져 자동으로 next 서버에 저장되고,
그 이후의 요청에는 페이지를 새롭게 생성하지 않고 렌더링이 가능하다
fallback: 'blocking'으로 변경$ npm run build+$ npm run start- book/4 페이지로 접속시 아래 결과
🚨주의할 점🚨
만약 백엔드 서버에게 추가적인 데이터를 요청 → 사전렌더링 시간 증가
이런 경우에는 아무것도 응답하지 않기 때문에 로딩이 발생하게 된다
페이지의 크기에 따라 오랜시간 기다려야하는 단점이 생길 수 있다
이럴때 사용할 수 있는 옵션이 fallback : true 이다
fallback : true
- 즉시 생성 + 페이지만 미리 반환 / fallback 상태의 페이지부터 생성해서 보내준다
- ① Props가 없는 페이지를 즉시 반환하고 (데이터가 없는 레이아웃 상태의 페이지 렌더링),
② Props를 계산하고,
③ Props만 따로 반환 (데이터가 있는 상태의 페이지 렌더링)
fallback:true로 변경$ npm run build+$ npm run start- 페이지 접속 후 3G로 변경
- 페이지가 변경되는 과정 확인
+) fallback 상태에서는 '로딩중입니다'가 뜨도록 설정하기
fallback 상태 : 페이지 컴포넌트가 아직 서버로부터 데이터를 전달받지 못한 상태
// 📄 src/pages/book/[id].ts
// 컴포넌트 페이지 내부에 작성
const router = useRouter();
if (router.isFallback) return '로딩중입니다';$ npm run build + $ npm run start 실행 후 확인
+) 없는 페이지일 경우 notFound 설정하기
// 📄 src/pages/book/[id].ts
// getStaticProps 함수내부에서
if (!book) {
return {
notFound: true,
};
}$ npm run build + $ npm run start 실행 후 확인
