Next.js 로 최근 SSR에 대한 부분을 홈페이지도 만들어보고 빌드도 해보면서 GatsBy에 대해 알게 되었고, 뭔가 정리해보고 싶은 부분을 정리해보아야겠다.
우선 Gatsby에 대해 설명하자면,
- Gatsby는 리액트 기반의 웹사이트 생성 도구이다.
- Gatsby에서 제공하는 API를 사용하면 리액트(React) 컴포넌트 방식으로 빠르게 웹사이트를 구축할 수가 있다.
- 또한 GraphQL을 백엔드로 둘 수 있어서 많은 양의 콘텐츠를 가진 웹사이트라도 쉽게 빌드할 수 있다는 장점을 제공한다.
Gatsby에서 사용할 수 있는 렌더링 옵션
- SSG 방식: Static Site Generation
- 빌드 시점에 HTML 파일이 생성되며, 매 요청마다 재사용된다.
- 정적 페이지 기반 웹사이트를 만들어주는 도구로서 콘텐츠와 파일을 읽고 이를 html으로 적절히 변환해 주는 기술
- CDN으로 캐싱되어 사용
- DSG 방식: Deferred Static Generation
- 개념적으로 SSG와 유사
- 사용자가 처음 요청할 때까지 특정 페이지 빌드를 연기하도록 선택할 수 있다는 것
- 사용자들이 자주 방문하지 않는 페이지라든가 아니면 오래된 아카이브 같은 경우는 굳이 빌드 타임마다 매번 빌드를 해주는 대신, 빌드 시점을 지연(defer) 시킬 수 있다.
- 대신 사용자가 처음으로 페이지를 방문하는 순간 렌더링이 일어나게 됨
- 사용자가 자주 방문하지 않는 오래된 페이지들에 적용하면 사이트 빌드 시간도 줄이면서 페이지 액세스 속도도 유지하는 중용
- SSR 방식: Server-Side Rendering
- 매번 웹 요청 시마다 서버측에서 HTML을 렌더링하는 전통적인 웹 렌더링 방식
- 사용자 인증이 필요한 커스텀 페이지나 A/B 테스트 등이 필요한 페이지 같은 자주 갱신될 필요가 있는 페이지는 SSR 방식으로 지정
Next.js 의 ISR (Incremental Static Regeneration) 에 대한 정리
ISR과 On-demand revlidation을 이용하면 정적생성으로도 사용자에게 실시간으로 업데이트된 페이지를 제공할 수 있다.
Next.js 의 렌더링 방식
-
CSR (클라이언트 사이드 렌더링) : useEffect훅을 이용하거나, SWR 같은 상태관리 툴을 이용해 렌더링의 책임을 사용자에게 전가하는 것. 화면 로딩이 사용자 눈에 보여 사용자 경험을 감소시키는 단점이 있다
-
SSR (서버사이드 렌더링) : 렌더링의 책임이 프론트엔드 서버에게 주어지며, 웹사이트 사용자가 접속할때마다 새로운 페이지를 생성해내는 방식. 매번 최신 정보를 유지해야한다면 좋은 방식이긴 하지만, 성능상 이슈가 있고 화면 깜빡임 현상이 있다.
-
SSG (정적 생성) : 렌더링의 책임이 역시 프론트엔드 서버에게 주어지지만, 프론트엔드 build 시간에 미리 화면에 대한 HTML을 미리 생성하여 사용자에게 미리 만들어진 화면을 제공한다. 이를 통해 성능상의 이점은 챙길 수 있으나, 미리 생성된 페이지를 제공하는 방식 이기 때문에 페이지 내 데이터가 변화하더라도 변화된 내용들을 전혀 제공해주지 못한다.
ISR이란?
Next.js allows you to create or update static pages after
you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
Next.js를 사용하면 다음 시간 이후에 정적 페이지를 만들거나 업데이트할 수 있습니다.
당신은 당신의 사이트를 구축했습니다. ISR(Incremental Static Regeneration)을 사용하면 전체 사이트를 재구성할 필요 없이 페이지 단위로 정적 생성을 사용할 수 있습니다. ISR을 사용하면 수백만 페이지로 확장하면서 정적 기능의 이점을 그대로 유지할 수 있습니다.
즉, 정적생성으로 미리 만들어놓은 사이트들도 필요하다면 업데이트가 가능하다는 이야기, 정적생성의 장점을 취하되 단점을 보완할 수 있게 되는 것
On-demand Revalidation 이란?
-> 필요할 때 Revalidation을 설정하여 업데이트 시기를 설정할 수 있다.
- 데이터베이스 내 데이터가 업데이트 된다.
- 프론트엔드에게 API 통신을 통해 Revalidation 이 필요함을 알린다.
- 이를 통해 업데이트가 필요한 페이지 컴포넌트들을 Revalidate를 한다.
