next.js 왜 사용하나요

 

 

 

 

요즘 프론트엔드 개발자 필수템 next.js

 

 

 

어떻게 저떻게 사용은 했지만

 

프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지

 

딱히 뭘 알고 쓴다는 느낌은 없었다

 

그래도

 

next 왜 쓰는지

뭐가 좋은지

 

는 정확히 알아야하지 않을까... 🤔

 

 

싶어 시작한 글

 

 

 

 

 

 

React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링

Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함.

 

 

 

SSR vs CSR

 

SSR 서버사이드 렌더링

CSR 클라이언트 사이드 렌더링

 

 

 

 

 

 

 

👆 SSR 

 

 

클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순서로 데이터를 그리는 형식으로

서버에서 페이지를 구성한 후 브라우저에 전달하기 때문에

클라이언트가 페이지를 이동한다던가 다른 요청이 생길때마다 이 과정을 반복하기 때문에

굳이 바꿀 필요 없는 부분을 계속해서 렌더링하는 단점이 있다

 

 

 

 

 

👆 CSR

 

 

react 등 SPA에서 쓰이는 기법

 

클라이언트가 첫 화면에 들어갔을 때 프론트 서버에서 화면을 그리는 코드를 한번에 받는다.

때문에 초기 진입 속도가 느리지만 후에 필요한 데이터만 받아서 필요한 부분 UI만 다시 그리면 되기 때문에

화면 이동이 부드럽고 SSR 에 비해 서버 부하가 덜하다.

 

하지만 초기에 html 데이터가 없다보니 검색 봇이 빈페이지로 착각해 검색엔진에 취약하다 (구글 제외)

 

 

 

+ SPA (SingPageApplication)의 SEO 문제

 

spa는 html 한장으로 여러 페이지를 보여주기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안 된다.

구글의 경우 Googlebot이 자바스크립트를 구동해서 읽을 수 있지만

이도 자바스크립트 덩어리를 googlebot이 렌더링하여 크롤링하는 과정이 필요하기 때문에 많은 시간이 소요된다

또 html이 한장이기 때문에 메타 데이터 (메타 태그)를 넣는데 한계가 있고, 페이지마다 다른 메타 데이터를 넣는 것이 불가능하다.

단일 페이지에 동일한 메타 데이터를 넣을 수밖에 없는 구조

 

 

 

 

 

 

 

SPA 장점 + SSR 장점 = Next.js

 

 

 

 

SSR 방식을 사용했을 때

 

 

클라이언트 접속, 서버 요청 -> 서버 : 미리 구성된 html, css 파일 클라이언트에게 전달(프리렌더링) -> 클라이언트 : js 파일을 html에 연결

 

 

 

Hydrate

: 서버에서 js로 html 컨텐츠를 채운 완성된 파일을 클라이언트에게 전달

: 프리렌더링하면 html document 생성-> 이 파일을 클라이언트에게 전달(단순 html) -> react 가 번들링된 js 코드 클라이언트에게 전송

 

 

1. html 꽉 차있기 때문에 SEO 용이

 

2. 프리렌더링된 document는 js가 빠진 가벼운 상태이므로 빠르게 로딩 가능 (이후 chunk 단위의 js가 렌더링 될때 먼저 받아진 document dom 요소에 js 속성이 매칭 되므로 웹 페이지를 다시 그리진 않음)

 

3. 첫 페이지를 SSR 방식을 이용하여 처리한 이후 다른 페이지로 넘어갈 때는 CSR 방식으로 브라우저에서 처리하기 때문에

SPA 장점을 유지하고 있음

 

4. 코드 스플리팅을 지원한다.

지금 당장 필요한 코드가 아니라면 따로 분리시켜서 나중에 필요할 때 불러와 페이지 로딩 속도를 개선하는 것

 

import "./App.css";

function App() {
  const handleClick = () => {
    import("./notify").then(({ default: notify }) => {
      notify();
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Click!</button>
    </div>
  );
}

export default App;

 

import 문을 블록 아래로 내리는 dynamic import 문법

react에서는 webpack이 지원하고 있다.

 

위 예시는 버튼을 눌렀을 때 알람이 울리는 코드이다

 

버튼 클릭시 chunk.js 라는 파일을 불러오게 되는데 파일 안에 notify 관련 코드가 있다.

이렇게 import를 함수로 사용하면 코드를 분리하여 저장하고 import 가 호출될 때 불러와 사용한다

 

 

 

 

 

SSR / SSG

 

SSR(Sever-Side-Rendering)

SSG(Static-Site-Generation)

 

next.js 는 브라우저에 렌더링할 때 기본적으로 사전 렌더링을 한다.

htmls을 미리 렌더링하고 chuck 단위로 js를 보내 이벤트를 작동시키는 방법을 사용한다

 

이러한 과정이 모두 SSR 인 것은 아님!

 

프리렌더링을 동적으로해서 페이지를 생성하느냐 -> SSR

정적으로 페이지를 생성하느냐 -> SSG

 

 

SSG

 

 

ssg는 빌드 시 page 각각의 문서를 생성해서 정적 파일로 만든다

페이지 요청이 발생시 페이지를 재생성하는 것이 아닌 만들어진 페이지를 반환하는 형태로 동작

이는 CSR 보다 응답이 빠르고 next.js도 지향하는 방향!

 

getStaticProps : SSG 사용

서버에서 실행되며 빌드 시에 딱 한번만 호출됨

 

getStaticPaths : SSG 동적 라우팅시 사용

 

 

 getStaticPaths -> getStaticProps 순으로 호출됨

 

정적 파일이 만들어지는 형태기 때문에 로딩되자마자 내용이 채워진 페이지가 로딩됨

 

 

-> 서버로부터 html을 받기 때문에 SEO 친화적

-> 모든 url 에 대해 개별 html 파일을 생성해야 함

 

 

 

SSR

 

 

유저가 페이지를 요청할때마다 html 문서를 생성해서 반환하는 것

항상 최신 상태를 유지해야하는 분석 차트, 게시판 등 동적으로 페이지를 생성해 다른 내용을 보여주어야하는 경우 사용

 

 

 

getServerSideProps : SSR시 사용

 

-> 서버로부터 html을 받기 때문에 SEO 친화적

-> 페이지가 무거울 경우(데이터 많은 대시 보드 같은)엔 오히려 사용자 경험을 떨어뜨림

 

 

 

 

🍒

 

next.js 는 역시 SEO 때문에 사용하는 것 같다.

일단 검색 엔진에 걸려야...

 

 

 

 

 

 

 

참고 블로그 

https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/

https://zereight.tistory.com/969

https://narup.tistory.com/235