Next.js 역할 & 실행

리액트라면 프론트 서버 갔다가 html과 js를 데이터 없이 받아온다. 데이터 없이 로딩창이 생기고 로딩하는 동안 백앤드 서버에서 데이터를 받아오게 되는데,

 

서버 사이드 렌더링(SSR)을 쓰게되면 브라우저를 통해서 첫 방문을 하는 페이지만 브라우저 - 프론트 서버 - 백앤드 서버 - 데이터베이스 - 백앤드 서버 - 프론트 서버 - 브라우저 과정을 거쳐서 받아온다. 그리고 첫 방문후에 다른 페이지에 들어갈 때는 백앤드 서버를 통해서 데이터만 받아오게 된다.

CSR(Client Side Rendering)

SSR(Server Side Rendering)

여기서 Next.js가 해주는 것은 클릭할 만한 링크같은 것들이 있으면 Code Spliting된 것을 미리 받아온다거나

이러한 꼼수(?)같은 것을 Next가 해줘서 편리하다.

 

 

Free fetching이라고 하는데 블로그라는 페이지에 들어가면 SSR을 통해서 데이터와 HTML파일을 한 번에 받아오는데 그 다음에 어바웃이나 포스트페이지에 들어갈 거 같거나 화면에 그런 페이지로 향하는 링크가 있다 그러면 Next는 그런 페이지들도 미리 같이 받아오는 것이다. 즉 로딩속도를 많이 향상시킬 수 있고 데이터 캐싱도 당연히 된다.

=> 특정 주소로 들어갈 때 로딩창이 없는 이유

 

이제 시작해보자. 노드버드 SNS 클론코딩을 위해서 prepare 폴더안에 front폴더를 만들었다.

Next는 노드를 통해 돌아가기 때문에 먼저 노드를 설치해주자. ( next(9v) antd(4v) styled-components(5v) )

 

node -v

npm - v

설치 후에 node 버전이 v14.17.3이 나온다.

npm은 6.14.13이 나온다.

 

npm init

npm i next@9

init 명령어를 통해 package.json 파일이 생긴다.

next는 9버전을 설치해준다.

 

 

package.json에서 script부분에 test 부분을 next로 바꾼다.

  "scripts": {
    "dev": "next"
  },

 

 

 

front 폴더안에 pages폴더를 만들고 index.js파일을 하나만들어서 진행한다. next는 pages폴더 이름이 무조건 pages이어야 한다. next가 pages 폴더를 인식을 해서 pages폴더안에 파일들을 개별적인 page로 만들어 준다.

 

즉 pages폴더안에 있어야만 code spliting된 컴포넌트로 바꿔주기 때문에 그렇다.

// index.js

import React from 'react'; // Next는 이 구문이 필요가 없다.

const Home = () => {
    return (
    	<div>Hello, Next!</div>
    );
};

export default Home;

 

npm run dev를 하기전에 package.json에서 script부분에 build를 추가해본다.

npm run build를 하게되면 next build가 실행이 될 것이다. 이러한 식으로 명령어들을 한가지 단어로 줄일 수가 있다.

즉, 아무리 긴 명령어가 있어도 npm run build가 있으면 명령어가 실행이 된다.

npm run dev

  "scripts": {
    "dev": "next"
    "build": "next build",
    "start": "next start"
  },

 

실행하면 아마 에러가 날 것이다. react와 react-dom을 설치해준다.

npm i react react-dom

  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
  },

 

 

next 9버전에서 추가된 구문(compiled successfully)이 나오면서 localhost가 나오게 된다. 브라우저를 실행해 보자.

(리액트 핫 로더기능)

localhost

 

 

 

 

 

 

 

<출처 조현영: [리뉴얼] React로 NodeBird SNS 만들기>

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의