[NextJs] NextJs 의 Pages 와 렌더링 방식 (CSR & Pre-Rendering)

앞의 포스팅을 잘 따라해 Nextjs 프로젝트를 문제없이 생성했다면 이런 파일구조를 가진 폴더가 생긴다.

 

Nextjs 프로젝트

🥨 Pages

Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 export된 React Component 이다.

각 페이지는 그들의 파일 이름을 기반으로 route 된다.

별도의 React router Dom 을 다운 받을 필요도 없고, 설정도 안해도 되고, router 안만들어도 되고, 컴포넌트도 import 해야하고... 

굉장히 편리하다!

 

따라해보자.

 

hello.js 파일 생성

 

hello.js 파일 내용

 

이렇게 페이지가 생성된다.

pages 안에 들어있는 각 컴포넌트들은 하나의 페이지로 사용된다.

참고로 앱의 홈은 기본적으로 index.js 이다.

---

🥨 Next.js 의 Rendering

🍳 알고가야하는 개념(1)  CSR (Client Side Render) 이란?

브라우저가 자바스크립트를 가져와 client-side 의 모든 UI 를 만드는것.

 

CSR 방식으로 화면에 결과를 과정은 다음과 같다.

- 서버에서 client 의 요청(request)를 받고 index.html 파일을 client 에 전송한다.

(기본적으로 index.html 파일은 비어있다.)

 

- 화면이 렌더링 되기전에는 흰 화면이 보여지며, app.js 를 서버에 요청 후 client 에 화면을 그려주게 된다.

  - index.html 이 화면과 관련한 내용이 없기 때문에 흰 화면이 보여지는 것이다!

(app.js 는 화면의 모든 내용을 담고 있으며, 다른 source 코드를 모두 포함한다.)

 

- 추가 데이터 요청시, request 로 통신을 하며 화면을 동적으로 그려낸다.

 

🧈 CSR (Client Side Rendering) 의 문제점

- 초기 로딩이 오래걸린다.

- 낮은 SEO(Search Engine Optimization)

파싱 봇들이 세상에 존재하는 모든 웹페이지의 index.html 의 구조를 분석해 Search Engine 에 검색력을 높여주는데 도움을 준다.

하지만 CSR 방식은 index.html 의 body 가 대부분 비어있기 떄문에 SEO가 잘 동작하지 않아 구글/네이버 등 검색 노출이 잘 안된다.

 

여기까지 CSR 의 동작 과정이다.

React 는 CSR 방식이다. " 빈화면 -> 리액트 컴포넌트 초기화 -> 동작 "

 

하지만 Next.js 는 Pre-Rendering 방식을 사용한다.

 

 

🍳 알고가야하는 개념 (2)  Pre-Rendering  이란?

CSR 방식으로 화면에 결과를 과정은 다음과 같다.

- 초기에 미리 생성된 HTML 을 표시한다.

React.js 를 백엔드에서 동작시켜 페이지를 미리 만드는 것!

= 컴포넌트를 render 시킴 -> render 이후 HTML 로 변환

 

- 리액트 컴포넌트들이 초기화된다.

 

- 이후 js가 로드 되며 기본적으로 생성되었던 것들과 연결 되며 동작하게 된다.

 

🧈 Pre-Rendering 의 장점

- 초기 상태의 컴포넌트로 미리 생성된 Html 을 볼 수 있다. 

이는 CSR 이 초기 화면에서 데이터를 받아오며 흰 화면을 보여주던 것과는 상반된다.

 

- 웹페이지의 퍼포먼스와 검색 SEO 향상

index.html 에 컨텐츠가 담겨있어 SEO 가 잘 동작한다.

 

Next.js 에서 사용하는 2가지 방식의 Pre-Rendering

1. Static Site Generation (SSG)

html 을 빌드 타임에 생성하고, 각 요청에 따라 재사용한다.

Next.js 내부에 존재하는 Pre-Render 메서드가 최초에 html 을 build 할 때 동작한다.

그리고 Pre-Render 된 html 파일은 요청에 따라 재사용된다.

 

-> 기본적으로 Next.js 공식홈페이지에서 추천하는 방식이다.

 

2. Server Side Rendering(SSR)

html 을 각 리퀘스트가 일어날 때 마다 생성한다.

주로 사용자마다 페이지의 데이터가 다르게 보여야 하는 페이지에서 사용된다.

 

-> 매 요청마다 data가 자주 업데이트 되는 경우 SSR 을 선택하면 된다.