Next js 시작하기

Next.js

React를 기반으로 하는 SSR(Server Side Randering) 프레임워크

Next.js 생성하기🔥

1. npx create-next-app 이름

CSS 적용하기

모든 페이지에 적용할 css는 global.css에 넣기

하지만!!
특정 페이지에만 적용시키고 싶다면
xxx.module.css 형식으로 생성하기

Routing 하기

Next에서 라우팅이란... 식은죽먹기다

보통 리액트에서는 라우팅을 react-router-dom 을 이용해서 한다.

하지만 Next.js 는?
app 폴더안에 폴더를 하나 만들면 그 이름으로 라우팅을 할 수 있다
이게 진짜 넥스트를 사용하는 이유다.

app 폴더에 이렇게 되어있다면 주소에
localhost:3000/list 라고 치면 list 폴더 안에 page.js 가 뜨게된다.

내용 추가하기

전체에 적용하고 싶은 내용은 layout.js에 추가하면 된다.

위와같이 layout이 page.js를 감싸고 있기 때문에 layout에 내용을 추가하게 되면 전체에 적용되게 된다.

랜더링에 관해

Next.js의 기본 랜더링 방식은 SSR(Server Side Randering) 방식이다.

SSR (Server Side Randering)

1. HTML을 웹으로 전송하기 전에 서버에서 전부 랜더링
   • 각 요청에 따라 서버에서 HTML 페이지를 동적으로 렌더링
2. 해당 페이지의 모든 자바스크립트 코드 로드
3. 동적으로 페이지 내용 렌더링
   • 서버에서 렌더링한 페이지에 스크립트 코드를 넣어 웹 페이지를 동적으로 처리
     = 하이드레이션(hydration)

장점

• 안전성 증가

  • 페이지를 서버에서 렌더링
    = 쿠키 관리, API 호출, 데이터 검증 작업을 '서버'에서 처리
    => 중요한 데이터를 클라이언트에 노출할 필요가 없음 = 안전성 증가

• 웹 사이트 제공 범위 확대

  • 렌더링을 서버에서 담당
    클라이언트가 자바스크립트를 사용하지 못하는 환경이거나 오래된 브라우저에서도 웹 페이지 제공 가능

• 검색엔진최적화(SEO) 유리

  • 서버에서 렌더링에 필요한 모든 데이터를 넣어 HTML 생성
    웹 크롤러 등의 검색 엔진 웹 문서 수집기가 필요한 데이터를 모두 수집
    => 웹앱의 SEO 점수 상승

단점

• 자원 소모, 서버 부하 증가
  • SSR을 사용하면 '서버'가 필요
  • CSR이나 SSG는 클라우드 서비스에 배포하는 serverless 방식을 사용 가능하지만 SSR은 서버를 사용해야 함
    = 웹앱이 더 많은 자원을 소모하고 부하를 보이며 유지 보수 비용이 증가
• 페이지 이동 시 요청 처리 시간이 더 길어짐
  • 페이지 렌더링 때마다 매번 데이터 접근 및 외부 API 호출 발생
    => 해결: Next.js에서 이 성능을 향상 시킬 수 있는 기능 제공

CSR (Client Side Randering)

표준 리액트 앱(CRA)이 사용하는 방식

1. 자바스크립트 번들을 서버에서 전송 받은 후 클라이언트에서 렌더링

   • 이때 받는 HTML은 스크립트(<script>)와 스타일(<link>)을 포함된 기본 HTML 마크업
     • body에는 <div id="root"></div>뿐

2. 빌드 과정 동안 컴파일한 JS 파일과 CSS 파일을 HTML 페이지에서 불러오고 <div id="root"></div> 안에 불러온 내용을 렌더링

   • 이 과정 동안 웹 브라우저 화면이 비어있게 됨
     • 초기 로딩이 느리게 느껴짐

장점

• 빠른 인터페이스 반응
  - 페이지 로딩 후에 인터랙션이 즉각적으로 처리되므로 UX가 부드러움
• 서버 부하 감소
  - 대부분의 렌더링 작업이 클라이언트에서 이루어져 서버의 부담이 줄어듬
• 단일 페이지 애플리케이션(SPA) 구현 용이
  - CSR은 SPA 구조에서 더 효율적으로 작동하여, 페이지 전체를 다시 로드할 필요 없이 필요한 부분만 업데이트 가능
• 유연한 UI 업데이트
  - 동적으로 데이터를 가져와서 부분적으로 UI를 업데이트할 수 있어 동적 애플리케이션에 용의
  

단점

• HTML에 등록된 JS 코드와 CSS 파일을 클라이언트에서 받아서 적용
  • 초기 화면 로딩에 수 초가 걸릴 수 있음
    • 이 과정에서 사용자는 빈 페이지를 보고 있어야 함
• 웹앱의 SEO에 불리
  • 크롤러 봇이 수집해갈 페이지 정보가 없음
    • 초기 HTML의 root div 안에 아무 것도 없어서
  • 구글 봇의 경우 자바스크립트 번들이 전송될 때까지 기다리지만
    • 또한 이 기다리는 시간 때문에 웹 사이트 성능 점수가 낮아짐

ServerComponent, ClientComponent

ServerComponent

서버 컴포넌트란 HTML에 JS 문법을 넣을 수 없는 컴포넌트를 말한다.
즉, 리액트 문법인 useState, useEffect 등 사용이 불가하다.

장점은?

• JS 문법을 검사할 필요가 없기 때문에 로딩 속도가 빠르다.
• 검색엔진 노출에 유리하다.

ClientComponent

클라이언트 컴포넌트란 반대로 HTML 안에서 JS 문법을 사용할 수 있는 컴포넌트이다.

단, 사용하려면

'use client'

를 코드 윗줄에 작성해야 한다.

서버 컴포넌트와 반대로 useState, useRef, useEffect 등 리액트 문법도 사용 가능하다.

단점은?

• 로딩속도가 느리다 1 ( JS 많이 필요 )
• 로딩속도가 느리다 2 ( hydration 필요 )

  hydraion이란 HTML을 유저한테 보낸 후에 JS로 HTML을 다시 읽고 분석하는 것을 말한다.