[Next.js] Next.js가 제공하는 여러 기능들 - Client-side Navigate 부터 Prefetching까지

Next.js가 제공하는 여러 기능들

1. page-based routing system(with dynamic routes)

pages 하위에 있는 파일들을 가지고 Routing을 구현했었습니다. 그리고 Slug를 통해 Dynamic한 routes도 제공하고 있었습니다.

 

2. Pre-rendering SSG / SSR

Next.js에서 Data Fetching 하는 방식을 말하면서 pre-rendering에 대해서도 이야기 했었고, 그 중에서도 SSG와 SSR이 있었죠? SSG는 Static Side Generation이고, SSR은 Server Side Render였죠. 그래서 빌드하는 타이밍에 먼저 렌더해 놓을 것인가 아니면 요청이 올 때마다 새로 렌더해서 줄 것인가의 차이였습니다. 그렇지만 둘 다 pre-render가 가능했습니다.

 

3. Automatic code splitting for faster page loads

우리가 프론트엔드 서비스를 만들고, 그것을 사용자에게 제공을 하려고 한다면, 결국에는 어떤 파일로 시연이 되야 할 것입니다. 이때 그 파일을 만들 때 한뭉탱이로 만들 수도 있겠고 아니면 적절하게 쪼개서 만들 수도 있는데 그 부분을 Code Splitting이라고 합니다. Next.js는 나름의 최적화 알고리즘을 통해 페이지 단위 혹은 공통된 단위 즉, 적절한 사이즈로 Code를 Splitting합니다. 이 과정을 통해 특정 페이지 이동 혹은 이용을 할 때 딱 필요한 만큼의 코드들만 쪼개서 가져오기 때문에 페이지를 빠르게 로드할 수 있다는 장점이 있습니다.

 

4. Client-side routing with optimized prefatching

Next.js에서는 Client-side Routing을 할 수가 있는데요. 이는 Prefetching이라는 방법을 통해 최적화를 할 수 있습니다.

 

5. API Routes(with Serverless Functions)

서버 없이도 Next.js라는 프레임워크만을 가지고도 가능했습니다.

 

6. Development environment(with Fast Refresh)

변경점이 저장하면 바로바로 변경되는 등의 장점을 가지고 있는 환경을 제공합니다.

 

프로젝트 만들기

이번 글에서부터는 새로운 프로젝트 파일을 만들고 그 안에서 다양한 것들을 살펴보려고 합니다 :)

$ yarn create next-app blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

프로젝트가 만들어졌다면 prettier 설정도 추가해줍니다.

$ yarn add -D prettier

 

📜 .prettierrc 파일

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

 

Pages 만들기

간단하게 폴더와 파일들도 만들어봅시다.

📜 pages/posts/first-post.js 파일

export default function FirstPost() {
  return <h1>첫 번째 글</h1>
}

/posts/first-post 라는 URL로 들어가 확인해봅시다 :)

실행 화면

아주 잘 떠있는 것을 확인했습니다!

 

Link Component

Link 컴포넌트와 a 태그 모두 페이지 이동을 할 수 있습니다. 이 둘의 차이점을 알압봅시다.

<h1 className={styles.title}>
  Read this Post <Link href="/posts/first-post">첫 번째 글</Link>
</h1>
<h1 className={styles.title}>
  Read this Post <a href="/posts/first-post">첫 번째 글(a tag)</a>
</h1>

1. Link 컴포넌트로 이동

 

2. a 태그로 이동

차이점이 느껴지시나요?

a태그로 이동하게 되면 기본적인 웹앱 기능으로 동작한 것과 같은데요. 쉽게 말하면 우리가 주소창에 url을 치고 엔터쳐서 들어간 것과 같다고 보면 됩니다. 그래서 a 태그를 사용하면 Link 컴포넌트가 제공하는 어떠한 최적화의 도구들이 전혀 사용되지 않는다고 보면 됩니다.

 

반면 Link 컴포넌트를 이용하면 이 페이지 안에서 필요한 내용들만 추가적으로 불러오는 식입니다. 자바스크립트가 그대로 있는 상태에서 추가적인 부분만 가져오는 식입니다. a 태그는 문서 자체를 처음부터 다시 불러옵니다.

 

아래에서 상세하게 살펴봅시다 :)

 

Client Side Navigate

브라우저에서 url을 직접 쳐서 이동하는 것과 달리 JS 상에서 page 컴포넌트 교체하는 것을 의미합니다. 이를 확인하기 위해서는 background-color를 body에 주고 navigate를 해보면 됩니다. 간단하게 확인해 봅시다 :)

 

간단하게 개발자 도구에서 body 태그를 찾아 background 속성을 추가해줍니다.

이렇게 background를 준 상태에서 a태그로 이동해 보겠습니다.

a 태그로 이동

색깔이 유지가 안 되는 것을 확인할 수 있었습니다. 반면에 Link 컴포넌트로 이동해보겠습니다.

Link 컴포넌트로 이동

