[next] App router

NextJS

---

Nextjs 13 App router

1. App router에 대해 정리하기 전에 next부터 정리

1) next 등장배경

컴포넌트 단위의 개발인 react는 높은 확장성과 유연함을 가지고 있습니다. next는 react의 장점을 유지하는 동시에 SSR(Server Side Rendering)을 수행하기 위해 등장합니다.

 

SSR 이란?

브라우저가 서버에서 생성된 HTML을 응답받아서 출력해 주는 방식입니다. 서버에서 HTML을 생성하므로 Server side Rendering, 서버 사이드 렌더링이라고 표현합니다.

 

이와 대비되는 방식으로는 브라우저가 서버로부터 javascript 코드를 응답받고, 이를 사용하여 HTML을 직접 렌더링 하는 CSR(Client side Rendering), 클라이언트 사이드 렌더링이 있습니다. 본문에서 클라이언트란 브라우저를 말합니다.

 

SSR vs CSR

브라우저는 화면을 출력하기 위해 반드시 HTML코드가 필요합니다. SSR과 CSR의 결정적인 차이는 이 HTML코드를 서버가 생성하느냐, 클라이언트가 생성하느냐의 차이입니다.

SSR(next)	서버가 생성 => 서버가 일한다
CSR(react)	클라이언트가 생성 => 클라이언트가 일한다

 

2) nextjs(SSR) 왜 써야 하는가?

CSR의 단점을 극복하기 위함입니다.

 

CSR의 단점

1. 클라이언트가 바빠집니다. 일을 직접해야 하니까(우리 컴퓨터는 소중하므로 단점으로 보는 것입니다).
2. SEO(Search Engine Optimization) 최적화가 제한적입니다. 웹 크롤러가 페이지에 방문했을 때, HTML이 비어있는 상태이기 때문에 사이트의 내용이 수집되지 않습니다. 즉, 사이트가 노출될 확률이 적어집니다.
3. SSR에 비해서 속도, 보안에 취약합니다.

 

SSR을 구현하려면 꼭 nextjs를 써야 하는가?

No. 서버에서 HTML을 응답해 준다면 모두 SSR에 해당합니다. 여기에는 여러 가지 프레임워크와 방법론이 존재합니다.

 

 

2. next 13 버전에서 등장한 App router

'새로운' 라우팅 시스템입니다. 기존의 pages라는 폴더 이름이 app으로 변경되었을 뿐 app이라는 단어에 특별한 의미는 없습니다. pages router 방식에 비해 next 사용이 간편하고 명확해졌습니다.

App Router recommended

 

App router 왜 권장하나

React 18의 Server component를 도입하면서 성능이 향상되었습니다. 그리고 서버와 클라이언트 사이드 코드의 분리가 명확해졌다는 장점도 있습니다.

 

Server component란?

서버에서의 렌더링에 최적화된 컴포넌트입니다. 개인적으로 우리가 사용하던 React Client component에서 복잡한 life cycle 빼고, useState과 useEffect 빼고, 브라우저 내장객체(window) 없다고 생각하면 좋다고 봅니다. JSX를 반환하는 단순한 함수와도 같습니다. promise의 사용도 가능합니다.

 

nextjs는 백엔드와 프론트엔드 통합 프레임워크입니다.

기존의 pages router 방식에서는 각 코드가 실행되는 지점이 서버인지 브라우저인지 헷갈리는 경우가 많았습니다.

 

pages router에서 window 객체 이슈

if (typeof window !== "undefined") {
  console.log('여긴 클라이언트임.');
} else {
  console.log('여긴 서버니까 window 객체가 없으므로 window 객체 사용하면 에러.);
}

 

위 코드처럼 서버(node 환경)인데 window 객체를 호출하면 에러가 발생하기 때문에 window 객체를 사용하기 위해서는 위와 같이 조건문으로 구현해줘야 했습니다.

 

App router에서는 기본적으로 모든 코드가 서버에서 실행됩니다. 클라이언트 사이드에서 렌더링 되는 컴포넌트는 파일 최상단에 use client라고 기재하면 됩니다.

 

App router에서 Client 컴포넌트

"use client"

export default function ClientComponent() {
  return <div>I am client component</div>;
}

 

use client가 선언된 컴포넌트는 Server component가 아니라 우리가 원래 사용하던 React Client 컴포넌트입니다. next가 SSR 방식이라고 해서 서버로부터 HTML을 받아서 한 번에 출력한다는 의미는 아닙니다. 동적인 기능이나 사용자와의 상호작용을 위해서는 부분적으로 CSR이 수행됩니다.

 

언제 Server component를 쓰고 언제 Client component를 쓰는가?

SSR의 이점을 얻기 위해서 최대한 많은 컴포넌트를 Server component로 구현하고, 필요한 부분만 Client component로 구현합니다. 컴포넌트 트리를 봤을 때 Client 컴포넌트는 최하위 leaf 노드로 나타나는 구조입니다. 이렇게 트리를 구성해야 성능과 SEO에 유리합니다.

 

next 13 App router component 트리구조

 

Server component에서는 useState, useEffect의 사용이 불가능합니다. 지금까지 아래의 방식들에 익숙했다면

• 로컬 state에 따른 페이지 단위의 화면 전환.
• useEffect를 사용한 data fetching.

next 13 App router에서는 서버 사이드 렌더링 패턴에 익숙해질 필요가 있습니다.

 

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns

Rendering: Composition Patterns | Next.js