Next.js - Getting Started - 1

Next.js

React로 완전한 웹 애플리케이션을 처음부터 빌드하려면 고려해야 할 중요한 세부 사항이 많이 있습니다.

• 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 트렌스파일러를 사용하여 변환되어야 합니다.
• code spliting과 같은 production최적화를 수행해야 합니다.
• 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링할 수 있습니다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있습니다.
• React앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 할 수도 있습니다.

Next.js는 위의 문제에 대한 최고의 해답을 제공합니다.

 

Next.js 시작 ( 공식문서 )

Pages

Next.js 에서는 '.js', '.jsx', '.ts', 'tsx'의 확장자로 컴포넌트가 export되어 진다( pages 라는 폴더 안의 ). 각각의 페이지는 파일의 이름에 연관되어 진다.

 

 

Routing

Next.js의 routing은 pages로 이루어 지는 것이 가장 일반적이다.

< Index routes >

기본적으로 index는 root디렉토리를 뜻한다.

- 'pages/index.js' -> '/'

-' pages/blog/index.js' -> '/blog'

 

< Nested routes>

Next.js는 nested file을 지원한다. 

- 'pages/blog/first-post.js' -> '/blog/first-post'

- 'pages/dashboard/settings/username.js' -> '/dashboard/settings/username'

 

< Dynamic route segments >

- 'pages/blog/[slug].js' -> '/bog/:slug' ( 'blog/hello-word' )

- 'pages/[username]/settings.js' -> '/:username/settings' ( `foo/settings' )

- 'pages/post/[...all].js' -> '/post/*' ( '/post/2020/id/title' )

 

< Linking between pages >

Next.js의 라우터는 client-side의 라우터와 같이 즉 SPA와 같은 사용자 경험을 나게 해준다.

 

// pages/home.tsx

import type { NextPage } from "next";
import Link from "next/link";

const About: NextPage = () => {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/post/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  );
};

export default About;

이렇게 코딩하고 나서 localhost:3000/home으로 가게 되면 라우터가 생기게 된다.

 

Any '<Link />'in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using Static Generation. The corresponding data for server-rendered routes is not prefetched

대충 Link태그는 Static Generation에는 prefetch가 되고 Server-rendered에서는 prefetch가 되지 않음을 의미하는듯..?

< Linking to dynamic paths >

또한 컴포넌트의 속성으로 넘겨받은 post들을 list로 보고 싶으면

~ 추가..

 

Dynamic Routing

또한 Page는 Dynamic Routes를 지원한다.

// pages/post/[pid].tsx

import type { NextPage } from "next";
import { useRouter } from "next/router";

const Post: NextPage = () => {
  const router = useRouter();
  const { pid } = router.query;

  return <p>Post: {pid}</p>;
};

export default Post;

위와 같이 작성해서 localhost:3000/post/asdf로 들어가게 된다면 router.query의 object는 { pid: "asdf" }가 되어 위와 같은 화면을 볼 수 있게 된다.

또한 querystring을 적용할 수 있는데 /post/asdf?foo=bar라고 하게 된다면 router.query의 object는 { pid: "asdf", "foo": "bar" }가 된다. 또한 쿼리스트링과 [~]안의 내용이 같게 된다면 [~]대괄호 안의 값 하나만 적용이 되게 된다.

또한 Multiple dynamic route또한 동일한 방식으로 적용되게 된는데 예를 들어 `page/post/[pid]/[comment].js`는 `/post/asdf/asdf-comment`와 매칭되며 router.query의 object는 { "pid": "asdf", "comment": "asdf-comment" }가 된다.

 

 

Pre-redering

기본적으로 Next.js는 모든 페이지를 pre-render한다. pre-render한다라는 의미는 Next.js는 각각의 페이지를 미리 HTML로 만들어 놓는다는 의미이다 ( client-side에서 자바스크립트 파일을 실행해서 HTML을 렌더링 하는 것이 아니라 ). Pre-redering은 더 좋은 SEO성능 향상을 기대할 수 있게 된다.

 

또한 각각의 HTML파일들은 페이지를 위한 최소한의 JavaScript코드들을 가지고 있습니다. 페이지가 브라우저에 로드 될 때, 페이지의 javascript코드가 이 HTML페이지를 Interactive하게 만들어 준다. 이러한 과정을 hydration이라고 한다.

 

Two forms of Pre-rendering

Next.js는 두가지의 pre-rendering형태를 가지고 있다. 

바로 Static Generation과 Server-side Rendering입니다. 이 둘간의 차이는 언제 HTML페이지를 만들어 내는지에 있다.

Static Generation은 pre-rendering으로 사전에 미리 HTML문서로 생성하여 가지고 있는 것이다. 즉 Pure React에서 CSR방식은 번들링 된 js가 클라이언트 단에서 모든 추가 렌더링을 담당했다면 Next의 pre-rendering시스템에서는 빌드 타임 떄 해당하는 페이지 별로 각각의 HTML문서를 미리 생성해 가지고 있다가 서버로 요청이 들어올 때 알맞은 페이지를 반환해 준다.

정리하자면

1. Static-Generation( Recommended ): HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML문서를 반환한다.

2. Server-Side-Rendering: 요청이 올 때 마다 해당하는 HTML문서를 그때 그때 생성하여 반환한다.

Next에서는 다음과 같은 경우에 Static-Genration을 사용할 것을 권고하고 있다.

• 퍼포먼스에 집중(CDN을 통해 더 빠른 응답 가능)
• 마케팅 페이지 / 블로그 게시물 / 제품의 목록 등과 같이 정적 생성하여 각 요청에 동일한 문서를 반환할 수 있는 경우

반면 SSR방식은 유저의 요청 때마다 그에 상응하는 HTML문서를 생성하여 반환하는 방식이다. 즉 SSR을 사용하는 경우는 다음과 같이 설명하고 있다.

• 항상 최신 상태를 유지해야 하는 경우 ( 요청에 따라 응답해야 할 내용이 시시각각 변함 )
• 제품의 상세 페이지 / 분석 차트 등 요청 마다 다른 내용 또는 형식의 HTML문서가 반환되는 경우

그렇다면 CSR은?

그렇다면 CSR방식을 사용하지 않는가?

그렇지 않다 SSG방식이 CSR을 대체하는 개념이 아니다. 기본적으로는 SPA는 CSR방식이 기본 전제이다. Next에서도 링크 태그를 사용하면 별다른 새로고침 없이 이동하는 것을 확인할 수 있다. 즉 Next라는 프레임워크를 사용하면 CSR + ( SSR or SSG )전략으로 운용할 수 있다고 볼 수 있다. 이에 대해 Next공식문서에는 만약 데이터의 변동이 매우 빈번하게 일어난다면 굳이 (데이터에 대한)pre-rendering을 취하지 말고 기존 pure react에서 처럼 data-fetching을 통해 클라이언트 사이드에서 렌더링 할 것을 권고하고 있다( 물론 첫 페이지 일부는 Static Generation일 것이다.)