commerce 프로젝트 뜯어보기

https://github.com/vercel/commerce 의 커머스 사이트 리포지 토리를 참고

• typescript로 되어있고
• Turbo 로 mono repo를 관리하고 있으며
• 4개의 extension을 recommendation으로 정해두었고
• yarn build를 먼저 해야지 yarn start로 실행해볼수 있다.

• 수정한 코드는 yarn dev를 입력한 상태에서만 수정한 내용을 바로 보여주게 된다.

• Pages -> url과 매칭
• 예제 -> VSCode 설정 (code/ prettier) 들이 존재

data Fetching

• fast refresh / slug / api ?

화면에 무엇인가 그리려면 결국 어디선가 Data를 가져와야함

data fetching 방법

• SSR
• CSR
• SSG
• ISR

SSR (Server Side Render)

서버가 그린다
그린다 : 데이터를 가져와서 그린다

서버가 그린다 : 서버가 데이터를 가져와서 그린다.

SSR을 담당하는 함수

getServerSideProps : 서버에서 가져온 데이터를 props로 지정할수 있게 해주는 함수

CSR (Client Side Render)

클라이언트가 그린다

그린다 : 데이터를 가져와서 그린다

클라이언트가 그린다 : 클라이언트가 데이터를 가져와서 그린다

CSR을 담당하는 함수는 딱히 없고 기존 리액트 사용법과 동일

SSG (Static-Site Generation)

정적인 사이트를 생성한다

생성한다 : 데이터를 가져와서 그려둔다

정적인 사이트를 생성한다 : 정적인 사이트를 가져와서 그려둔다

데이터는 누가 가져옴?

SSG을 담당하는 함수

getStaticProps (with getStaticPaths)

개발 환경에서는 제대로 동작하지 않고, 확인을 위해서는 build를 진행해준 다음에 실행해서 확인해봐야한다. 왜냐하면 build를 통해서 만들어진 정적 페이지를 저장해놓고 있다가 그대로 보여주기만 하는 것이다.

따라서 데이터를 가져오는 주체는 바로 build하는 builder이다.

이런게 왜 필요할까? 실시간 데이터가 업데이트 된다고 해도 이미 저장된 데이터를 보여주는 방식이어서 변화를 보여줄수도 없는데?

실시간으로 서버에서 데이터를 가져온다고 치면, 여러사람들이 서비스를 이용하게 될때 부하가 생길수 있다. 만약에 실시간으로 업데이트될 필요성이 없는 정적인 요소들만 사용자에게 보여줄 필요가 있는 서비스를 만들어야할 때, 굳이 SSR,CSR을 보여줄 필요가 없이 빌드해서 만들어놓은 페이지를 보여줄수 있으면 부하가 더 줄어들 수 있다는 것이다.

ISR (Incremental Static Regeneration)

증분 정적 사이트를 재생성한다

재생성한다 : (특정 주기로) 데이터를 가져와서 다시 그러둔다

증분 정적 사이틀르 재생성한다 : (특정 주기로) 정적인 사이트를 데이터를 가져와서 다시 그려둔다

ISR 을 담당하는 함수

getStaticProps with revalidate

Layouts - Pages - Image

Pages

next 앱을 생성하면 pages 라는 폴더가 있는데 그곳에 작성한 파일의 이름이 path 가 되는 방식이다.

pages/index.js => /
pages/ssg.js => /ssg
pages/products/[slug].js => /products/*

(js,jsx,ts,tsx)

Pre-render 를 해두면 Client 처럼 동작하지 않는 검색엔진에게 필요한 데이터를 제공할 수 있다.

CSR만 제공하게 된다면 client 처럼 동작하지 않는 검색엔진의 경우 아무런 데이터도 조회해갈수 없다.

Next.js 의 Pre-rendering 방식?

SSG & SSR

SSG 는 빌드타임에 pre-render (서버의 부하가 덜함)

SSR 은 요청타임에 pre-render

SSG 2가지 상황

• Page의 내용물이 외부 데이터에 의존적인 상황
• Page Paths 까지 외부 데이터에 의존적인 상황

첫번째는 getStaticProps만 가지고도 가능
두번째는 getStaticPaths도 함께 활용해야 가능

Layouts

여러 Page들의 공통처리

components/Layout.js

컴포넌트 하나를 pages/_app.js에서 활용하면됨

여거래의 Layouts을 활용하고 싶다면 components/SubLayout.js

Page.getlayout에 getLayout 함수를 제공

Images

Next.js 가 제공하는 최적화 Image Component

• Improved Performance
• Visual Stability(CLS - Cumulative Layout Shift 방지)
• Faster Page Loads (viewport 진입시 로드 / blur 처리)
• Asset Flexibility (리사이징)