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. 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..