Next.js start

Posted on In ,

Next.js란

nextjs는 React로 만드는 서버사이드 렌더링 프레임 워크다. 서버사이드렌더링이란 브라우저 혹은 클라이언트에서 실행하지 않고 서버측에서 데이터를 실행하여 모든 js 파일을 로드하고 그 데이터를 웹상에서 먼저 확인 뒤에 사용자는 웹을 보게된다

기존의 react의 구동원리는 클라이언트 사이드렌더링 방식이며 이 경우에는 자바스크립트가 dom을 생성하기 전에는 아무것도 파악되지 않아서 문제를 만들게 되는데 그 문제의 대표적인 문제가 SEO의 부재처리가 될 것이다.

SEO(검색 엔진 최적화)라는 것은 구글의 검색엔진만의 문제가 아닌 대부분의 검색엔진에서 서버사이드렌더링 방식의 데이터만 파싱되기 때문에 검색에 걸리지 않고 그것은 바로 매출에 큰 악영향을 주게 됩니다. 프론트엔드만의 문제가 아닌 회사 전체의 사활이 걸린 문제라고 할 수 있다.

Next.js의 이점

그러한 SEO문제를 NEXT.JS에서는 두가지 방식을 한번에 쓰는 것으로 해결하였습니다.
데이터를 인식하게 할 부분( meta ,description ,keyword etc)은 서버에서 자바스크립트를 로딩하게 하며 ( Server Side Rendering) 비동기적인 부분이나 api를 통해서 새로운 페이지를 불러오는 경우에는 클라이언트 사이드 렌더링(Client Side Rendering)을 통해 빠른 속도로 데이터를 처리하는 것이 nextjs의 큰 이점이라고 생각한다.

또한 프레임워크로서 새로운 기능도 여러 모듈로서 추가되었는데 몇가지만 정리해보려고 한다.

  1. Document기능
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
         
        </Head>
        <body>
          <Main />
        </body>
        <NextScript />
      </Html>
    );
  }
}

html에서 자주 쓰는 Html, Head와 같은 방식으로 서버사이드 방식으로 할 부분을 지정하는 기능이다
모든페이지에 아래 메타테크가 head에 웹 타이틀,ga,meta기능을 추가하여 SEO적인 부분을 크게 보완하였다.

  1. Link 기능

보통 페이지간 이동은 a 태그를 사용하나 next에서는 사용하지 못한다.

a 태그를 사용하면 처음 페이지에 진입시 번들 파일을 받고, a 태그에 의해 라우팅 되면 다시 번들 파일을 받는 것이 문제가 되기에 또한 redux의 경우 store의 state 값이 증발되는 현상도 일어난다. 그렇기 때문에 a 태그는 전혀 다른 사이트로 페이지를 이동시켜 다시 돌아오지 않는 경우만 사용하고, 그 이외에는 모두 Link 태그를 사용합니다.

  1. getStaticProps

페이지에서 (정적 사이트 생성) 이라는 함수 를 내보내는 경우 Next.js는 빌드 시getStaticProps를 통해서 반환된 props를 사용하여 페이지를 미리 렌더링하기 위한 기능이다.
보통 api나 데이터 파싱을 하고 그 데이터를 서버에 남겨 데이터를 SEO에 기여하고 싶을 경우에 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


// 공식문제 예시 
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {

  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog


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


export async function getStaticProps() {

  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

그외에도 더 많은 툴이 존재하지만 다음 기사에 정리해볼 생각이다.