Web/NextJs

[ Next.js - DeepDive ] - REACT18 - Suspense

Suspense Suspense는 코드에서 로딩 상태를 나타내는 부분을 제거할 수 있게 하는 API입니다. 코드에서 로딩 상태에 대해 신경쓰지 않아도 유저가 로딩 상태 화면을 볼 수 있는 겁니다. 하지만 이는 getStaticProps와 같은 곳에서는 사용할 수 없습니다. 로딩상태가 없기 때문이죠. 그래서 NextJS를 사용하지 않거나 getStaticProps, getStaticPaths를 사용하지 않을 때는 suspense를 많이 사용합니다. 기존의 profile페이지는 SSR을 사용했습니다. 그리고 getServerSideProps에서 iron session에 접근하는 방법을 보여주었습니다. 이번에는 SSR을 사용하지 않고 로딩 상태를 확인할 수 있게 만든 다음 SUspense를 사용해서 얼마나..

[ Next.js - DeepDive ] - Data Fetching Reca

전반적으로 데이터를 불러올 때 사용했던 NextJS의 개념을 되짚어보도록 하겠습니다. getStaticProps을 쓸 떄 기억해야 하는건, getStaticProps는 최초 한번만 실행된다는 것입니다. 최초의 의미는, 우리가 프로젝트를 빌드할 때, 페이지들이 HTML로 추출되는 때에 그때 getStaticProps가 실행됩니다. 이는 오직 한번 일어나지만, 우리가 HTML페이지를 바꿀 수 있다면 좋겠죠? 우리는 community페이지에서 revalidate를 썼습니다. 이는 페이지가 최신인지 아닌지를 판단할 수 있게 됩니다. 만약 이들이 최신이라면, 유저는 그냥 만들어진 HTML을 볼 것이고, 만약 아니라, 유저는 오래된 HTML을 보지만, 백엔드에서는 페이지 재생성 작업이 실행됩니다. 이건 유저들이 페..

[ Next.js - DeepDive ] - Fallback

https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false Data Fetching: getStaticPaths | Next.js API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`. nextjs.org fallback의 기능은 여기 잘 나와 있습니다. 그냥 그대로 해석해 보겠습니다. 'fallback'은 getStaticPaths에서 리턴되지 않은 새로운 경로를 사용자로 하게끔 HTML을 만드는 시간동안 기다리게 합니다. 이는 SSR( blocking일 때 성능 증가 )인 ..

[ Next.js - DeepDive ] - Blocking SSG

우리는 Product 상세 페이지를 들어가면 CSR방식으로 그 안의 정보가 따로 불러와 집니다. 우리가 여기서 하고 싶은 것은 getStaticPaths의 fallback값을 false -> blocking으로 바꾸어서 NextJS의 매직을 부려보는 것입니다. 가장 먼저 해야 할 건, 페이지의 ItemDetail을 정적으로 생성된 페이지로 바꾸는 것입니다. 하지만 여기서 의문점이 있습니다. getStaticProps로 정적 페이지를 만든다고 해도, ItemDetail은 id라는 변수가 있기 때문에 어떤 페이지를 정적인 HTML으로 만들고 싶은지 모릅니다. 우리도 모릅니다!. 만약 우리가 Prisma를 쿼리해서 모든 상품에 대한 페이지를 사전에 만들어 둔다면, 말도 안되게 많아질겁니다. 우리가 웹사이트를 ..