Next의 기본 기능

pages

• Next에서는 하나의 페이지가 하나의 리액트 컴포넌트이다.
• 페이지는 파일의 이름에 따라 경로와 연결된다.
  만약 아래와 같은 Home이라는 페이지가 있다면 이 페이지의 경로는 localhost:3000/view/Home이 된다.
  리액트에선 route를 따로 설정해줘야 했지만 Next에서는 경로 설정의 부분에서 자유로워졌다.

// pages/view/home.js
function Home() {
  return <div>Home</div>
}

사전 렌더링

Next로 만들어진 애플리케이션을 빌드를 할 때, 페이지별로 다음 두 가지 방법으로 렌더링된다.

• 정적 생성(Static Generation):
  정적인 마케팅 페이지, 정적인 블로그, 대시보드 페이지 등에서 주로 사용된다.
  빌드할 때 HTML 파일로 렌더링된다. (차단 데이터 요구사항 없이 페이지를 사전 렌더링)

• 서버 사이드 렌더링(Server Side Rendering):
  데이터가 자주 업데이트되는 페이지, CMS 지원 페이지 등에서 주로 사용된다.
  요청이 서버로 들어 오면 페이지가 즉시 렌더링된다.

Data fetching

앞서 사전 렌더링에 대해서 살펴봤는데, 사전 렌더링은 Next가 데이터를 가져오는 방식과도 연관되어 있다.

• 정적 생성

import fetch from 'unfetch'
import useSWR from 'swr'

const API_URL = 'https://api.github.com'
async function fetcher(path) {
  const res = await fetch(API_URL + path)
  const json = await res.json()
  return json
}

function HomePage() {
  const { data, error } = useSWR('/repos/zeit/next.js', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>Next stars: {data.stargazers_count}</div>
}

export default HomePage

정적 생성으로 데이터를 가져올 때는 getInitialProps를 사용하지 않고 SWR이라는 리액트 훅스 라이브러리를 사용한다.
위의 코드와 같이 useSWR 함수를 통해서 API 서버로부터 데이터를 분류해 서버 사이드 렌더링을 하지 않고 데이터를 로드 할 수 있다.

• 서버 사이드 렌더링

import fetch from 'isomorphic-unfetch'

function HomePage({ stars }) {
  return <div>Next stars: {stars}</div>
}

HomePage.getInitialProps = async () => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default HomePage

반면에 서버사이드 렌더링으로 데이터를 가져올 때는 getInitialProps 메서드를 사용하게 되는데
getInitialProps를 사용하면 페이지가 렌더링되기 전에 데이터를 로드할 수 있다.

Static File Serving

Next는 정적 파일과 이미지 파일들을 public 폴더에서 관리하는데 Next는 이런 정적 파일들을 불러와서 사용하는데 편리함을 준다.

function MyImage() {
  return <img src="/my-image.png" alt="my image" />
}

export default MyImage

리액트에서는 이미지 파일의 절대 경로를 입력해주어야 하지만 Next에서는 정적 파일들의 기본 경로가 public으로 설정되어 있다.

참조