[Next.js] 공부하기

Junsoo Choi·2021년 6월 30일

Basic Features

Rendering Option

Static Generation: HTML is generated at build time
Server-side Rendering: HTML is generated on each request
Client-side Rendering

Data Fetching

getStaticProps(static generation): Fetch data at build time.
- Incremental Static Regeneration: revalidate 옵션을 주면 해당 시간초 이후에 새로 페이지를 build하여 기존에 캐싱되어있던 페이지를 invalidate하고 새로운 페이지를 캐싱한다.
getStaticPaths(static generation): Specify dynamic routes to pre-render pages based on data.
paths: 어떤 path들을 pre-render할지 결정
fallback:
- false일 경우, paths에 정의되지 않은 경로의 경우 404 error 페이지가 표시된다.
- true일 경우, paths에 정의되지 않은 경로는 일단 fallback page를 보여주고 그제서야 getStaticProps를 실행하며 페이지를 생성하기 시작한다. 만약 본인의 어플리케이션이 엄청나게 많은 static page들이 있을경우, build시간이 기하급수적으로 올라가기 때문에, 일부만 paths에 추가하여 build time에 생성하고 나머지는 fallback: true로 요청되었을 때 빌드하는 것이다.
- blocking일 경우, true와는 다르게 해당 페이지가 빌드되는 동안 아무 페이지가 표시되지 않다가 완성되면 반환하고 pre-rendered 페이지로 캐싱된다.
getServerSideProps(SSR): Fetch data on each request.

Image Optimization

Next.js의 image component인 next/image는 HTML element인 <img>의 extension으로서, 자동으로 최적화를 해준다.

이미지들은 기본적으로 lazy-load되므로 viewport에서 벗어난 이미지들은 로드되지 않는다.

next.config.js에 명시하여 image optimzation의 설정을 할 수 있다.

domains: 이 배열에 추가된 도메인의 이미지들만 optimzation을 수행한다.
loader: next.js의 기본 optimizer가 아닌 다른 provider의 optimizer를 사용할 수 있다.

이미지들은 동적으로 최적화되어 <distDir>/cache/images에 저장되며 expiration시간이 될 때까지 유지된다. 또 deviceSizes와 imageSizes를 설정하여 생성되는 이미지의 개수를 조절할 수 있다.

Fast Refresh

개발할 때 component를 수정하면 바로바로 결과물이 보이는 것.
(=hot module replacement)

Routing

Next.js has a fs based router built on the concept of pages.

When a file is added to the pages directory it's automatically available as a route.

pages/post/[pid]/[comment].js > /post/abc/a-comment

// query object
{ "pid": "abc", "comment": "a-comment" }

pages/post/[...slug].js > /post/a/b/c

// query object
{ "slug": ["a", "b", "c"] }

pages/post/[[...slug]].js로 하면 slug가 optinal이 된다.

Shallow Routing

useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

이렇게 shallow 옵션을 주게되면 주로 외부의 데이터를 받아오는데 사용되는 Data fetching methods( getServerSideProps, getStaticProps, getInitialProps)를 실행하지않고 route의 state(query object)만 변경된다.

Advanced Features

Dynamic import

일반적으로 사용되는

import { fuction } from './module'

의 경우 build time에 load가된다. 하지만

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/hello'))

을 사용하면 runtime에 load가 되어 초기 구동속도가 빨라진다.

Automatic Static Optimization

Next.js는 페이지에 blocking data requirements가 없는 경우, 즉, getServerSideProps와 getInitialProps가 없는 경우 자동으로 static page로 판단하고 static HTML로 prerendering을 진행한다.