Rendering 전략

Rendering 종류

Static Site Generation (SSG)

HTML 파일을 빌드타임에 생성하는 pre-rendering 기술이다. 이렇게 미리 생성된 HTML 파일이 요청시 사용된다. 가장 많이 사용되는 방식이며 성능적으로 가장 좋다.

Server-Side Rendering (SSR)

SSG와 마찬가지로 pre-rendering 기술이지만 빌드타임에 생성되는 것이 아닌 요청시 생성된다. SSG와 비교하면 조금 느리지만 요청에 따라 달라질 수 있는 다이나믹한 페이지를 생성할때 필요하다.

Incremental Static Regeneraion (ISR)

페이지의 갯수가 많다면 모든 페이지를 빌드타임에 생성하는것은 시간이 오래걸리고 효율적이지 못하다. ISR을 통해 원하는 만큼의 페이지를 빌드한 다음 배포를 하고 배포 이후에 빌드되지 않은 페이지에 접근한다면 그때 그 페이지를 캐싱해서 저장하는 방식이다. 중요도가 높은 페이지를 먼저 빌드하는것이 좋다. revalidate 옵션을 사용하여 캐싱주기 설정도 가능하다.

Clien Side Rendering (CSR)

브라우저의 자바스크립트를 이용해 렌더링하는 방식이다. content가 없는 빈 HTML파일이 처음으로 렌더링 된 후 자바스크립트가 실행되어 페이지를 채워가는 방식이다. SEO점수를 받기 가장 취약한 렌더링 방식이다. 하지만 통계 대시보드 같은 무거운 작업이나 그래픽이 많이 들어가있는 페이지, 그리고 SEO 적용이 필요 없는 페이지에선 효율적일 수 있다.

Summary

SEO을 잘 활용하기 위해서는 자바스크립트가 실행되기 전부터 컨텐츠와 메타 데이터가 페이지에 존재해야 한다. 이런 점에서 SSG, SSR, ISR 같은 렌더링 전략을 사용하는 것이 best practice이다.

references

Learn | Next.js

Learn | Next.js

Nextjs Isr 시작하기

Nextjs Isr 시작하기