Next.js 이란?

🌈  들어가며...

나는 프로젝트를 주로 react + node.js 로 구성해서 진행했다. 터미널에서 두개를 열어서 각각 셋팅을 해줬는데 번거롭기도 하고 충돌도 자주 나더라... 그런데 Next를 사용하면 한 프레임워크 안에서 다 해결할 수 있다고 한다! 그래서 사용해볼 겸 셋팅과 Next의 장점을 알아볼까한다.

☀️  Next.js  란?

Next.js는 Vercel이 개발한 오픈소스 react 프레임워크이다. 풀스택 웹 애플리케이션을 구축하기 위해서 사용된다.
웹사이트 개발 시 프레임워크 없이 React 라이브러리로만 사용할 수 있지만 코드 분할, 라우팅, 데이터 처리 등과 같은 추가적인 처리가 필요하다.(최적화를 위해서 더더욱) Next를 사용하면 간편하게 사용가능.

출처 : https://nextjs.org/docs#what-is-nextjs (공식문서)

 

✨  Next.js의 특징?

○ ServerSide Rendering(SSR)

Html을 서버에서 만들어준다. 

출처 https://dri.es/album/blog/universal-javascript

• 컨텐츠에 도달하는 시간 단축: 인터넷 속도가 느리거나 기기가 느린 경우 더 두드러지는데 서버 렌더링 마크업은 모든 JavaScript가 다운로드 및 실행되어 표시될 때까지 기다릴 필요가 없으므로 사용자가 완전히 렌더링된 페이지를 더 빨리 볼 수 있음.
• 통합 유지보수 모델: 백엔드 템플릿 시스템과 프론트엔드 프레임워크 사이를 왔다 갔다 하는 대신, 전체 앱을 개발하기 위해 동일한 언어와 선언적 컴포넌트 지향의 유지보수 모델을 사용할 수 있다.
• 더 나은 SEO: CSR에서는 HTML에 JavaScript를 실행한 후에 페이지가 랜더링되기 때문에 검색엔진이 페이지를 인식하기 어렵다. 하지만 SSR은 로딩 시 서버에서 완전한 HTML을 생성하여 보내주니 인식하기 쉽다.

 

○ 간편한 라우팅

Next.js는 파일 시스템 기반의 라우팅을 지원하여 페이지와 경로를 자동으로 연결할 수 있는데 이를 통해 별도의 라우팅 설정 없이도 간편하게 페이지를 추가하고 관리할 수 있다.

App
L cart
  L page.jsx
  L layout.jsx
L list
L mypage
L login

public
node_modules
package.json
...

 

위와 같이 파일구조가 만들어졌을 때 cart 페이지에 접속하고 싶을 때의 url은(localhost:3000 기준)

http://localhost:3000/cart

즉, cart 폴더 이름 자체가 url이 된다.(단, 페이지 이름은 page 로 고정)

 

○ CSR 과 SSR 의 차이점?

SSR

장점 : 페이지 로드시 자바스크립트가 별로 필요가 없어서 빠름

단점 : html 안에  JavaScript 못넣는다. onClick 이벤트, useState 깉은거 못 씀.

CSR

장점 : html 안에 자바스크립트 맘대로 넣어서 기능개발 가능

단점 : JavaScript로 인해 페이지 용량도 커지고 페이지 로딩속도도 느려질 수 있음.(hydration 과정 때문)

hydration 이란 ? 뜻은 '수분을 보충한다' 뜻인데 html(몸)에 JS(수분)을 넣어야 페이지가 랜더링 때문에 로딩이 느려진다.

 

○ index.html이 없다?

서버 사이드 렌더링은 요청이 들어올 때마다 서버에서 해당 페이지의 HTML을 동적으로 생성하는데 이 HTML은 클라이언트에게 직접 전송되어 브라우저에서 렌더링된다.
따라서 미리 정적인 index.html 파일을 서버에 저장하는 것이 아니라, 서버는 요청이 들어올 때마다 해당 페이지의 HTML을 생성하여 클라이언트에게 전송하니까 index.html 파일이 없음.

 

○ Next.js가 SSR이지만 CSR을 사용할 수 있다.

'use client' 를 page.jsx 최상단에 넣으면 사용 가능(없으면 기본적으로 server side rendering)
그래서 큰 page들은 server component로 만들고 JS  기능이 필요한 페이지는 client component 로 만들어서 진행

 

//cart/page.jsx

'use client'

  function Cartitem ({){
    return(
        <div>
          <h2>Products</h2>
	    </div>
  }