영어하는개발자산가누렁이

front matter 형식으로 페이지 링크 생성하기.

19.11 getStaticPaths part One

복습차원에서 다시 보면, 
getStaticProps를 이용하여 SSG를 만드는 것은, 
/blog/012-my-first-post에 접속 했을때 이미 모든 데이터가 다 거기 있는 static page(=정적 페이지)라는 것이고,
/products/1에 접속 했을때는 아무것도 없고, API로 product id가 1인 상품의 정보를 DB에서 가져오는 것이다.

번외
es6 기능으로 배열의 원소를 바로 변수로 받아올 수 있음.
해당 안되는것(333)은 무시가능.

19.12 getStaticPaths part Two 
getStaticPaths가 필요한 이유?
[slug].tsx라는 파일은 slug가 변수라는 말인데 이 변수가 무한이 될 수 있다.
그런데 우리는 지금 페이지를 미리 만들어 놓는 방식(SSG)을 사용중이다.(getStaticProps를 사용해서.)
next.js 입장에서는 예측 불가능한 수의 페이지들을 만들어 놓는 작업을 막무가내로 시작하기엔 너무 리스키하다. 그래서 getStaticPaths를 사용하라고 에러가 뜬다. 

아래처럼 getStaticPaths를 사용해서 생성할 페이지들을 Next.js에게 알려주면 된다.

getStaticPaths를 보고 모든 slug에 대해 getStaticProps를 실행한다.

그럼 다음 포스팅에서 이를 화면에 뿌려보자!

19.0 Blog Section
기본적으로 페이지가 서버사이드 렌더링을 하지 않을 때, 또는 API에서 데이터를 가져오지 않을 때, 
그건 누구에게나 정적 코드로 보인다. 데이터는 이미 HTML에 있기 때문.
nextjs는 html을  export해준다. = 빌드될 때 생성된다. 
nextjs로 Markdown 파일(.md)만 써서 블로그 섹션을 만들 수 있다
let's get started!

19.10 getStaticProps
getServerSideProps() 처럼 서버에서 실행된다. 유저의 요청이 발생할 때마다 일어남.
getStaticProps() 딱 한 번 실행 됨.
페이지가 빌드되고 nextjs가 이 페이지를 export 한 후 일반 html로 될 때 실행됨.

front matter = 마크다운 파일에 관련된 데이터를 제공해줌

npm install --save gray-matter

문자열 또는 파일에서 front-matter을 파싱

build된 file을 보면 짤렸긴 한데 blog에는 SSG라는게 붇는다.
Static Site Generation!

부연설명 - 닉네임 sugar
getStaticProps getStaticProps는 항상 서버에서 실행되고 클라이언트에서는 실행되지 않습니다.
getStaticProps는 정적 HTML을 생성하므로 들어오는 request(예: 쿼리 매개변수 또는 HTTP 헤더)에 액세스할 수 없습니다.
getStaticProps가 있는 페이지가 빌드 시 미리 렌더링되면 페이지 HTML 파일 외에도 Next.js가 getStaticProps 실행 결과를 포함하는 JSON 파일을 생성합니다.
readdireSync() 디렉토리(폴더)의 내용을 읽습니다.
readFileSync() path의 내용을 반환합니다.