[정직하게 배워보는 Next js] 페이지를 연결하기 위한 Link-Component그리고 Pre-Fetch

해당 블로그 시리즈는 정직하게 배워보는 Next js 시리즈로써 총 8부작으로 이루어져 있습니다.
Next.js공식 홈페이지에서 이야기하는 내용을 최대한 이해하기 쉽고 직관적이게 구성하였습니다.

0. 목차

1. create-next-app으로 next 개발 환경 세팅하기

2. create-next-app에서 만난 첫 번째 핵심 pages. 그리고 동적 라우팅

3. 페이지를 연결하기 위한 Link-Component 그리고 Pre-Fetch

Dynamic Routing과 Link를 이용해 간단한 게시판을 만들어보자.

4. Next.js에서 head 태그를 조작하는 멋진 방법

번외 & 실습) 이미지와 동영상을 저장하고 사용해보자.

5. 웹의 발전 과정으로 보는 SSG와 SSR

6. next의 두 번째 핵심 Pre-Rendering

7. SSG로 검색 엔진 최적화 노리기

8. 정직하게 배워보는 Next.js 시리즈를 마치며..

---

우리가 페이지끼리 연결할 때 어떤 태그를 썼는지 생각해보자.

 

여기서 말하는 연결이란? 다른 페이지로 이동하거나 게시판에서 글을 클릭하거나 하는 행동을 했을 시에 우리가 브라우저로 보게되는 view를 바꿔보자는 이야기다.

 

우린 html의 <a></a> 를 이용해서 페이지를 이동했다.

 

근데 이 <a></a>태그를 이용할 경우 브라우저는 해당 페이지로 이동하기 위해서 viewport 전체를 새롭게 Rendering하기 때문에 화면이 깜빡거리며 필요하다면 네트워크를 이용하게 된다.

 

하지만 이런 과정 자체를 Next JS 에서는 Client Side Routing 으로 페이지를 연결하여 Single Page Application 처럼 만들어 네트워크 개입을 없앤다.

 

아니 잠깐 뭔가 이상하다. 우리는 SSR을 배우러 왔는데 왜 CSR을 해?

 

나를 포함한 사람들이 오해하고 있을 수 있는 부분이 있다.

나는 SPA의 CSR의 한계를 극복하고자 SSR을 위한 Next JS로 오게 되었다.

나와 비슷하게 react에서 next로 유입된 사람들이지만 이것 하나는 확실히 해야한다.

 

우리는 next.js를 Server Side Rendering 을 하려고만 쓰는게 아니라.

Server Side Rendering의 장점과 Client Side Rendering 의 장점을 적절히 섞은 좋은 성능의 앱을 만들기 위해 사용한다는 것을 염두해야 한다.

 

어떻게 Next js가 Client Side Rendering을 좋은 성능으로 제공하는 지는 다음에 있을 Pre-Rendering에서 알아볼 것이고, 오늘은 가볍게 Link와 Pre-Fetch 에 대해서만 알아가도 충분하다.

Link

우리는 지난 시간 동적 라우팅으로 url 파라미터에 따라 다른 컴포넌트를 만들었는데, 오늘은 새로운 페이지를 만들고 다른 페이지로 연결하는 것을 해볼 것이다.

next/link, <Link />를 사용할 경우 Pre-Fetch를 통해 페이지를 새로 고치지 않고 이동 할 수 있다.

import Link from "next/Link";

를 이용해서 Link 컴포넌트를 불러오자.

 

그리고 index.jsx를 다음과 같이 바꿔보자.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

그런 다음 pages 디렉토리에 about.jsx를 만들고 export 해보자.

import React from "react";

const About = () => {
  return <div>저는 오늘 nextjs 를 처음 배워요</div>;
};

export default About;

그럼 다음과 같이 index.jsx와 about.jsx가 연결된 것을 볼 수 있다.

동적 라우팅과 연결하는 방법

동적 라우팅과 연결한다고 해도 크게 어려울 것이 없다.

 

우선 다음과 같은 파일과 디렉토리를 만들어준다.

그리고 pages 디렉토리 안에 index.jsx 파일을 아래와 같이 수정해주자.

import Link from "next/link";

const users = [
  { id: 1, name: "James" },
  { id: 2, name: "Martin" },
  { id: 3, name: "Danial" },
];

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        {users.map((user) => (
          <ul key={user.id}>
            <Link href={`/user/${encodeURIComponent(user.id)}`}>
              <a>{user.name}</a>
            </Link>
          </ul>
        ))}
      </li>
    </ul>
  );
}

export default Home;

여기서 encodedURIComponent()가 쓰였는데, 혹시 문자열로 url이 들어간다면 utf-8 형식을 지켜주기 위해서 사용되었다.
먄악 숫자 형태의 url path라면 생략해도 무방하다.

 

그리고 pages 디렉토리 안에 user 디렉토리를 생성하고 [id].jsx 파일을 만든 뒤, 다음과 같이 작성하자.

import React from "react";
import { useRouter } from "next/router";
const User = () => {
  const router = useRouter();

  const { id } = router.query;

  return <div>{id} 번 user의 페이지 입니다.</div>;
};

export default User;

그럼 아래와 같이 잘 실행되는 것을 볼 수 있다.

Link 컴포넌트의 Props

Link 컴포넌트는 특정 속성만을 받는 HOC이기 때문에 지정된 속성이 아니면 오류를 뿜어낸다.

 

그래서 지정된 Attribute만 props로 받을 수 있는데, 아래는 공식 홈페이지에 나오는 지정된 Props 들이다.

 

 

만약 우리가 React-router-dom의 Link로 착각하고 className 속성을 준다면 어떻게 될까?

 

Warning: Failed prop type: Link: unknown props found: title

이런 오류를 뱉어낸다.

 

그래서 만약 link에 다른 속성을 (props)를 받고싶다면 Link만 쓸게 아니라 Link 안에 a 태그를 넣고 해당 태그에 attribute를 추가해야된다.

Code Splitting 과 Prefetching

Next가 Code Splitting 을 이용해서...

최초 페이지 요청이 있다면 모든 코드를 호출하는 Single Page Application과는 다르게 Next js 에서는 코드를 자동으로 분할해서 해당 페이지에 필요한 것만 로드한다.

즉, 홈페이지가 렌더링 될 때 다른 페이지의 코드는 호출되지 않기 때문에 Code Splitting이 있다면 수백개의 페이지가 있더라도 페이지는 빠르게 로드될 수 있다.

 

Next가 Pre-Fetcing 을 이용하니까...

 

그리고 Next js는 build 시점에 Link 컴포넌트가 브라우저에 표시될 때마다 백그라운드에서 링크된 페이지의 코드를 자동으로 설정한다.

그래서 페이지의 전환이 SPA와 비슷하게 즉시 이루어지는 것 처럼 느낄 수 있다.