Rendering

Static and Dynamic

Next.js에서의 렌더링방식은 정적으로 렌더링되거나, 동적으로 렌더링되는 방식으로 분화된다.

• static route 에서의 컴포넌트들은 빌트타임때 렌더링되며, 서버통신의 결과물은 재사용을 위해 캐시된다.
• dynamic route 에서의 컴포넌트들은 클라이언트의 요청에 따라 그때그때 서버에서 렌더링된다.

 

Static Rendering

기본적으로 Next.js는 퍼포먼스를 위해 경로들을 정적으로 렌더링한다. 즉, 렌더링의 작업물은 클라이언트가 요청하기전에 이미 준비되어있고, 요청에 의해 즉각 제공되는 방식을 사용하는 것이다. 이 방식은 *CDN을 이용해 이루어진다. 

 

*CDN: 물리적으로 먼 거리일수록 통신속도가 늦어지므로 교차지점에서 자주 이용되는 서버결과물을 캐시해뒀다가 제공해주는 기술

 

 

Static Data Fetching

기본적으로 Next.js는 별도의 옵션설정이 되지 않은 fetch()메서드의 결과물은 모두 캐시한다. 

 

 

Dynamic Rendering

정적 렌더링중에 dynamic function 혹은 캐싱을 하지 않도록 설정한 fetch()메서드가 발견되면 Next.js는 즉시 해당 라우트를 요청에 의해 렌더링하는 동적렌더링으로 전환한다. 다만, 캐시된 데이터는 동적 렌더링중에도 계속 사용될 수 있다.

 

아래의 표에서는  dynamic functions와 caching옵션이 렌더링방식에 미치는 영향을 요약했다.

Data Fetching	Dynamic Functions	Rendering
Static (Cached)	No	Static
Static (Cached)	Yes	Dynamic
Not Cached	No	Dynamic
Not Cached	Yes	Dynamic

dynamic function은 데이터 가져오기의 캐시 여부에 관계없이 '항상' 경로를 동적 렌더링으로 선택한다는 점에 유의하자.

즉, 정적 렌더링은 데이터를 받는 방식뿐만 아니라 경로에 사용되는 동적 함수에 따라 달라진다.

Dynamic Functions

dynamic function은 요청시점에서야 알 수 있는 데이터에 의존한다. 예를들어 사용자의 cookie, 현재 요청헤더, URL의 검색매개변수 등등...

 

서버컴포넌트에서 cookies() 메서드나 headers()메서드를 이용하면 전체 경로가 동적 렌더링으로 선택된다.

클라이언트 컴포넌트에서 useSearchParams()를 사용하면 정적 렌더링을 건너뛰고 대신 클라이언트에서 가장 가까운 상위 서스펜스 경계까지 모든 클라이언트 컴포넌트를 렌더링합니다. 따라서 useSearchParams()를 사용할 경우 사용하는 클라이언트 컴포넌트를 <Suspense/>경계로 감싸주는 것이 좋다. 이렇게 하면 경계바깥의 클라이언트 컴포넌트는 정적으로 렌더링될 수 있기 때문이다.

searchParams을 사용하는 페이지 prop을 사용하면 동적렌더링으로 설정된다.

Dynamic Data Fetching

dynamic data fetches란 캐시 옵션을 'no-store' 혹은 revalidate옵션을 0으로 설정한 fetch()메서드이다.