kgneng2 commented 3 years ago

Next.js 란 ?

필요한이유: 검색 엔진 최적화 + 빠른 첫페이지 렌더링
SSR(Server Side Rendering)을 가능하게 해주는 framework
서버에서 리액트 코드를 실행해서 렌더링 하는 것을 말한다.
일반적으로 React에서 CSR는 render() 함수가 먼저 실행되고나서 ComponentDidMount() 함수에서 필요한 데이터들을 가져온 뒤, 다시 렌더링을 하는 방식으로 동작한다.
Next.js를 이용하면 빌드 시점에 SSR로 생성한 페이지로 한 번에 렌더링이 되기 때문에 FMP(First Meaningful Paint) 가 빠를 수 밖에 없다. 또한 그 이후에 페이지를 이동할 때마다 렌더링에 필요한 JSON_DATA를 가져와 필요한 부분만 그리면서 CSR의 장점 또한 살릴 수 있다.

Zero Configuration

보다 빠른 페이지 로드를 위한 자동 code splitting

파일 시스템 기반 라우팅

1. React에서는 '라우팅 페이지' 만들고, <Switch> 등에 라우트를 넣어주어야 한다.
2. Next.js에서는 pages 폴더 안에 파일을 만들기만 해도 라우팅이 가능하다.
3. 동적 라우팅은 대괄호로 해결하며, 대괄호 위치에 들어오는 모든 동적 라우팅에 대해 대응 가능하다.
- pages/[floor].tsx - '/1/' => params = {floor: 1}
- Pages/users/[userId].tsx - '/users/4' => params = {userId: 4}

Hot Module Replacement(HMR) 지원 : 모듈 add/delete 될때마다, 풀로드 하지않는다. webpack module인듯하다..

kgneng2 commented 2 years ago

Next.js와 Yarn workspace 톺아보기

gaza-next에 이슈를 해결하면서 Next.js와 Yarn workspace에 대해 제대로 알고 싶어서 관련 내용을 정리하였습니다.

Next.js

Next.js 에서 주장하는 'Next.js'를 사용해야 하는 이유 6가지는 다음과 같습니다.

Pre-Rendering

React를 이용해서 Client Side Rendering(CSR)과 Server Side Rendering(SSR)을 쉽게 병행해서 사용할 수 있도록 지원한다.

https://nextjs.org

일반적으로 React에서 CSR는 render() 함수가 먼저 실행되고나서 ComponentDidMount() 함수에서 필요한 데이터들을 가져온 뒤, 다시 렌더링을 하는 방식으로 동작한다.

Next.js를 이용하면 빌드 시점에 SSR로 생성한 페이지로 한 번에 렌더링이 되기 때문에 FMP(First Meaningful Paint)가 빠를 수 밖에 없다. 또한 그 이후에 페이지를 이동할 때마다 렌더링에 필요한 JSON_DATA를 가져와 필요한 부분만 그리면서 CSR의 장점 또한 살릴 수 있다.
Static Exporting

https://nextjs.org

Next.js는 사용자가 특정 경로로 진입할 때 마다 해당 페이지를 만들어낼 수 있는데, export 기능을 이용하면 Static Site Generator로 사용할 수 있다. 빌드 시점에 미리 진입 가능한 페이지를 파악하고, 이 페이지들을 각각의 static 파일 (html, css, js)로 만들어 내는 것이 가능하다.

또한 데이터가 없을 경우 페이지를 HTML로 만드는 것이 불가능할 경우에도 지원해준다.
CSS-in-JS

Styled jsx를 default로 지원한다.
```
function Home() {
return (
  <div className="container">
    <h1>Hello Next.js</h1>
    <p>Let's explore different ways to style Next.js apps</p>
    <style jsx>{`
      .container {
        margin: 50px;
      }
      p {
        color: blue;
      }
    `}</style>
  </div>
)
}

export default Home
```
위와 같이 Next.js에서 지원하는 <style jsx> 태그를 사용하면 React 엘리먼트에 CSS를 입히는 것이 가능해진다. 여기서 .container이나 p와 같이 일반적인 CSS 선택자를 사용했지만, Styled JSX의 scope는 현재 컴포넌트로 되어 다른 컴포넌트에는 영향을 주지 않는다.

