Next.js

Next.js

  React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. React는 SPA(Single Page Application)로 CSR(Client Side Rendering)을 하기 때문에 검색 엔진 최적화(SEO) 부분에 단점이 존재합니다. Client Side Rendering을 하면 첫페이지에서 빈 html을 가져와 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출될 일이 거의 없습니다.

 

  Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있습니다.

 

SSR (Server Side Rendering)

• 클라이언트 대신 서버에서 페이지를 준비하는 원리입니다.
• React에서는 클라이언트 사이드 렌더링하기 때문에 서버에 영향을 미치지 않고, 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있습니다. 그러므로 서버에서 데이터를 가져올 때 지연 시간 발생으로 UX 측면에서 좋지 않을 수 있고, 검색 엔진 최적화에 문제가 됩니다.
• Next.js에서는 서버 사이드 렌더링을 이용합니다.

 

설치 방법

npx create-next-app@latest
# or
yarn create next-app

 

Next.js 파일 구조

 

Data Fetching

  Next.js 에서 데이터를 가져오는 방법은 여러가지가 있습니다. 애플리케이션 사용 용도에 따라 다른 방법을 사용하면 됩니다.

• getStaticProps: Static Generation으로 빌드(build)할 때 데이터를 불러옵니다(미리 만듭니다).
• getStaticPaths: Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅을 구현합니다(pages/post/[id].js).
• getServerSideProps: Server Side Rendering으로 요청이 있을 때 데이터를 불러옵니다.

 

getStaticProps

  getStaticProps 함수를 async로 export 하면, getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render 합니다. build time에 페이지를 렌더링 합니다.

• 사용자의 요청보다 먼저 build time에 필요한 데이터를 가져올 때 사용합니다.
• Headless CMS에서 데이터를 가져올 때 사용합니다.
• 공개적으로 캐시할 수 있을 때 사용합니다.
• SEO의 경우 사용합니다(getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다).

function Blog({ posts }) {
  return (
    <ul>
      {post.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  
  return {
    props: { // will be passed to the page component as props
      posts,
    },
  }
}

 

getStaticPaths

  동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의합니다. build time에 렌더링 됩니다.

return {
  paths: [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ],
  fallback: ...
}

• paths: pre-render 될 경로를 지정합니다(pages/posts/[id].js). 빌드하는 동안 /posts/1과 /posts/2를 생성합니다.
• fallback: false라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜹니다. true라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜹니다.

function Post ({ post }) {
  // Render post...
}

export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  
  const paths = posts.map((post) => ({
    params: {id: post.id },
  }))
  
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
  
  return { props: { post } }
}

export default Post

 

getServerSideProps

  getServerSideProps 함수를 async로 export 하면, Next는 각 요청마다 리턴되는 데이터를 pre-render 합니다.

function Page({ data }) {
  // Render data...
}

export async function getServerSideProps() {
  const res = await fetch('https://.../data`)
  const data = await res.json()
  
  return { props: { data } }
}

export default Page

 

 

 

[참고 정보]

인프런- 따라하며 배우는 리액트 A-Z