1. Next.js의 기본

---

🤔 NextJS에 대한 개괄적 이해

---

Next.js는 SSR(Server-Side-Rendering)이 가능한 리액트 기반의 프레임워크다.
굉장히 빠른 속도와 편의성을 겸비하여, 많은 기업들이 이 Next.js를 채택하여 사용 중이다.

⇒ NextJS의 주된 특징 및 장점은 이하와 같다.

1. 서버사이드 렌더링이 가능하다.
2. 검색엔진최적화(SEO)에 유리하다.
3. 코드 분할 (Code Splitting)

근데 셋 다 처음 들어본 말들이다… 도대체 무슨 뜻일까?

우선 CSR, SSR, SEO 등에 대해 다루기 전에, 기본적으로 SPA가 무엇인지부터 짚고 넘어가도록 하자.

---

🎃 SPA란?

Single Page Application, 하나의 페이지로 구성된 어플리케이션이다.

우선, SPA에 대해 조금 더 쉽게 이해하기 위해선, 단계적으로 정적 웹사이트와 동적 웹사이트에 대한 이해가 필요하다. 아래의 설명을 간단하게 보며 이해해보자.

Static Website

말 그대로 정적인 웹사이트다.
화면에 보이는 페이지의 모든 내용들이 html에 담겨있고 그 html을 브라우저가 요청하여 온전한 html이 페이지에 입력되는 것이 특징이다.

이러한 정적 웹사이트에 적합한 사이트는 회사 소개 페이지, 포트폴리오, 블로그 등이 있을 수 있다.

Dynamic Website

동적 웹사이트
정적 웹사이트와 반대의 개념으로, 동적으로 html이 만들어져 이를 응답 받아 웹에 띄워주는 방식을 사용하는 웹사이트다.

즉, 데이터가 자주 변동되며 페이지의 내용이 자주 인터랙티브하게 바뀌어야 할 때 주로 사용되는 웹사이트라고 생각하면 된다.

SPA

HTML 태그 자체를 자바스크립트가 동적으로 생성한다.

하나의 파일로 전체 사이트, 즉 여러 페이지를 구현하는 방식의 어플리케이션이라고 생각하면 된다. 한 html페이지에서 자바스크립트를 통해 여러 페이지 및 서비스들을 갈아 끼우는 방식이라고 볼 수 있는 것이다.

---

---

⭐️ 서버사이드 렌더링(SSR)?

---

SSR이란, CSR(Client-Side-Rendering)과 대비되는 개념이다. 기본적으로 CSR은 페이지를 렌더링 할 때, JS 파일들을 로드하여 뷰를 띄워준다. 이에 따라 유저는 JS로드가 끝나기 전까지 빈 화면을 보게 되거나 무거운 웹페이지의 경우 오랜 시간을 대기해야 할 수도 있다.

하지만 SSR은 조금 다르다. 쉽게 설명하면 서버에서 사용자에게 보여질 뷰를 미리 그려서 사용자에게 띄워주는 방식을 의미한다.

조금 더 자세히 설명하자면, 초기 렌더링 시에 서버에서 우선적으로 띄워줄 HTML을 클라이언트에게 전달하여 대기시간 없이 뷰를 바로 확인할 수 있도록 하는 것이다. 그리고 이후에 브라우저가 JS파일을 로드하여 React를 실행시킨다. 그리고 이후부터 다른 페이지로의 이동이나 컴포넌트의 변환에 있어서는 브라우저가 CSR 방식으로 작업을 수행한다. 즉, Next.js는 SSR + CSR의 장점들을 합쳐 놓은 프레임워크라고 볼 수 있는 것이다.

---

🔍 검색엔진 최적화(SEO)

---

검색엔진 최적화는 말 그대로 “포털 사이트나 검색 엔진 등에서 쉽게 검색에 노출되도록 함”을 의미한다.

기본적으로 검색 엔진들은 자바스크립트를 해석할 수 없다. 따라서 빠르게 HTML 파일 내에서 h1, h2 태그 또는 컨텐츠 내용들을 크롤링 하여 검색결과를 반환해주는 것이다.

하지만 위에서 설명했듯이, CSR은 자바스크립트 파일이 모두 로드 및 실행되기 전까지 HTML이 텅 비어있는 상태를 유지한다. 따라서 검색엔진에 쉽게 노출되기 힘들다는 단점을 안고 있다.

