React Next.js

YEZI🎐·2022년 11월 15일

CSR React SSR link next.js pre-rendering seo

React

목록 보기

29/46

React는 Client Side Rendering으로 동작한다.
때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)에 불리하다.

그래서 SEO를 원활하게 하기 위해서는 첫 페이지의 경우, React로 구현한 Javascript 코드를 HTML로 변환해서 서버에서 내려받는 Server Side Rendering으로 동작하게 해야 한다.

- 대표 프레임워크 : Next.js, Remix

Next.js

React 전용 SSR 프레임워크이다.

React.js로 웹 애플리케이션 만들기 위한 조건

코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 한다.
코드 분할과 같은 프로덕션 최적화를 수행해야 한다.
성능 향상 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링한다.
서버 측 렌더링 또는 클라이언트 측 렌더링을 사용한다.
React 앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 한다.

Next.js의 주요 기능

직관적인 페이지 기반 라우팅 시스템(동적 경로 지원 포함)
사전 렌더링, 정적 생성(SSG) 및 서버 측 렌더링(SSR) 모두 페이지 단위로 지원된다.
자동 코드 분할! (빠른 로딩)
최적화된 프리페치를 통한 클라이언트 측 라우팅
내장 CSS 및 Sass 지원 및 모든 CSS-in-JS 라이브러리 지원
Fast Refresh를 지원한다. (빠른 리프레쉬)
Serverless Functions로 API 엔드포인트를 빌드하기 위한 API 경로
완전히 확장 가능

설치

# with npm
npx create-next-app@latest

# with yarn
yarn create next-app

# with pnpm
pnpm create next-app

package.json파일 생성
```
npm init
```

next, react, react-dom 설치

# with npm
npm install next react react-dom

# with yarn
yarn add next react react-dom

Next 서버 작동
```
npm run dev
```

사용 법

Next에서 기본적으로 생성되는 pages 폴더(없다면 추가하기)에 새로운 파일을 만들면,
이를 자동으로 인식해 라우팅까지 해주고, Server Side Rendering으로 동작한다.

pages 폴더에 Info.js 만들기

// Info.js
import React from 'react'

function Info() {
   return <div>My info</div>
}

export default Info

해당 경로로 들어가 결과 확인

Pre-rendering

Next.js에서는 모든 페이지를 'Pre-rendering'한다.
이는, Client의 JavaScript에서 모든 작업을 수행하는 대신, 각 페이지에 대해 미리 HTML을 생성한다.
그렇기 때문에 Pre-rendering을 하면 SEO가 가능하다.

생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결하며,
브라우저에 의해 페이지가 로드되면 JavaScript 코드가 실행되어 페이지가 완전히 인터랙티브하게 되는 것을 Hydration이라 한다.

Linking between pages

next/link를 import 함으로써 Client Side Rendering으로 동작하도록 구현 할 수 있다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/my/account">My Account</Link>
      </li>
      <li>
        <Link href="/my/info">My Info</Link>
      </li>
    </ul>
  )
}

export default Home