반응형

getstaticprops 2

[Next.js] getStaticPaths (Static Generation/fallback/동적 라우팅)

1. getStaticPath 예시 2. fallback 동적 라우팅 페이지에서의 pre-rendering Next의 pages폴더에서 [대괄호]로 파일명을 생성하면 동적 라우팅을 할 수 있다. 이 때 주의해야 할 점은 Next는 모든 페이지를 사전생성 하지만, 동적 페이지에서는 그렇지 않다는 점이다. 동적 페이지에서 getStaticProps를 사용하여서 페이지에 진입하게 되면 아래와 같은 에러를 만나게 된다. 대괄호 [ ]로 만든 동적 페이지는 엄밀하게 따져서 하나의 페이지가 아닌 여러 페이지이다. 때문에 Next는 사전에 동적 페이지를 위해서 얼마나 많은 페이지를 미리 생성해야할지 알 수 없다. 이럴 때 비동기 함수 getStaticPaths를 이용하여 Next에게 어떤값에 대한 페이지가 pre-r..

Archive 2023.01.17

[Next.js] Pre-rendering 개념 & Static Generation(getStaticProps)

1. Pre-rendering이 필요한 이유 2. Pre-rendering의 2가지 방식 3. Static Generation 4. Build 5. ISR 정적페이지 업데이트 Pre-rendering이 필요한 이유 SPA(Single Page Application) 인 React로 구현된 사이트는 하나의 파일로 전체 사이트(여러 페이지)를 구현한다. 즉, html 파일이 한개라는 뜻인데, 이 HTML을 JavaScript가 동적으로 만드는데 동적생성이 만들어지는 곳이 client라면 CSR(Client Side Rendering)이고 server 쪽이라면 SSR(Server Side Rendering) 이다. React는 CRA(Create React App)으로 별도의 초기 설정 없이도 CRA를 통해 ..

Archive 2023.01.08
반응형