[NextJs] SSR vs SSG vs ISR

SSR : Server Side Rendering
the function getServerSiedProps is called on every request, rather than just at build time.

SSG : Static Site Generation
Every static page should export a getStaticProps function. The function is invoked at build time, and the returned props are forwarded to the React component as props. In this example, we call our remote API endpoint and return its response.

ISR : Incremental Static Regeneration
Using ISR is much like SSG with an additional revalidate property. This new property states how often to revalidate the page (in seconds)

SSR example : React Component + getServerSideProps

SSG example : React Component + getStaticProps + getStaticPaths

export async function getStaticProps() {
  const res = await fetch('https://...');
  const data = await res.json();

  return { props: { data } };
}

ISR example : React Component + getStaticProps + getStaticPaths

export async function getStaticProps() {
  const res = await fetch('https://...');
  const data = await res.json();

  return { props: { data }, revalidate: 60 };
}

we’re saying that we want Next.js to rebuild our page(s) at most every 60 seconds.

So in reality, it looks like:

Site builds and responds to user with static files from build
If less than 60 seconds, Next.js will respond to use with static files from build
If after 60 seconds, Next.js will first respond to a user with the static files from build, but additionally trigger a refresh of the page in the background
Next.js will now respond to users with the refreshed page

isFallBack props

Detecting fallback mode is as easy as using React Hooks.

const { isFallback } = useRouter();

Performance aspect of ISR, SSG, and SSR

SSR 경우
서버에서 data fetch 시간이 너무 길어지면 사용자 경험(UX)에 부정적임.
추천: Fetch data that is required for meta tags only.

올바른 메타 태그는 사용자가 사이트 링크를 공유했을때 (OG Tag) 올바르게 표현
SEO Search Engine Optimization에 유리함.

SSR and ISR 경우
ISR을 사용할 경우, fallback state가 존재하기 때문에, 페이지 첫 로딩 화면 드로잉 및 로딩 시간은 UX에 영향을 주지 않는다.