ASO (in page route)
Rendering: Automatic Static Optimization
Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.
페이지 라우터일 때도 Automatic Static Optimization 이란 개념이 있었다.
CSR 컴포넌트여도 서버에 요청했을 때 해야하는 그러니까 “동적인 요소”가 없다면 static한 요소라고 판단한다.
그리고 build time에 static한 initial html을 뽑아낸다.
판단 기준은 prerendered 될 수 있는 지 이고, 다시말해 blocking data가 요구되는 지를 뜻한다.
CSR일 지라도 build time에 모두 데이터가 결정된 상태라면 이건 static 한 것이고, 따라서 초기 html을 만들 수 있다.
on-demand 또는 per-request 가 있다면 blocking data가 있는 것.
i.g. getServerSideProps, getInitialPropsGood to know: Statically generated pages are still reactive. Next.js will hydrate your application client-side to give it full interactivity.
CSR은 상호작용이 필요한 요소인 경우가 많은데, static 하게 빌드되면 문제가 되는 것이 아닐까?
이 부분은 하이드레이션을 통해 자바스크립트가 활성화 되며 상호작용이 활성화 된다.
따라서 걱정할 필요 없다.
불필요한 서버 연산을 줄이고, 초기 로딩 속도를 빠르게 하는 등 static의 이점을 챙길 수 있다.
Static and Dynamic
ASO 문서가 app route로 오면서 도큐먼트에서 사라졌다. 그 최적화 개념이 사라진 건 아니다.