인증 패턴을 이해하기위해서는 Next.js에서 제공하는 있는 데이터 패칭 전략에 대한 이해가 선행되어야 합니다. 데이터 패칭 전략에 따라 다른 패턴을 적용할 수 있기 때문입니다.
대표적으로 두 가지 패턴으로 분류할 수 있습니다.
Next.js Two of pre-rendering
기본적으로 Next.js는 모든 페이지를 pre-render 합니다. 즉, Next.js 는 모든 HTML 페이지를 미리 생성합니다. (클라이언트 사이드 JavaScript를 실행되기 전에 생성됩니다.). pre-rendering의 이점으로 SEO 성능을 향상 시킬 수 있습니다.
생성 된 모든 HTML은 페이지에 필요한 최소 단위의 JavaScript만을 가지고 있습니다. 브라우저에 해당 페이지가 로드되면, JavaScript가 실행되고 모든 페이지는 상호작용을 가지게 됩니다. (이 프로세스를 하이드레이션이라고 합니다.
Next.js는 두 가지 pre-rendering 방식으로 제공합니다.
Static Generation (recommended)
— HTML이 빌드 타임에 생성됩니다. 빌드된 HTML은 CDN에 캐싱되며, 매 요청시에 재사용됩니다.
Server Side Rendering
— HTML이 매 요청시 생성됩니다.
일반적으로 Static Generation 방식시 Server-side 보다 성능 측면에서 유용합니다. Static하게 생성된 페이지들은 CDN에 캐시되어 다른 설정 없이도 부스트 되는 성능을 보여줍니다. 하지만, 어떤 케이스에서는 Server Side Rendering을 사용할 수 밖에 없습니다.
Static Generation, Server Side Rendering에서도 Client 데이터 패칭은 모두 사용할 수 있습니다. 어떤 페이지들은 클라이언트의 JavaScript로 모두 렌더링되기 때문입니다. 클라이언트 데이터 패칭은 주로 1. SEO 인덱싱이 필요 없거나 2. 데이터를 pre-render 할 필요 없거나, 3 데이터 패치가 자주 일어나는 경우(서버사이드 렌더링 api와 달리)입니다. 페이지 레벨에 있지 않다면 컴포넌트 레벨 단위에서 마운트되는 시점에 데이터가 패치되므로 클라이언트 사이드 패치입니다. 이 데이터들을 캐시되지 않습니다.