[next.js] 블로그 앱 만들기 3강

🐶 Next js는 모든 페이지를 사전 렌더링함

1. 정적 생성
- 프로젝트가 빌드하는 시점에 html파일들이 생성

- 모든 요청에 재사용

- 퍼포먼스 이유로, 넥스트 js는 정적 생성을 권고

- 정적 생성된 페이지들은 CDN에 캐시

- getStaticProps / getStaticPathsj

 

2. Server Side Rendering (Dynamic Rendering)

- 요청이 있을때마다 다시 부르려면은 서버사이드렌더링 사용

- 항상 최신 상태 유지

- getServerSideProps

 

ex 렌더링 

상세페이지 같은 경우는 화면에 보여지는 데이터들이 있어야 하기 때문에 API호출이 안되어 있을때 정보공유나 상세정보가 보이지 않기 때문에 서버사이드 렌더링으로 만들어본다.

 

index.js

[id].js

item을 props로 받아주게 되면서 기존의 코드에서 삭제되는 부분들임 

=> 아이템이 있는지 없는지만 확인이 되면 되서

삭제한 부분

전체코드

메뉴바 사용위한

Gnb.js

- router 사용

- next/link를 이용하면 새로고침이 없다는 특징

- Location을 사용하면 새로고침이 됨 -> 부드럽게 이동할수 없다는 단점

 

Footer.js 

Footer에 바가 없어서 수정해줌

about.js

최종구현 화면 

isLoading 사용으로 새로고침 시 로딩 됨

오늘 끝----