Nextjs 기억하기(2)

이경준·2021년 4월 16일
0

Nextjs

목록 보기
2/2

Nextjs에 대해서 조금 더 자세히...

nextjs는 SSR을 제공하는 React프레임워크라고만 알고있었다. 그러나 Nextjs에는 SSG라는 추가개념이 있었다. 그렇다면 ssg는 ssr과 무엇이 다른가?

SSR의 시작

최초의 렌더링시점으로 거슬러가보면 파일은 HTML만 존재했으며, 매우 가벼웠기때문에 매 요청마다 static한 html파일이 서버에서 클라이언트에게 전달되었지만 시간이 지날수록 동적인 페이지가 추구되었다.

CSR의 시작

SSR의 문제는 전체 리로딩이었다. 당시 기술력으로는 매번 업데이트되어야하는 파일에는 DATA요청시마다 새로고침이 되었고 깜빡임 현상을 피할수 없었다.
그리하여 CSR이라는 기술이 생겼으며, Facebook의 React, Google의 Angular, 개인의 Vue와 같은 SPA가 호황을 맞았다.

SSG의 시작

CSR은 SEO와 성능문제가 있었다.

SEO는 웹 크롤러가 웹 사이트를 읽고 인덱싱하는 과정을 거치며 웹 페이지가 검색 엔진에 노출될 수 있게 하는데, SPA에서는 사용자의 클릭에 따라 동적으로 JS를 이용해 페이지를 생성하므로 검색 엔진 최적화가 힘들었다.

성능 문제
페이지를 렌더링하기 위해서는 브라우저가 Js를 실행하고 그를 감당할만한 cpu 기기가 필요했다.

그러나 매번 같은페이지를 새로 리턴하는 SSR 또한 비효율적이었다.

SSG는 페이지가 사용자와 상호작용해서 데이터가 변하지 않는 about과 같은 항상 같은 페이지를 미리 서버에서 생성해서 요청에 따라서 재사용하는 캐싱을 하기 시작했고 이런 방법을 Next에서는 기본적으로 사용한다.

Nextjs는
ssr권장
-표시된 데이터가 항상 최신의 데이터일 때
-자주 변경할 수 있는 사용자별 혹은 동적 데이터 일 때,

ssg권장
-정적인 정보를 항상 보여주는 페이지일 때
-상호작용 데이터가 존재하지 않을 때.

profile
내가 기억하기위한 블로그

0개의 댓글