Next.js의 프리렌더링과 SSR

[suneunkim]

Next.js로 만든 웹 애플리케이션은 서버사이드렌더링이 가능하고, 그렇기에 검색 엔진 최적화 기능이 react에 비해 유리합니다. 검색 엔진 최적화를 해주는 프리렌더링과 서버사이드렌더링이 언제 해당이 되는 건지 헷갈려서 찾아보았습니다.

Q. Next로 만든 프로젝트에서 서버 데이터 페칭 함수(ex. getServerSideProps)를 사용하지 않으면 서버사이드렌더링이 아닌것이고, 검색엔진 최적화에도 도움이 안되는 것일까요?

제가 궁금한 것을 찾아본 결과를 먼저 말씀드리면 get~ 으로 시작하는 Next가 제공하는 서버측 데이터 페칭 함수를 사용하지 않아도 Next는 프리렌더링으로 각 페이지에 대한 HTML을 생성하기에 react에 비해서 검색엔진최적화에 유리합니다.

Next는 기본적으로 모든 페이지에 프리렌더링을 수행하고, 자바스크립트가 로드 되기 전에도 페이지의 HTML이 렌더링 되어 검색 엔진이 크롤링할 수 있습니다.

물론 데이터를 가져오는 작업을 서버에서 렌더링 하지 않는다면 동적 데이터는 검색 엔진에 인덱싱 되지 않을 수 있습니다.

정리하자면 Next는 기본적으로 정적 페이지를 생성해주고, SSR은 개발자의 선택사항입니다.

Next는 페이지에 사용할 사전 렌더링 양식을 선택할 수 있게 해줍니다. 서버 사이드 렌더링(SSR)은 요청이 생기면 HTML을 생성하고 정적 페이지 생성(SSG)은 빌드 시 HTML이 생성됩니다.

서버 측에서 동적 데이터를 렌더링 하는 시점을 빌드 타임에 하고 싶다면 SSG, 런타임 때 해야한다면 SSR를 사용할 수 있습니다.

제가 잘못 알고있는 정보가 있다면 알려주시길 부탁드립니다~!