Home

안녕하세요 :)

해당 페이지에서는 Next.js + Notion Blog Starter Kit가 어떤식으로 작동되는지 설명합니다.
바로 시작하시려면 다음 링크로 이동해주세요. >>>> 시작하기 <<<<

🔎 자세한 동작 방식을 알고 싶어요

기본적인 동작은 next.js의 ISR 방식으로 페이지가 생성됩니다.
배포(빌드)후에도 노션에서 페이지를 생성 또는 수정해도 자동으로 반영됩니다.

Notion API?

노션의 정보를 가져오는 API는 공식 API가 아닌 실제 노션 페이지에서 요청하는 API를 가져와서 사용했습니다.

아 물론 댓글 기능은 Notion 공식 API를 사용한게 맞습니다 :)

배포(빌드) 후 노션에서 새로 페이지를 만들면 어떻게 되나요?

1. 새로 만든 페이지 접속시 정적 페이지가 생성된 것이 없으므로 router.isFallback이 활성화 되며 로딩 효과가 표시
2. getStaticProps 함수에서 노션 루트 페이지 id를 기준으로 모든 페이지를 가져옴
3. 2번 작동으로 노션 사이트맵 객채가 생성되고 접속한 주소가 사이트맵에 있는지 확인 (없으면 404 처리)
4. 사이트맵에 있다면 해당 주소와 일치하는 노션 페이지 id를 기준으로 페이지 정보를 불러옴
5. 페이지 정보가 불러와졌다면 router.isFallback 이 false가 되며 로딩 효과 사라짐 및 새로운 정적 페이지 표시

배포(빌드) 후 노션에서 페이지를 수정하면 어떻게 되나요?

1. 수정된 페이지 접속시 getStaticProps 함수 반환값인 revalidate: 10 에 의해 마지막으로 접속한 유저 기준으로 10초가 지났다면 getStaticProps 함수 백그라운드로 실행 (접속한 유저는 이전 버전의 페이지를 보게됨)
2. getStaticProps 함수에서 노션 루트 페이지 id를 기준으로 모든 페이지를 가져옴
3. 2번 작동으로 노션 사이트맵 객채가 생성되고 접속한 주소가 사이트맵에 있는지 확인 (없으면 404 처리)
4. 사이트맵에 있다면 해당 주소와 일치하는 노션 페이지 id를 기준으로 페이지 정보를 불러옴 (최신 버전 정보)
5. 페이지 정보가 불러와졌다면 정적 페이지가 생성되며 이미 접속한 유저는 이전 버전의 페이지가 보여지지만 이후 접속한 유저(이미 접속한 유저의 새로고침 액션도 포함)는 생성된 최신 버전의 정적 페이지가 표시됨