pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주면서, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있습니다. pre-reloading은 SSR 뿐만 아니라 SSG(Static Site Generate - 정적 사이트 생성)도 가능하게 해줍니다. 또한 SSR 과 CSR도 혼합하여 사용 할 수 있습니다.
SEO 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 보이지 않습니다. 구글의 검색엔진의 경우 자바스트립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않는 문제가 발생합니다.
Hot reloading
개발 중 저장 되는 코드는 자동으로 새로고침 됩니다.
Automatic Routing
페이지 기반 라우팅 시스템이 제공 됩니다. pages 폴더에 있는 파일은 해당 이름으로 라우팅 됩니다.
또 /user/[id] 같은 dynamic route도 지원합니다.
Client Side Navigation
Next.js는 <Link /> 컴포넌트를 통해서 페이지간의 빠르고 매끄러운 이동이 가능합니다. HTML의 a 태그와 달리 페이지를 리로딩 하지 않고 페이지간 이동이 가능합니다. 이럴수 있는 것은 link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문입니다. 이를 통해 사용자가 링크를 클릭했을 때 빠르게 해당 페이지로 이동할 수 있게 해줍니다.
Code Splitting
dynamic import를 이용하면 손쉽게 Code Splitting이 가능합니다.
코드 스플리팅은 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것입니다. 모든 번들이 하나로 묶이지 않고, 각각 나뉘어 보다 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.
// index.js
import React from 'react'
import dynamic from 'next/dynamic'
// index 라우트에서 사용할 루트 컴포넌트(HomePage)를 dynamic import로 불러온다.
const Home = dynamic(() => import('components/pages/HomePage'))
class index extends React.Component {
render() {
return <Home></Home>
}
}
export default index
구성
_app.tsx
import { AppProps } from 'next/app'
import Layout from '@/components/Layout'
import base from '@/styles/base'
export default function App({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
최초로 실행되는 것이 _app.tsx 입니다. _app.tsx 에서 렌더링 하는 값은 모든 페이지에 영향을 줍니다.
_app.tsx는 클라이언트에서 띄우기 바라는 전체 컴포넌트는 공통 레이아웃임으로 최초 실행되며 내부에 컴포넌트들을 실행합니다.(위와 같이 Layout 컴포넌트를 별도로 만들어서 사용 하는 방법도 있습니다.) 내부에 컴포넌트가 있다면 전부 실행하고 HTML의 body로 구성됩니다.
Componet, pageProps를 받습니다. 여기서 props로 받은 Component는 요청한 페이지이고, GET / 요청을 보냈다면 Component에는 /page/index.js 파일이 props로 내려오게 됩니다. pageProps는 페이지 getInitialProps를 통해 내려받은 props들을 말합니다.
그 다음 _document.tsx 가 실행됩니다.
_app.tsx에서 cosole.log 실행시 client, server 둘다 콘솔이 찍힙니다.
