Next.js에서는 기능, 페이지 등 상황에 따라 CSR, SSR, SSG 등 데이터를 어떤 방법으로 가져올 지를 선택하는 것이 중요하다.리액트는 CSR을 기본으로 데이터를 패칭하였다. 이는 페이지 로드 시 초기 HTML은 빈 상태로 제공되고, 브라우저에서 JS가 로드된 후 클라이언트에서 데이터를 가져와 렌더링한다. 하지만 이 방식은 서버에서 HTML이 미리 렌더링되지 않기 때문에 SEO에 불리할 수 있다. 또한 네트워크 요청 이후 화면에 데이터가 표시되기 때문에 초기 로딩이 느릴 수 있다. 반면 Next.js는 CSR, SSR, SSG 등 다양한 렌더링 방식을 제공한다. 따라서 SEO가 중요하고 초기 로딩 성능이 중요한 경우 SSR이나 SSG를, 실시간 데이터가 필요한 경우에는 CSR 등 상황에 따라 ..
Next.JS는 CSR인 React를 SSR 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 01. CSR과 SSR#1. CSR모든 렌더링이 클라이언트에서 발생한다.초기 HTML은 거의 비어있고, 브라우저는 JavaScript를 로드하여 UI를 빌드한다.자바스크립트를 비활성화하면 UI가 렌더되지 않는다. #2. SSRNext.JS는 기본적으로 SSR 방식을 사용한다.모든 페이지와 컴포넌트가 서버에서 먼저 렌더링되고, 그 결과가 HTML로 변환되어 브라우저에서 전송된다.이렇게 전송된 HTML은 정적이므로 자바스크립트를 활성화하지 않아도 UI가 보인다.페이지를 이동할 때마다 서버에서 새 HTML을 받아오고, 브라우저에서 UI를 즉시 표시한다.서버는 렌더링을 끝마친 HTML파일을 응답으로 보내며, 클라이언..
렌더링은 브라우저 화면에 웹페이지를 그리는 것이다.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 등 상황에 따라 ..
Front-End/Next.js 2024. 10. 8. 12:00
Next.JS는 CSR인 React를 SSR 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 01. CSR과 SSR#1. CSR모든 렌더링이 클라이언트에서 발생한다.초기 HTML은 거의 비어있고, 브라우저는 JavaScript를 로드하여 UI를 빌드한다.자바스크립트를 비활성화하면 UI가 렌더되지 않는다. #2. SSRNext.JS는 기본적으로 SSR 방식을 사용한다.모든 페이지와 컴포넌트가 서버에서 먼저 렌더링되고, 그 결과가 HTML로 변환되어 브라우저에서 전송된다.이렇게 전송된 HTML은 정적이므로 자바스크립트를 활성화하지 않아도 UI가 보인다.페이지를 이동할 때마다 서버에서 새 HTML을 받아오고, 브라우저에서 UI를 즉시 표시한다.서버는 렌더링을 끝마친 HTML파일을 응답으로 보내며, 클라이언..
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..