React.js와 Next.js의 서버 배포 차이

Next.js는 React의 SSR 프레임워크이다.

 

React는 아래의 과정으로 서버에 배포를 한다.

 

1. 소스를 webpack으로 build

2. 추출된 dist파일을 서버에 복사

3. static 이미지 경로 설정

app.use(express.static(path.join(__dirname, 'public')));

4. / 이외의 url에서 접근해도 index.html을 바라보도록 설정

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

5. index.html를 서버에 띄우기

 

 

React는 빌드된 파일이 index.html, bundle.js, assets으로 간단하지만 Next는 되게 복잡복잡 대가리터졍..

그래서

 

Next.js는 아래와 같이 배포한다.

 

1. 서버에서 프로젝트 전체를 복사한다.

2. 서버에서 nginx 같은 걸로 local 서버 띄우 듯이 scripts를 서버에서 실행한다. (user <-> nginx <-> next)

  "scripts": {
    "dev": "cross-env NODE_ENV=development next --hostname local.help.naver.com",
    "prod": "cross-env NODE_ENV=production next"
  },

 

만약에 CDN을 사용해서 production 환경에서 절대경로를 사용해야된다면 server를 커스텀 해야된다.

https://nextjs.org/docs/advanced-features/custom-server

Advanced Features: Custom Server | Next.js

 

 

Next.js 해보고 싶어서 신규 프로젝트때 어거지로 이유 만들어서 Next.js로 개발하게 됐다만..

괜한 짓을 한 거 같다..

또 한번 다짐. 나대지 말자. 하던 거 하자.

 

 

 

 

 

 

 

 

 

(추가)동적 라우팅을 사용하는 서비스에서 next export로 배포 시도했다가 삽질 오지게한 썰

나: 서버에서 노드서버로 next 띄워주셈.
서버: 굳이 노드 서버 띄우지 말고, next build && next export 해서 나온 out 폴더로 배포 진행할 수 없음?
나: why? 서버에서 노드 서버 띄우는게 어려움?
서버: ㄴㄴ 노드 서버 자체를 띄우는 건 어렵지 않은데, 아무래도 서버를 하나 더 띄우려면 체크해야 될 서버가 한 개 느니깐!
나: ㅇㅇ 찾아볼게,,

 

결론은 할 수 없다. 

페이지가 정적이 페이지면 가능하지만 동적인 페이지는 불가능하다.

여기서 말하는 정적인 페이지는 /home, /about/info..와 같이 고정된 path이고, 동적 페이지는 /blog/1, blog/2 와 같이 데이터에 따라 blog/:id 값이 변경되는 것을 말한다.

 

동적 페이지를 export 하면 out은 아래와 같은 구조를 갖는다.

out

ㄴ_next

ㄴtest

  ㄴ[id].html

노드서버에서 out 폴더를 띄웠을 때, 링크로 /test/1 이동은 잘 되지만 주소창에 직접 /test/1을 입력하면 정상적으로 동작하지 않는다.

 

 

getStaticPaths

id 값이 여러개더라도 값이 고정되어 있으면 getStaticPaths를 정의해주면 된다.

next export시 getStaticPaths에 정의된 값에 맞게 .html 파일이 추출된다.

 

pages/test/[id].tsx

import React from 'react';

interface IOwnProps {
  params: any;
};

const Test: React.FC<IOwnProps> = ({ params }) => {
  return (
    <div>
      test
    </div>
  );
};

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } } // See the "paths" section below
    ],
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const post = params

  // Pass post data to the page via props
  return { props: { post } }
}

export default Test;

out

ㄴ_next

ㄴ test

  ㄴ1.html

  ㄴ2.html

 

그러나 id 값이 100개, 1000개라면 1000개의 html을 생성할 수 없고, 만약에 빌드된 상태에서 새로운 id 값이 생성된다면 또 빌드를 해줘야 한다.

 

굳이굳이 동적 라우팅을 하는 서비스에서 이 방법으로 배포를 해야겠다면, id가 새로 생성될 때 마다 훅으로 next.js를 새로 배포하는 수 밖에...