Web Application Rendering 전략

SPA(Single Page Application) (2005)

클라이언트인 브라우저가 렌더링을 처리하는 방식
- HTML 문서에는 body 태그 안이 텅텅 비어있고, 서버에서 JS파일을 받아서 이를 채워주는 방식
새로고침이 발생하지 않아 화면 전환이 매끄럽고 서버 트래픽을 감소시킨다는 장점
첫화면에서 HTML, CSS, JS가 모두 다운로드 되므로 첫 페이지 로딩 시간이 길고, SEO에 SSR보다 불리하다는 단점

최근에는 Next.js와 같은 프레임워크를 사용하면 서버 컴포넌트와 클라이언트 컴포넌트를 함께 사용할 수 있어 SSR과 CSR의 장점을 모두 살릴 수 있다.

Next.js는 기본적으로 모든 페이지를 사전 렌더링(Pre-rendering)한다.
따라서 미리 HTML 파일을 만들어두어 더 좋은 퍼포먼스를 제공하고, 검색엔진최적화(SEO)에 이점이 있다.
next.js는 두 가지 사전 렌더링 방법을 제공한다.
- Static Site Generation(SSG)
- Server Side Rendering(SSR)
이 두 가지는 언제 HTML 파일을 생성하는지에 차이점이 있다.

Next.js의 SSR, SSG, ISR은 Fetch에 어떤 옵션을 주느냐에 따라 다르게 동작한다.
기본적으로 fetch에 아무런 옵션을 주지 않으면 자동으로 무기한 캐시한다. (SSG, ‘force-cache’)
- fetch('https://...')
fetch에 옵션으로 { cache: ‘no-store’ } 를 주면 SSR로 동작한다. (SSR, 동적 데이터)
- fetch('https://...', { cache: 'no-store' })
타임 인터벌에 따라 캐시된 데이터를 재검증하려면, fetch()에서 next.revalidate 옵션을 사용하여 리소스의 캐시 수명(초 단위)을 설정할 수 있다. (ISR)
- Time-base revalidation과 On-demand revalidation이 존재
- fetch('https://...', { next: { revalidate: 10 } })
- On-demand revalidation
```
export default async function Page() {
    const res = await fetch('https://...', { next: { tags: ['collection'] } });
    const data = await res.json();
    // ...
}
```
그러나 각 layout.tsx에서 dynamic 옵션을 설정하면 이 옵션을 완전히 동적이거나 완전히 정적으로 바꿀 수 있다.

export const dynamic = 'auto';
// 'auto' | 'force-dynamic' | 'error' | 'force-static'`