[Next.js] Basic

참고

1. Next.js 란?

• Next.js는 React 라이브러리의 프레임워크이다.

Next.js 사용 이점

• Next.js를 사용하는 가장 큰 이유로 SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 하기 때문

• 기본적으로 React는 Client Side Rendering(CSR)을 한다.

  • 이는 위 그림처럼 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다.

    

• 반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다.

  • pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해준다. 또, SSR과 CSR도 혼합하여 사용 가능하다.

    

Next.js없이는 SSR을 구현할 수 없을까?

• Next.js없이도 SSR페이지를 만들 수 있다!

• 이 글(SPA에서 서버사이드 렌더링을 구축하지 않고 SEO 최적화하기)을 읽어보면 next.js 없이 react-helmet등의 라이브러리로 SEO에 대응할 수 있다는 것을 알 수 있다.

  • 그런데 위 글들의 경우는 이미 진행된 react 프로젝트에서 갑자기 프레임워크를 도입하는 것이 리팩토링 등 꽤 비용이 드는 작업이기 때문에 다른 방법을 사용하셨다고 한다.

• 만약 프로젝트 시작 전 프레임워크를 도입할지 고민을 하고있다거나, 시간적 여유가 있다면 깔끔하고 나이스하게 SSR을 처리하는데는 그냥 Next가 짱인듯 싶다!

2. Next.js 제공 기능

1. 직관적인 페이지 기반 라우팅 시스팀

• pre-rendering 뿐만 아니라 페이지 기반 라우팅 시스템도 제공한다.

  • 프로젝트의 가장 바깥 폴더인 /pages 폴더에서 컴포넌트를 export하면 폴더명이 페이지 route가 된다.

    • /pages/indext.s -> /
    • /pages/store/t-shirt -> /store/t-shirt

• /look/[id]와 같은 dynamic route도 지원

2. 페이지간 빠르고 매끄러운 전환을 위한 client-side navigation

• next는 < Link /> 컴포넌트를 통해 페이지간의 빠르고 매끄러운 이동을 가능하게 한다.

• HTML의 a 태그와 달리 페이지를 리로딩하지 않고도 페이지간 이동이 가능하고, link 컴포넌트가 뷰포트에 보였을 때 관련 페이지를 백그라운드에서 미리 가져다 놓기 때문에 사용자가 링크를 클릭했을 때 매우 빠르게 해당 페이지로 이동할 수 있게 해준다.

3. Code Splitting (코드 분할)

• 대부분의 사용자들은 웹페이지가 3초 이상 로딩될 시 이를 느리다 판단한다.

• 코드 분할은 웹의 첫 페이지가 로딩될 때, 거대한 javascript payload를 보내는 것이 아니라, 번들을 여러 조각으로 조각내어서 처음에 가장 필요한 부분만 전송해 주는 방식을 통해 어플리케이션 로드 타임을 줄여준다.

• 코드 분할은 webpack, parcel, rollup 등의 모듈 번들러도 지원하고 있는 기능이지만 next.js를 사용하면 별도의 설정없이 자동으로 프로젝트에 적용된다.

  • 어떻게 동작할가? dynamic import를 사용하여 모듈이 호출될 때만 모듈을 import한다.

    • 즉 사용될 때만 모듈 불러옴