반면 Link 컴포넌트로 이동했을 때는 유지가 되었습니다. 이 말은 개발자 도구에서 설정한 스타일이 사라지지 않았다는 것이고, 이 페이지 html이 reload 되지 않았다는 말입니다. 이 페이지가 새로 reload가 되었다면 개발자 도구를 통해 설정했던 background가 없어졌을 것입니다.

 

이 말은 웹앱 문서가 새로 로드된 것이 아니라 특정 JS 파일만 로드되었다는 말입니다. 이를 통해 모든 데이터가 새로 그려지고 새로 받아지는 것이 아닌 사용자에게 필요한 부분만을 추가적으로 가져와서 굉장히 빠르게 동작할 수 있게 최적화할 수 있는 기능들을 Link 컴포넌트가 가지고 있다고 볼 수 있겠습니다. 

 

Code Splitting

Next.js는 Automatic Code Splitting을 제공합니다. 따라서 다음과 같은 것들이 가능합니다.

 

- 특정 페이지에 접근할 때는 해당 페이지를 그릴 때 필요한 chunk(부분)만 로드

- 페이지 이동을 할 때는 목적지 페이지에 필요한 chunk만 추가 로드

 

위 내용을 좀 더 자세히 살펴보겠습니다.

Next.js가 Code Splitting을 통해 부분적으로 잘 나눠놨기 때문에 이 페이지를 그릴 때 필요한 것들만 목록을 리스트업 해서 그것만 JS를 가져오는 것입니다. 그리고 페이지를 이동할 때는 이미 받아온 것을 가지고 있으니 새로운 페이지를 그릴 때 추가적으로 필요한 부분만 가져오는 것입니다. 훨씬 더 조금 가져올 것입니다.

 

이를 통해 성능이 최적화가 됩니다.

 

Prefetching

<Link> 컴포넌트를 이용하면, Viewprot에 Link 컴포넌트가 노출되었을 때 href로 연결된 페이지의 chunk를 로드합니다.

이게 어떻게 동작하는지 살펴봅시다.

 

<footer> 태그 위에 <Link> 컴포넌트로 /posts/second-post로 이동할 수 있도록 하나더 만들었습니다. 그 후에 개발자 도구를 보면 알 수가 없고, 이번에는 빌드 후 start 하여 확인해야 합니다.

 

start 후 네트워크 탭에서 JS를 확인해 보면 아래와 같습니다.

여기서 보면 first-post에 대한 JS가 로드된 것을 확인할 수 있습니다. 그 이유는 메인 페이지 상단에 Link 컴포넌트가 노출되어있기 때문에 이 페이지는 스스로 인지하는 것입니다. 사용자에게 이 Link가 노출되어 있구나! 사용자가 누를 수도 있겠구나! 하면서 누르면 필요할 first-page를 그릴 데이터를 미리 가져오겠다! 그걸 Next.js가 하는 것입니다. 

 

또 하나 신기한 점이 있는데요. 아까 제가 footer 태그 바로 위에 Link 태그를 하나 썼었죠?

스크롤을 내려서 Link 태그가 화면에 노출되니까 그제서야 second-post 데이터를 가져왔습니다. 이 말은 위에 있을 때는 하단에 있는 두 번째 글을 누를 수 없다는 것을 알고 있다는 말입니다. 하지만 스크롤을 내려서 사용자가 이 ⭐ Link도 클릭할 수 있다면 이 페이지도 미리 가져와서 사용자가 누르면 바로 페이지를 보여주도록 하자⭐입니다.

그래서 미리 로드한 그 페이지에 들어가면 네크워크 탭에 아무 것도 안 올라옵니다...

 

이것이 바로 Prefetching입니다.

특정 페이지를 로드하자마자 Link 컴포넌트와 연결되어 있는 페이지를 미리 가져온다는 것입니다.

 

그래서 Link 컴포넌트를 이용했을 때 Client Side Navigate를 이용해서 최적화도 했고, 원래 Next.js에서 Automatic Code Splitting을 통해 또 최적화 기능들이 동작하는 와중에, Link 컴포넌트를 이용하면 스크롤해서 Viewport안에 Link가 노출되는 순간 그 이후에 접근하게 될 목적지 페이지에 대한 파일을 미리 불러와서 사용자가 더 빠르게 페이지를 이동할 수 있는 경험을 하게 해준다는 것이죠 !

 

---

이번 글에서는 Link Component와 Client-side Navigate에 대해 주로 다뤄봤습니다 :)

 

1. 프레임워크 익히는 최상의 방법

실제 서비스를 프레임워크를 만들기라고 할 수 있겠습니다.

 

2. Link Component

Link 컴포넌트는 Next.js 에서 제공하는 링크 기능을 담고 있었으며, 이를 통해 할 수 있는 다양한 최적화 기능들이 내제 되어 있었습니다.

 

3. Client Side Navigate

url을 새로 쳐서 접근하는 것과 달리 JS 상에서 변경되어 빠르게 목적 페이지를 볼 수 있었습니다.

 

4. Prefetching

Viewport 내에 Link 컴포넌트가 들어있다면 그 목적지 페이지를 미리 fetching하는 것이였습니다.