만약 전체적으로 적용하고 싶을 경우에는 <style jsx global> 태그를 사용하면 된다.
Zero Configuration
- 보다 빠른 페이지 로드를 위한 자동 code splitting
- 파일 시스템 기반 라우팅
- React에서는 '라우팅 페이지' 만들고, <Switch> 등에 라우트를 넣어주어야 한다.
- Next.js에서는 pages 폴더 안에 파일을 만들기만 해도 라우팅이 가능하다.
- 동적 라우팅은 대괄호로 해결하며, 대괄호 위치에 들어오는 모든 동적 라우팅에 대해 대응 가능하다.
  - pages/[floor].tsx - '/1/' => params = {floor: 1}
  - Pages/users/[userId].tsx - '/users/4' => params = {userId: 4}
- Easy to develop using API
- API가 구현이 안되어 있더라도 문법상으로 사용가능하게 구현할 수 있다.
  - Pages/api/users.ts
```
export default (req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.end(JSON.stringify({ name: 'John Doe' }))
}
```
  - const users = axios.get('/api/users');
- Hot Module Replacement(HMR) 지원
Fully Extensible
- 바벨과 웹펙 설정만으로 컨트롤 가능
- 서버, 라우팅, 플러그인 커스터마이징 가능
Ready for Production
- 빌드 크기 최적화
- etc

Yarn Workspaces

gaza-next 와 같이 여러 개의 서비스가 들어있는 프로젝트의 경우 디렉토리가 많아질 수 밖에 없는데, 이 때 Yarn Workspaces는 쉽게 디렉토리 별로 dependencies 버전을 관리할 수 있습니다.
root 와 packages 로 구성되며, 모든 패키지들에 대한 dependencies 를 yarn install 한 번으로 처리가능합니다.
모든 모듈은 hoist 되어 root 폴더의 node_modules 폴더에 설치되고, 공통된 모듈인데 버전이 다를 경우에는 해당 패키지 node_modules에 설치됩니다. 따라서 패키지 내에서 모듈의 버전을 변경한다거나 삭제하는 등의 변경이 일어나도 다른 패키지에 영향을 주지 않습니다.

현재 gaza-next 의 root package.json은 다음과 같이 되어 있습니다.

// package.json
{
  "name": "gaza-next",
  "version": "1.0.0",
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    ...
  }
}

그리고 패키지들은 다음과 같이 되어 있습니다.

// packages/flight/package.json
{
  "name": "@gaza-next/flight",
  "version": "1.0.0",
  "main": "index.tsx",
  "dependencies": {
    ...
  }
}

// packages/common/package.json
{
  "name": "@gaza-next/common",
  "version": "1.0.0",
  "dependencies": {
    ...
  }
}

이 때 각 패키지에 있는 모듈을 사용하고 싶을 경우에는 다음과 같이 사용합니다.

`import useInfiniteScroll from '@gaza-next/common/src/hooks/infiniteScroll;'

from giin

kgneng2 commented 2 years ago

https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0

React를 사용한 SSR의 동작 순서는 다음과 같습니다.

서버는 렌더링할 준비가 된 HTML을 응답을 브라우저에게 보냅니다.
브라우저는 페이지를 렌더링하고 이 때 페이지를 볼 수 있습니다.
브라우저가 JS를 다운로드 받습니다.
브라우저가 React를 실행합니다.
페이지를 상호작용 할 수 있습니다.

React를 사용한 CSR의 동작 순서는 다음과 같습니다.

서버에서 브라우저로 응답을 보냅니다.
브라우저에서 JS를 다운로드 받습니다.
브라우저가 React를 실행합니다. 4, 페이지가 보이고 상호작용 할 수 있습니다.

Next.js의 작동방식

사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보낸다.
브라우저에서 JS를 다운로드 받고 React를 실행한다.
사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리한다.

kgneng2 / blokg

Next.js #33