🔥 next.js는 서버사이드렌더링
설치
mkdir 파일 이름 cd 파일 이름 yarn init -y (npm도 되지만 yarn이 더 빠르다!) yarn add react react-dom next
package.json 파일에 들어가서
“script”: { “dev”: “next”, “build”: “next build”, “start”: “next start” }
다음 스크립트 추가
yarn dev를 치면 서버가 켜진다 !
Next.js의 장점 🌸
- 기본적으로 서버사이드 렌더링 제공
- 서버사이드 렌더링 장점
- 검색엔진 최적화
- 초기 로딩 성능 개선
- SEO ( Search Engine Optimization)
- 코드 스플리팅 (아래서 설명할 예정)
- HMR (Hot Module Replacement) 을 지원하는 웹팩 기반 환경
- Babel, Webpack 설정 커스터마이징 가능
- Node.js와 같은 http 서버와 함께 구현 가능
SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임 워크
👀 간단한 부가 설명
과거에는 대부분 SSR로 동작되어 왔기 때문에 페이지가 여러개인 Multi Page Form 방식을 사용했었다.
하지만 스마트폰이 등장하면서 예전 앱들은 모바일에 최적화 되있지 않아서 이를 해결하기 위해 React, Angular, Vue 등 여러 라이브러리, 프레임 워크가 생기고 CSR(Client Server Rendering)이 가능한 SPA(Single Page Application)이 생기게 된것이다.
pages 컴포넌트 안에 파일이 페이지(route)가 된다.
라우팅을 내장하고 있어서 라우트 컴포넌트가 필요없다! 🥺
파일명을
[key].js이렇게 꺽새표시를 사용하고 저안에 이름을 정해주면 저것이 곧 라우트가 된다 !!
클래스형 함수를 쓰려면 import { Component } from 'react'; 이렇게 써줘야한다.
Link 컴포넌트
import Link from ‘next/link’;
<Link>를 사용할 때는 react-router에서는to를 썼지만href라는 점과 컴포넌트 내부에 문자열이 아닌 컴포넌트 혹은 엘리먼트가 있어야한다
그래서<Link><a>blahblah</a></Link>이렇게 사용해야한다.
css를 줄때는inline-style혹은className을 설정하면 된다.
만약 컴포넌트를 넣는다면 컴포넌트가 onclick props를 받아서 실행될수 있도록 해야한다.Link에는 href와 as 라는 props가 있는데 href는 해당 페이지로 이동해주는 역할을 하고 as는 href의 URL을 조금 더 직관적으로 만들어주는 역할
(쉽게 Redirect 도 가능)
Next.js에서는 history => router !!
history에서 사용한
goback도 여기선 그냥back만 써주면 된다.
history.push 대신 import Router from ‘next/router’;
Router.push(/brand=${props});
이런식으로 사용
👍🏻 server.js는 ‘커스텀 서버’로 라우트 마스킹을 해준다.
만약 Link 컴포넌트에서 as를 사용하게 되면 실제 페이지가 없는 곳에 요청하게 된다. 그래서 직접 커스텀 서버를 생성해서 as의 URL이 href를 바라볼수 있게 처리를 따로 해줘야 새로고침이나 뒤로 갔을 때도 렌더링이 가능해진다.
원래는 pages 디렉토리에 넣어야했지만 여기선 꼭 components 디렉토리에 넣지않아도 상대경로로 불러올수 있다.
✏️ Query Parameter
쿼리파라미터는
/brand?sectorsType=brand이런 형태이지만
props의 {url.query.keyword} 를 읽어주면 된다.
직접 주소에 쳐서keyword를 확인할수 있다.pathname parameter는 /brand/:id 이렇게 사용했는데 여기선 커스텀 서버 API를 사용해야한다.
구조상 /brand/13 이렇게 요청이 들어오면 pages/brand/13.js 파일을 렌더링을 시도 하기때문
✅ getInitialProps
getinitialProps 메소드는 서버사이드를 할것인지 클라이언트 사이드로 할것인지를 결정한다.
일반적인 React 렌더링 방식은 render()가 먼저 되고 그다음 ComponentDidMount() 함수를 통해 데이터를 가져와서 한번 더 ! 렌더링이 되는 방식이었다. 👀
반면에 Next는 getInitialProps()라는 함수를 사용하기 때문에 데이터를 먼저 가져온 후 한번에 렌더링을 한다.
이렇게 SSR은 한번에 렌더링이 되기 때문에 초기로딩 속도를 빠를 수 있지만 page 이동시 데이터를 불러와야 해서 CSR보다 느리다.
코드 스플리팅
일반적으로 SPA에서는 초기 렌더링때 모든 컴포넌트를 내려 받고 페이지를 나타내는데 규모가 커지고 용량이 커지면서 로딩속도가 지연되는 문제가 있다.
Next는 이러한 문제점을 개선해서 필요에 따라 파일을 불러오는 것이며 여러개의 파일을 분리하는 코드 스플리팅을 사용한것이다.static async getInitialProps ({req}) { return req ? { from : ‘server’ } : { from : ‘client } } return ( <Layout> { this.props.from } 에서 실행이 되었어요 </Layout> )
메소드에서 리턴하는 값이 해당 컴포넌트의 props로 전달된다.
파라미터로는 서버측의 req가 들어가고 그러면 client에는 undefined가 뜬다.
static async getInitialProps ({req}) { const response = await axios.get('https://jsonplaceholder.typicode.com/users'); return { users: response.data } }prefetch는 Link 컴포넌트 안에서 이뤄지는데 링크컴포넌트를 렌더링 할 때
<Link prefetch href=‘…’>형식으로 prefetch 값을 전달해주면 데이터를 먼저 불러온다음 라우팅을 시작한다.
