Web

[ Next.js - DeepDive ] - getStaticProps part Two

이제 간단히 이전에 봉착했던 문제를 해결하기 위해 getStaticProps를 사용해 변수가 들어간 페이지에서 SSG를 어떻게 미리 Html파일로 만드는지 알아보도록 하겠습니다. https://nextjs.org/docs/basic-features/data-fetching/get-static-paths Data Fetching: getStaticPaths | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org 위 공식문서를 기반으로 간단히 작성해 보았습니다. /pages/blog/[slug].tsx import { N..

[ Next.js - DeepDive ] - getStaticProps part One

이제 우리는 이전에 getStaticProps로 만든 SSG페이지를 업그레이드 시켜보겠습니다. 왜냐면 우리는, 일반적인 HTML이 되는 이런 static페이지를 생성합니다. 하지만 우리는 이번에 각 블로그마다 다른 경로인 예를 들어 /blog, /blog/01-my-first-post, /blog/02-back-home,...이렇게 말이죠. 이는 기존에 만든 products페이지와 매우 비슷합니다. 다만 이번에 만드는 blog는 모든 데이터를 이미 가지고 있는 페이지가 될 거라는 것입니다. 이를 하기 위해서 우선 기존의 blog.tsx를 /blog폴더로 옮겨줍니다. /pages/blog/index.tsx import Layout from "@components/layout"; import { readdi..

[ Next.js - DeepDive ] - getStaticProps

getServerSideProps는 유저의 요청이 발생할 때마다 일어난다는 겁니다. 다만 지금부터 알아볼 getStaticProps는 딱 한 번 실행됩니다. 페이지가 빌드되고, nextjs가 페이지를 export한 후 일반 html로 될 떄 실행됩니다. 이제 본격적으로 getStaticProps를 사용해보도록 하겠습니다. 우리가 posts/[ 블로그 번호~~ ]를 markdown언어로 작성하고 SSG를 적용하기로 했습니다. 기존에 SSR를 사용하면 매 요청마다 getServerSideProps가 실행되었습니다. 하지만 getStaticProps는 빌드타임시 다 한번 실행됩니다. getStaticProps안에 기존의 Prisma모델을 싹다 때려박아서 모든 블로그 post를 제공하고, 여기에서 HTML을 생..

[ Next.js - DeepDive ] - Blog Section

우리가 물건 목록을 확인하는 홈페이지에 들어갔을 때, 시간이 어느정도는 걸립니다. 그 이유는 서버사이드 렌더링을 할 때, 시간이 어느정도 필요하기 떄문입니다. 이런건 정적 페이지라고 할 수 없습니다. 정적이라는 뜻은 데이터가 바뀌지 않는 것을 말합니다. 우리의 홈페이지는 동적 페이지입니다. 데이터가 바뀌기 떄문입니다. 그 변경되는 데이터는 API에서 올겁니다. 기본적으로 서버사이드렌더링을 하지 않거나, API에서 데이터를 가져오지 않을 때 그건 누구에게나 정적으로 보여집니다. 왜냐하면 말 그대로 NextJS가 사이트를 빌드할 때 해당 페이지를 export했기 떄문입니다. NextJS는 페이지를 html로 export해줍니다. 그런데 정적 페이지를 만들고 싶지 않을수도 있고, 모든 정적 페이지에서 html..