Next.js?

Next.js는 Node.js를 기반으로 구축된 오픈 소스 웹 개발 프레임워크로, 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 합니다. React 문서에는 "Node.js로 서버 렌더링 웹사이트 구축"할 때 개발자에게 솔루션으로 조언하는 "권장 도구 체인" 중 Next.js가 언급되어 있습니다. 기존 React 앱이 클라이언트 측 브라우저에서만 콘텐츠를 렌더링할 수 있는 반면, Next.js는 서버 측에서 렌더링된 애플리케이션을 포함하도록 이 기능을 확장합니다.

설치 방법

기본 설치 명령어

npx create-next-app@latest

typescript와 함께 설치 명령어

npx create-next-app@latest --typescript

실행 명령어

npm run dev

> nextjs-intro@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 828 ms (125 modules)
wait  - compiling / (client and server)...
wait  - compiling...
event - compiled client and server successfully in 218 ms (143 modules)

위처럼 나왔을 때 url의 http://localhost:3000 를 홈페이지에 부르면 웹페이지 실행이 가능하다.

framework vs library

framework?
나의 코드를 불러와서 모든 걸 동작하게 하는 것

library?
내가 원하는 대로 코드를 짜고 사용하고 싶을 때 사용하는 것

Next.js 는 framework로 내가 코드를 불러와서 동작하게 할 수 있다.

React 와의 차이점

1. React 에서는 경로설정을 Router에서 사용자가 직접 진행해야 했지만 next.js 는 파일을 만들 때 알아서 경로가 설정이 된다.

// index.js
export default function Home() {
  return "hi";
}

(http://localhost:3000/)

// about.js
export default function Potato() {
  return "about us";
}

(http://localhost:3000/about)

2. react에서는 react를 사용한다고 js 파일에 import를 해야했지만 import 없이도 사용 가능하다.

export default function Home() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

3. client side rendering vs server side rendering

CSR(Client Side Rendering)

클라이언트 사이드에서 HTML을 반환한 후에 JavaScript가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행한다.

출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

SSR(Server Side Rendering)

서버에 각각의 페이지에 대한 요청을 하며 서버에서 html, js 파일 등을 다 다운로드해서 화면에 렌더링하는 방식이다.

출처: https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

next.js 는 SSR 방식이기 때문에 HTML을 먼저 얻게 되고 이후에 javascript 를 볼 수 있다.

4. hydration

Hydrate?
Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다.

client가 웹사이트 url로 접속했을 때 HTML을 먼저 보여줄 수 있기 때문에 검색 엔진 최적화(SEO: Search Engine Optimization)에 좋다. 이 과정을 Pre-Renderdring 이라고 한다.

Server에서 한번 렌더링하고 Client에서도 한번 더 렌더링 하면 비효율적인 렌더링 방식 아닌가요?

두번 렌더링 하는 것은 비효율적으로 보일 수 있으나 서버에서 빠르게 Pre-Rendering하고 유저에게 빠른 웹 페이지로 응답할 수 있다는 것은 큰 이점을 가져갈 수 있다.

Pre-Rendering 한 Document는 모든 자바스크립트 요소들이 빠진 굉장히 가벼운 상태이므로 클라이언트에게 빠른 로딩이 가능하다.
이는 같은 화면에 대해 두 번 렌더링이 일어난다는 단점을 보완하고도 남는다고 한다.

참고 및 출처
https://en.wikipedia.org/wiki/Next.js
https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1
https://helloinyong.tistory.com/315