반대로, SSR은 서버에서 기본적인 프론트 HTML 틀을 그려서 유저에게 보내주기 때문에 초기 렌더링 시에도 바로 기본적인 HTML이 채워져 있다. 따라서 검색 엔진에 보다 쉽게 노출될 수 있는 것이다.

---

✂️ 코드 분할

---

코드 분할이란 기존의 방식처럼 번들링을 한 번에 처리하는 것이 아닌, 유동적으로 나누어 처리하여 불필요한 코드들이 로드되는 것을 방지하는 기술이다.

번들링이란 사전 뜻 그대로 “묶는 행위“이다. 즉, 자바스크립트 코드들을 하나로 묶는 것을 의미한다고 볼 수 있다. 번들링의 주된 이유는 HTTP 요청을 최소화 하기 위함인데, 여러 개의 JS파일들을 일일히 HTTP요청 보내는 것 보다 하나로 묶어서 보내주는 것이 훨씬 효율적이기 때문이다.

하지만 이런 번들링도 조금 더 효율적일 필요가 있다. 브라우저가 필요로 하는 코드만 전달 받으면 됐지, 필요 없는 코드들 까지 몽땅 전달 받으면 처리 효율성이 떨어질 수 있기 때문이다.

간단한 예시로, 레스토랑에서 나는 스테이크를 먹고싶어서 스테이크를 주문했는데 웨이터가 레스토랑의 모든 메뉴들을 테이블 위에 올려놓고 “골라서 드세요!” 하는 것과 같다고 볼 수 있는 것이다.

이해가 쉽지 않다면, 아래의 그림을 보면 코드 분할이 뭔지 쉽게 감을 잡을 수 있을 것이다.

이렇듯 우리는 Next.js를 통해 좀 더 빠르고 효율적인 성능을 제공받을 수 있는 것이다.

---

🧵 그럼 CSR + SPA로도 SEO를 챙기려면 어떻게 해야 할까?

SPA에는 하나의 정적인 메타 태그들만 담길 수 있기 때문에, SPA와 CSR에서 SEO를 하기 위해선 특정한 추가 작업들이 요구된다.

React-Helmet

React-Helmet은 컴포넌트 내에서 메타태그들을 동적으로 변경할 수 있도록 도와주는 라이브러리다. 아래와 같이 설치를 해주고,

$ npm install --save react-helmet

$ yarn add react-helmet

이처럼 컴포넌트 내에서 title과 같은 메타태그를 직접 동적으로 관리할 수 있다.

export const helmetTest = () => {
  return (
    <Helmet>
      <title>리액트 헬멧!</title>
    </Helmet>
  );
};

여기서 끝난다면 굳이 SSR을 사용하지 않아도 될 것 같다….

하지만 react-helmet만을 사용하게 되면, build를 했을 때 결국 하나의 html파일이 생성되며 SSR로써의 기능이나 SEO의 의미를 상실하게 된다.

React-Snap

따라서 Helmet으로 만든 페이지별 html파일들이 빌드될 수 있도록 해야하는데…
이를 가능하게 해주는 것이 React-Snap이다.

• 설치

  $ yarn add --dev react-snap

• package.json파일 수정

  "scripts": {
    "postbuild": "react-snap"
  }

• index.js 수정

  import { hydrate, render } from 'react-dom';
  
  const rootElement = document.getElementById('root');
  if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
  } else {
    render(<App />, rootElement);
  }

물론 이러한 방법들이 이상적인 SEO 방식은 아니지만, 그래도 CSR+SPA의 프로젝트에서 SEO를 할 수 있는 괜찮은 방법 중 하나라고 생각한다.

---

📝 정리

---

1. Next.js는 SSR을 통해 SEO라는 강력한 장점을 우리에게 부여한다.

   ⇒ HTML을 서버에서 미리 그려서 전달해주기 때문!

2. 코드 분할을 통해 조금 더 효율적이고 향상된 성능을 우리에게 제공한다.

   ⇒ 내가 원하는 코드만 전달 받아 활용할 수 있기 때문!

---

포스팅에 참고한 자료

Next.JS 공식문서

네이버 D2 : 어서 와, SSR은 처음이지?

ivorycode: Next.js를 사용하는 이유

---