Next.js에서는 기능, 페이지 등 상황에 따라 CSR, SSR, SSG 등 데이터를 어떤 방법으로 가져올 지를 선택하는 것이 중요하다.리액트는 CSR을 기본으로 데이터를 패칭하였다. 이는 페이지 로드 시 초기 HTML은 빈 상태로 제공되고, 브라우저에서 JS가 로드된 후 클라이언트에서 데이터를 가져와 렌더링한다. 하지만 이 방식은 서버에서 HTML이 미리 렌더링되지 않기 때문에 SEO에 불리할 수 있다. 또한 네트워크 요청 이후 화면에 데이터가 표시되기 때문에 초기 로딩이 느릴 수 있다. 반면 Next.js는 CSR, SSR, SSG 등 다양한 렌더링 방식을 제공한다. 따라서 SEO가 중요하고 초기 로딩 성능이 중요한 경우 SSR이나 SSG를, 실시간 데이터가 필요한 경우에는 CSR 등 상황에 따라 ..
렌더링은 브라우저 화면에 웹페이지를 그리는 것이다.CRP(Critical Rendering Path)는 브라우저과 화면에 HTML, CSS, JS를 그리는 과정이며, 아래와 같은 과정으로 수행된다.Dom TreeCSSOM TreeRender TreeLayoutPaint(Repaint)이때 (1)~(3)과정을 construction 과정이라 부르며, (4)~(5)는 Operation 과정이라 부른다.우리가 작성한 코드는 렌더링에 직접적으로 영향을 미치기 때문에 알아야 한다.예를 들어, 웹페이지에서 특정 요소를 안보이게 하고 싶을 때, display: none을 사용하면 Tree를 만드는 Construction 과정부터 Operation 과정까지 수행되어 비효율적이다. 하지만 opacity: 0나 visib..
Front-End/Next.js 2024. 11. 18. 22:00
Next.js에서는 기능, 페이지 등 상황에 따라 CSR, SSR, SSG 등 데이터를 어떤 방법으로 가져올 지를 선택하는 것이 중요하다.리액트는 CSR을 기본으로 데이터를 패칭하였다. 이는 페이지 로드 시 초기 HTML은 빈 상태로 제공되고, 브라우저에서 JS가 로드된 후 클라이언트에서 데이터를 가져와 렌더링한다. 하지만 이 방식은 서버에서 HTML이 미리 렌더링되지 않기 때문에 SEO에 불리할 수 있다. 또한 네트워크 요청 이후 화면에 데이터가 표시되기 때문에 초기 로딩이 느릴 수 있다. 반면 Next.js는 CSR, SSR, SSG 등 다양한 렌더링 방식을 제공한다. 따라서 SEO가 중요하고 초기 로딩 성능이 중요한 경우 SSR이나 SSG를, 실시간 데이터가 필요한 경우에는 CSR 등 상황에 따라 ..
ASAC/웹 기초 프로그래밍 2024. 8. 13. 17:22
렌더링은 브라우저 화면에 웹페이지를 그리는 것이다.CRP(Critical Rendering Path)는 브라우저과 화면에 HTML, CSS, JS를 그리는 과정이며, 아래와 같은 과정으로 수행된다.Dom TreeCSSOM TreeRender TreeLayoutPaint(Repaint)이때 (1)~(3)과정을 construction 과정이라 부르며, (4)~(5)는 Operation 과정이라 부른다.우리가 작성한 코드는 렌더링에 직접적으로 영향을 미치기 때문에 알아야 한다.예를 들어, 웹페이지에서 특정 요소를 안보이게 하고 싶을 때, display: none을 사용하면 Tree를 만드는 Construction 과정부터 Operation 과정까지 수행되어 비효율적이다. 하지만 opacity: 0나 visib..