Next.js
- Vercel에서 만든 React에서 SSR 환경을 만들 때 필요한 다양한 옵션들을 기본적으로 제공하는 프레임워크
왜 Next.js를 사용하나
코드 스플리팅 (렌더링 최적화)
- 하나의 큰 번들 파일을 여러개의 작은 번들 파일들로 쪼개는 것
- Next.js는 기본적으로
pages폴더에 있는 파일별로 코드 스플리팅을 제공한다. - 한번에 큰 번들 파일을 다운로드 하지 않고 필요한 작은 번들파일들만 로드함으로써 초기 로딩시간을 줄여준다.
- 유저가 현재 필요하지 않은 코드(번들파일)는 로드 하지 않음으로써 앱의 성능을 높일수 있다.
서버컴퓨팅 성능
- 기본적으로 서버의 컴퓨팅파워가 더 좋다.
- 콘텐츠가 많은 앱인 경우 서버에서 모든 콘텐츠를 만들고 내려주기 때문에 성능상 이점이 있다.
SEO 최적화
- 콘텐츠가 모두 채워져있는 상태로 브라우저로 내려주기 때문에 SEO 대응이 좋다.
- 검색엔진은 첫화면이 빠르게 로딩되는 사이트에 추가점수를 부여하기에 SSR이 더 이점이 있다.
페이지 캐싱
데이터 저장소에 연결하기 위한 서버 측 코드 작성
API Proxy
Client rendering
- 웹 사이트 내부 탐색 및 페이지 전환과 관련하여
CSR은 페이지 로드 속도를 높이고 사용자 경험을 개선하는 데 중요함 - Next.js는 링크를 빌드하는데 사용할 수 있는
Link컴포넌트를 제공 - 새로고침없이 즉시 로드 된다.
- History API를 완벽하게 지원
import Link from 'next/link'
export default () => (
<div>
<p>Hello World!</p>
/* Link 컴포넌트 안에 <a> 기입
주소는 Link 컴포넌트에!! */
<Link href="/contact">
<a>Contact me!</a>
</Link>
</div>
)
CSR의 문제점
1. 페이지가 사용자에게 표시되는데 시간이 더 오래 걸린다.
Javascript를 해석하는 시간 + 동적으로 DOM을 그리는 시간
2. SEO에 취약하다.
국내 검섹엔진은 아직까지 js를 해석하지 못하기 때문
주요 기능
- Hot Code Reloading
- Next.js는 디스크에 저장된 변경 사항을 감지하고 페이지를 리로드한다.
- Automatic Routing
- 모든 URL은
pages폴더에있는 파일에 매핑되며 다른 구성이 필요하지 않는다.
- 모든 URL은
- Single File Components
- Server Rendering
- 클라이언트에 HTML을 내려주기 전에 서버에서 React 컴포넌트를 선택적으로 렌더링 할 수 있다.
- Ecosystem Compatibility
- Automatic Code Splitting
- Prefetching
- Dynamic Components
- Static Exports
pages
_app.js
pages컴포넌트들의 공통 부분으로 적용할 속성 정의- 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트
- 페이지에 적용할 공통 레이아웃의 역할
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyAppComponent: 서버에 요청한 페이지 (페이지 컴포넌트의 return 부분이 Component로 들어온다)pageProps: getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 페칭한 초기 속성값
_document.js
_app.js다음에 실행되며, 공통적으로 활용할<head>,<body>태그 안에 들어갈 내용들을 커스텀할때 활용
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument- Document를 상속받는 클래스로 작성
- 렌더함수는
<Html>,<Head>,<Main>,<NextScript>요소를 필수로 리턴시켜야 한다. document.js에서 사용하는<Head>는next/head가 아닌next/document에서 import
<Head>
- Next.js에서 제공하는
<Head>를 사용하여 메타태그 또는 타이틀 수정import Head from 'next/head'; const Component = ({ Component }) => { return ( <> <Head> <meta charset="utf-8" /> <title>Head Title</title> </Head> </> ) } export default Component;
_error.js
etc
Custom babel
- Next.js는 IE11을 기본적으로 지원하긴 하지만 추가적인 바벨 설정을 추천
- babel preset을 별도로 설정해주었을 때 빌드되는 결과물이 달라진다.
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
Front-End 😲