Next.js 12 - Static Pre Rendering

Next.js 12

 

⚫ Static Pre Rendering이란?

---

- 앱에 있는 페이지들이 미리 렌더링 되는 것(Next.JS의 가장 좋은 기능 중 하나)

  정적(static)으로 생성된다.

 

Create-React-App VS Next.JS

- Create-React-App: Client-Side-Rendering(CSR), render 되는 것들이 HTML 소스코드에 포함되어 있지 않다.

  (noscript 태그는 브라우저에서 자바스크립트가 비활성화 되었을 때만 나온다)

- Next.JS: Server-Side-Rendering(SSR), render 되는 것들이 HTML 소스코드에 포함되어 있다.

 

⚫ Hydration이란?

---

- 먼저 초기 상태의 HTML 소스코드를 render하고, React.JS가 클라이언트로 전송됐을 때, React.JS 앱처럼 사용 되는 것

  (React.js를 프론트엔드 안에서 실행하는 걸 의미)

 

- Next.JS는 React.JS를 백엔드에서 동작 시켜서 페이지를 미리 만들고, 만들어진 HTML을 Next.JS가 페이지의 소스코드에 넣어준다.

  그 다음 React.JS가 로딩이 되면, 일반적인 React.JS 앱처럼 동작한다.

 

- 이 기능이 SEO(Search Engine Optimization)에 정말 좋다.