넥스트 js - 2

https://www.jaeilnet.shop/

재일이의 넥스트js

 

1넥스트와 리액트의 차이

 

1. 빈 html (seo)

리액트는 일반적으로 csr 으로써 빈 html 을 서버로부터 받고 js 와 css 를 입혀서 페이지를 구성한다.

여기서 빈 html 이 핵심인데

html 이 비어 있기 때문에 검색엔진 크롤러봇들이 내 사이트의 정보를 읽을 수가 없다.

물론 라이브러리를 이용하면 어느정도 대응이 가능하다.

 

2. 초기 렌더링 (코드 스플리팅)

또 초기 접근시에 빈 html 을 가져오기 때문에 거기에 입혀야 할 페이지의 모든 js 와 css 를 한번에 받아 오기 때문에

초기에는 성능적으로 사이트가 무거울수록 로딩이 느리다고 느낄 수 있지만 한번에 다 가져온 만큼

초기 페이지이외에 다른 페이지에서는 빠르게 대응이 가능하기 때문에 빠르다는 인식을 줄 수 있다.

이 문제도 코드 스플리팅 lazy 로딩으로 대응이 가능하다.

 

넥스트js는 무엇이 다른가?

 

페이지를 그리는 방식은 csr과 ssr 2가지로 나눌 수 있는데

 

리액트에서는 csr 이 디폴트이다.

리액트에서도 ssr을 구현할 수 있지만 꽤 어렵고 복잡한걸로 알고 있는데

좀 더 편하게 ssr을 구현 해낼 수 있는 라이브러리가 넥스트js 이다.

 

넥스트 js 는 사전렌더링 pre rendering 을 디폴트로 한다.

 

프리렌더링 방식은 서버에서 html 을 그려놓고 서버에서 클라이언트로 내려준다.

 

페이지의 소스보기를 보면 이미 서버에서 그려진 html 을 내리기 때문에 html의 내용이 꽉 차 있는 모습을 볼 수 있다.

 

1. 리액트 // 비어있는 html

2. 넥스트 js // 내용이 꽉 찬 html

여기서 넥스트의 사전렌더링의 개념으로 2가지가 나오는데

 

1. Static Side Rendering (getStaticProps)

 

스테틱 서버 렌더링은 용어 그대로 정적인 사이트를 렌더링하는 건데,

npm build 시 현재의 js 파일을 html 로 변환(스냅 샷) 후 사용자가 접근하여 서버에 html 파일을 요청 할 때

빌드 했을 때의 그 html 을 그대로 내려주기 때문에 빠르게 보여 줄 수있다.

 

스테틱이면 고정?

자주 사용하는 추가 옵션

revalidate: (sceond) 을 사용하여 셋팅 된 시간마다 변경 된 부분을 검사하여 정적인 페이지를 다시 생성할수도 있다.

잘 변하지 않는 데이터, 미리그려놔도 되는 정적인 페이지는 스테틱으로 사용하면 빠른 속도를 체감 할 수있다.

 

 

1-2 . Static Paths (getStaticPaths)

 

getStaticProps 와 같이 사용합니다.

 

StaticPaths 는 의미 그대로 url 경로가 동적 라우팅이더라도 (/[id].js)

스테틱하면 미리 그 경로에 html 을 만들어 놓겠다 라는 의미입니다.

params 의 배열로 리턴하며, 배열이 곧 스테틱한 url 경로가 됩니다.

 

사진은 빌드 했을 때 제가 정한 paths 들의 html 이 미리 만들어진 모습입니다.

자주 사용하는 추가옵션 fallback : false, true, 'block'

저는 react-router-dom 의 약간 swich 와 비슷한 개념으로 느껴지네요,

내가 스테틱하게 정한 params 의 경로에 없는 페이지를 접근하면 어떻게 할 것인가에 대한 옵션입니다.

 

1.  false 면 404를 띄우고 true 면 404없이 일단 보냅니다.

 

2. true 면 없는 페이지만 당황하지않고 fallback 의 화면을 보여주다가 getStaticProps 로 페이지를 다시 그려옵니다.

스테틱을 다시 그려온다해도 "다시" 생성해서 서버에서 내려주는 것이기 때문에 기존 스테틱보다는 느립니다.

하지만 한번 동작 이후에는 html이 생성되어있기 때문에 빠르게 보여줄수 있습니다.

 

3. 'block' 은 

true 와 동일 합니다만 fallback 상태의 화면을 보여주지 않고 getStaticProps 로 가져옵니다.

 

fallback 상태는 next/router 의 router.fallback 으로 로딩 처리를 해줄 수 있다.

 

2. ServerSideRendering (getServerSideProps)

 

서버사이드는 매 요청마다 html을 그려서 클라이언트에게 내려주는 방식이다.

항상 최신의 데이터 혹은 동적인 데이터를 다룰 때 적합하다.

 

미리 그려놓고 내려주는 스테틱과는 속도에서 차이가 있으며

정말 자주 바뀌거나 하지 않고서는 어지간해서는 스테틱을 쓰는 것을 추천 한다.

 

3. 빌드 과정에서 이미 html 을 만든다.

맨 하단의 Server / SSG 를 기호로 빌드 된 페이지가 어떻게 생성 됬는지 알려준다.

 

 

4. 넥스트의 동작원리 (Hydrate)

참고 https://helloinyong.tistory.com/315

Next.js의 Hydrate란?

어떻게 프리렌더링을 하는 걸까?

 

Hydrate 이란?

서버에서 html 파일을 만들어서 내려주면, 그 위에 js 코드들을 다운 받아 html 요소에 채운다

 

실제로 브라우저에서 자바스크립트 동작을 정지해보면 정확한 의미를 알 수 있다.

 

4-1. 자바 스크립트 on 로컬환경

4-1. 자바 스크립트 on

4-2. 자바스크립트 off 로컬환경

로컬에서는 렌더링 됬지만 스타일이 없다던가 아니면 자바스크립트 이벤트가 먹지 않는다.

 

 

4-3. 자바스크립트 off 배포환경

4-3. 자바스크립트 off

4-4. 자바스크립트 on 배포환경

4-4 자바스크립트 on

배포 환경에서도 마찬가지로 자바스크립트를 off 하더라도 이미 스테틱한 Html이 있기 때문에 화면 단에서는 차이를 모르겠지만

여전히 이벤트는 안먹는다.

 

정리하면 Hydrate 란?

이미 그려진 html 요소에 자바스크립트를 입히는 것이다.

 

 

5. SEO + Meta Tag

 

페이지마다 Html이 있기 때문에 검색크롤러 봇이 내 사이트를 읽어오는데 유리하다.

next/head 의 Head 태그로 감싸주고 사용하면 편하게 이용 할 수 있다.

이 Head 를 컴포넌트 / 함수화 하여 재사용성을 높여주어 사용한다.

seo 의 메타태그 이외에도 오픈그래프(og) 태그를 활용하여 카카오톡과 텔레그램 같은 메신저에서

내 사이트의 링크를 보낼 때 아래와 같이 내 사이트의 정보도 함께 노출시켜 보낼 수 있다.

 

 

 

넥스트의 주요 특징들만 다뤄봤습니다.