Rendering.. SSG/ISR/SSR/CSR

 

⭐기본적으로 app 폴더 하위의 모든 컴포넌트는 서버컴포넌트에요.⭐

 

• (1) SSG(Static Site Generation)SSG는 빌드타임(build-time) 때만 컴포넌트를 생성하고, 이후는 변하지 않는 페이지로 가정하여 static 컴포넌트를 제공하는 것을 말합니다. 그리고 Next.js는 아-무것도 하지 않으면 기본적으로 SSG로 동작합니다.
• fetch한 데이터는 영원히 변치 않아요. 계속 컴포넌트를 갱신할 필요가 없어요.
• (2) ISR(Incremental Site Regeneration)ISR은 빌드타임(build-time) 때 컴포넌트를 초기 생성하고, 이후는 일정 주기마다 변화를 적용하여 컴포넌트를 제공하는 것을 말합니다.
• fetch한 데이터는 가끔 변해요. 일정 주기마다 가끔씩만 컴포넌트를 갱신해줘요.
• (3) SSR(Server Side Rendering)SSR은 빌드타임(build-time) 때 컴포넌트를 초기 생성하고, 이후 컴포넌트 요청이 있을 때 마다 변화를 적용하여 가장 최신의 데이터를 user에게 제공합니다.
• fetch한 데이터는 실시간으로 계속 바뀌어요. 컴포넌트 요청이 있을 때 마다 데이터를 갱신해서 최신 데이터만 제공해야 해요.
• (4) CSR(Client Side Rendering)CSR은 빌드타임에 컴포넌트를 초기 생성하진 않아요. Javascript로 이루어진 리액트 파일을 다운로드 받고 그제서야 화면이 그려지게 돼요.
• fetch한 데이터는 실시간으로 계속 바뀌어요. 컴포넌트 요청이 있을 때 마다 데이터를 갱신해서 최신 데이터만 제공해야 해요.

 

개인적인 의견 

SSG: 아무리 갱신을해도 바뀌지않는 데이터

• 아무리 새로고침을 하여도 동일한 페이지만 출력됩니다.

 

 

ISR: 일정한 주기마다 데이터를 가져오는것

• 주어진 시간에 한 번씩 갱신해줍니다.

 

 

SSR:요청할때마다 새로운 데이터를 가져와준다

• 요청이 있을 때 마다 지속해서 갱신해줍니다.
• hydration이 완료되기 전까지의 시간. 즉, TTI(Time To Interactive)가 관건입니다.

 

 

CSR:데이터가 많을때 로딩중을 표현할수있는것

• 요청이 있을 때 마다 지속해서 갱신해줍니다.
• client side rendering이기 때문에, loading에 관련된 state 제어를 통해 사용자에게 알려줄 수 있습니다.