[Next.js] Rendering

Rendering

 

JavaScript 를 이용해서 HTML 을 만드는 행위로, 기존 SPA 를 만들 때 사용하던, CSR 의 rendering 표현에 가깝다.

 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// JSX의 동작 -> Javascript로 HTML 태그를 만든다.
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

---

 

Pre-rendering

Client 에 HTML 이 이미 로드가 된 이후가 아닌, 이전에 JavaScript 를 이용해 HTML 을 만드는 것을 말한다. 

언제 HTML 을 만드느냐에 따라서, SSR (Server Side Rendering), SSG (Static Site Generation) 으로 나뉜다.

 

Next.js 는 기본적으로 모든 코드가 Pre-rendering 됨

 

SSR (Server Side Rendering) : Runtime 할 때 rendering.

SSG (Static Site Generation) : Build 할 때 rendering.

 

Pages Router : 자동으로 정적으로 렌더링 된다.

App Router : 기본적으로 서버 컴포넌트로 취급된다. 

 

---

 

1. CSR (Client Side Rendering)

 

브라우저에서  HTML 파일을 로드하면, 자바스크립트를 이용해 렌더링하는 방식. (ReactDom.render)

 

 

2. SSR (Server Side Rendering)

 

브라우저에서 해당 페이지에 접속하면, 그순간 서버에서 html 을 렌더링해서 전달하는 방식.

페이지를 요청할때마다 렌더링하기 때문에 오래 걸린다.

 

3. SSG (Static Site Generation)

 

SSR 의 경우, 페이지를 요청할 때 마다 서버에서 렌더링한다. 정적인 페이지는 빌드할 때 렌더링하고, 페이지를 요청할 때 마다 이미 렌더링 된 페이지를 반환.

 

4. ISG (Incremental Static Regeneration)

 

SSG 의 단점은, 컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없음. 이를 보완하기 위해 일정 주기마다 페이지를 빌드시켜주는 ISR 이 있음. 

 

---

SEO

 

SEO(검색 엔진 최적화)는 "Search Engine Optimization"의 약자로, 웹 사이트나 웹 페이지가 검색 엔진에서 더 높은 순위로 나타날 수 있도록 최적화하는 프로세스. 쉽게 말해, 검색 엔진에서 특정 키워드나 주제와 관련된 내용을 검색할 때, 여러 웹 페이지 중에서 상위에 나타나는 것을 목표로 한다. 초기 HTML 이 비어있는 CSR 의 경우, SEO 가 나쁘다고 할 수 있음. 

 

---

 

비교

 

 

	CSR	SSR	SSG	ISR
빌드 시간	짧다	짧다	길다	길다
SEO	나쁨	좋음	좋음	좋음
페이지 요청에 따른 응답시간	보통	길다	짧다	짧다
최신정보인가 ?	맞음	맞음	아님	아닐수 있음