Next js 장점 (React 프레임워크의 확장)

초기 로딩 시 클라이언트 사이드 렌더링을 사용하면, 브라우저에서 JavaScript를 다운로드하고 실행하여 페이지를 동적으로 렌더링합니다. 이로 인해 초기 로딩 속도가 느릴 수 있습니다.

반면에 서버 사이드 렌더링을 사용하면, 서버에서 페이지를 렌더링한 후에 브라우저에 전달합니다. 사용자는 초기에 렌더링된 페이지를 받아 볼 수 있기 때문에 초기 로딩 속도가 빠릅니다. 이는 특히 동적 데이터가 많이 사용되는 페이지에서 유용하며, 검색 엔진 최적화 및 성능 향상에 기여합니다. Next.js는 서버 사이드 렌더링 및 정적 사이트 생성을 편리하게 사용할 수 있도록 도와주는 프레임워크로 이러한 이점을 제공합니다.



자바스크립트 다운로드는 초기 로딩 시간에서 중요한 부분을 차지합니다. React만 사용할 때는 클라이언트 측에서 자바스크립트를 다운로드하고 실행하므로 초기 로딩 속도가 느릴 수 있습니다.

Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(Static Site Generation, SSG)과 같은 기능을 추가하여 초기 로딩 속도 및 성능을 최적화합니다. Next.js를 사용하면 서버 사이드 렌더링이나 정적 사이트 생성을 통해 브라우저에서 자바스크립트를 다운로드하는 부분을 최소화할 수 있어 초기 로딩 속도를 향상시킬 수 있습니다. 따라서, Next.js를 통해 서버에서 시작하는 방식은 초기 로딩 성능 측면에서 이점을 가질 수 있습니다.


동적인 기능 담당- 자바스트립트

일반적으로 브라우저는 초기에 HTML과 CSS를 받아서 페이지의 레이아웃을 그린 후, 동적인 기능을 담당하는 자바스크립트 파일을 다운로드하고 실행합니다. 이것은 클라이언트 측에서 자바스크립트를 다운로드하는 과정이며, 이후에 자바스크립트가 페이지를 동적으로 조작하고 업데이트할 수 있게 됩니다. 이런 과정을 통틀어 "클라이언트 측 렌더링"이라고 합니다.