[Next.js] React SSR 프레임워크 Next.js 알아보기

Next.js

• React로 만드는 서버 사이드 렌더링(Server Side Rendering 이하 SSR) 프레임워크

제공되는 주요 기능

▶ hot reloading

- 개발중 저장되는 코드는 자동으로 새로고침 된다.

live loading과는 다른 점을 지니고 있으며, 차이점은 아래와 같다.

• hot reloading
  - Application의 현재 상태를 잃지 않고 변경된 사항을 수정한다.
• live reload
  - Application의 현재 상태를 초기화하고, 처음으로 돌아가 새로고침 처리한다.

▶ Automatic routing

- React에서 라우팅을 하기 위해서는 <Router> 태그나, 특정 코드를 작성해야 했다.

("'/posts' url로 접속시 Post Component를 보여줘!" 라는 코드)

하지만 Next.js는 이를 폴더/파일 단위로 분리해 자동으로 해결해준다.

pages 폴더 안에 있는 파일 명으로 자동으로 라우팅을 처리해주며, 아래와 같이 분리할 수 있다.

• "/pages/post.tsx → http://…:3000/post"
• "/pages/post/comment.tsx → http://…:3000/post/comment.tsx"

▶ Single file components

- `style jsx`를 사용함으로써 Component 내부에 해당 컴포넌트만 스코프를 가지는 CSS를 작성 가능하다.

상황에 따라 전역으로 사용할 수 있다.

• 특정 컴포넌트만 스코프를 가지는 태그 : <style jsx>
• 전역 스코프를 가지는 태그 : <style jsx global>

▶ Global style 정의 가능

- `_app.tsx` 에서만 정의가 가능하다.

사용 방법은 _app.tsx에서 CSS파일을 import 하면 된다.

 

▶ SSR 사용

- 당연하지만 SSR 프레임워크인 만큼 SSR을 사용한다.

하지만, 컴포넌트별로 코드를 작성하기에 따라 SG로 적용할지, SSR로 적용할 것인지 나눌 수 있다.

 

▶ Code spliting

- dynamic import를 이용하면 쉽게 가능하다.

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/foo'))

function App() {
    return (
        <div>
            <DynamicComponent />
        </div>
    )
}

내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것 이다.

모듈 번들(chunk.js)이 하나로 안묶여 로딩시간 개선에 효율적이다.

 

▶ 기본 베이스가 TypeScript

- React와 같이 TypeScript 활용을 위해 웹팩이나, 바벨을 설정할 필요가 없다.

아래 명령어를 통해 의존성만 추가해준다면 바로 사용 가능하다.

# 설치
yarn add typescript @types/node @types/react

# 실행
yarn run dev

실행시 자동으로 'tsconfig.ts', 'next-env.d.ts' 파일이 생성된다.

 

▶ _document.tsx

• meta 태그를 정의하거나 전체페이지에 관여하는 컴포넌트
• console 객체를 이용하여 개발자도구에 콘솔을 출력할 경우 클라이언트에서는 노출되지 않음.
  (서버에서만 노출됨.)
• render 요소는 클라이언트에 반영함.
  (page 구성 요소만 반영되며 JavaScript는 반영되지 않음. 즉 componentDidMount와 같은 생명주기 훅도 발동되지 않음)

▶ _app.tsx

• 렌더링 하는 값은 모든 페이지에 영향을 줌
• 최초로 실행됨
• 클라이언트에서 띄우길 바라는 Component, 공통 레이아웃임으로 최초 실행 후 내부에 있는 Component를 실행함
• 내부에 Component가 있다면, 전부 실행 후 html의 body로 구성됨
• component, pageProps를 파라미터로 받음
  - component : 요청한 페이지, GET '/' 요청을 보냈다면 해당 인자에는 '/page/index.js' 파일이 값이 됨.
  - pageProps : 페이지 '*getInitialProps' 를 통해 내려받은 인자.
  *getInitialProps : [Next.js] getInitialProps, getStaticProps, getStaticPath, getServerSideProps
• 이 후 '_document.tsx' 가 실행됨.
• page를 업데이트 하기 전 원하는 방식으로 업데이트하는 통로.
• Server, Client(Terminal, Web) 모두 Console이 노출됨.

▶ import style component

• Module 방식으로 CSS를 작성할 수 있다.
• 아래의 네이밍 컨벤션만 지키고, import하여 모듈처럼 사용하면 된다.

[componentsName].module.css

▶ SASS 사용

• 별다른 Webpack 설정 없이 Next JS에서 처리해준다.

▶ Link Tag 사용

• 일반적으로 페이지를 이동시 <a> 태그를 사용하지 않는다.
  <a> 태그로 이동시 bundle 파일을 다시 다운로드 받기 때문이다.
• Redux 사용시에도 <a> 태그로 이동시 store, state가 증발되는 것과 같은 이유로 사용되지 않는다.
• 다시 돌아오지 않을 페이지로 이동시에만 <a> 태그를 사용한다.
• 그 외에는 <Link> 태그를 이용해 이동한다.
• 동적링크로 이동해야 할 경우 '[]' 를 사용한다.
  '<Link href="/post/[id]>"

▶ 동적 URL 사용

• 가변적으로 변하는 url에 대해 지원한다.
• '[]' 문법으로 동적페이지 생성이 가능하다.
  - 'page/[id].tsx' → 'http://localhost:3000/123'
  - useRouter()를 이용하여 router.query.id로 조회 가능하다. → router.query.id === [id]

▶ Prefetching

• 백그라운드에서 페이지를 미리 가져온다.
• <Link> 뷰포트에 있는 모든 항목(초기 또는 스크롤을 통해)이 미리 로드된다.
• 정적생성을 하는 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 파일을 미리 로드한다.
• 사용하는 방법은 <Link prefetch href="..."> 로 사용하면 된다.
  → Data를 불러온 후 Routing 처리
• Production Level에서만 작동된다.

▶ next/router 사용

• react의 react-router-dom과 사용법이 매우 유사하다.
• <Link> 태그 사용시 사용할 수 있는 prefetching 기능도 사용 가능하다.

.
.
.
const router = useRouter();
router.prefetch("/info")

.
.
.