1 of 33

Next.js 13?

2 of 33

3 of 33

순서

  • Next js가 뭐지?
  • 그럼 React랑 비교해서 뭐가 다르지? 장,단점이 뭐지?
  • 서버사이드 랜더링(SSR) , 정적 사이트 랜더링(SSG)
  • Link태그
  • Next 13의 App Dir
  • 서버 컴포넌트와 클라이언트 컴포넌트

​

4 of 33

NextJs가 뭐지?

React 프레임워크

그럼 프레임워크 VS 라이브러리 뭐가 다르지..?

​

  • 제어 흐름

라이브러리를 쓸 떄 사용자는 앱의 흐름을 직접 제어함

프레임워크는 제어의 흐름이 일부 포함되어 개발자의 신경을 덜 쓰게

  • “내가” 라이브러리를 부른다, “누군가의 규칙”을 따라간다의 차이

5 of 33

NextJs가 뭐지?

프레임워크이고 빠른 웹 앱을 만들 수 있게 함.

그리고 빠르게 웹 앱을 만들기 위해 이런이런 것들을 지원함!

6 of 33

NextJs가 뭐지?

  • 라우팅 (유저가 페이지를 왔다갔다 하는 거)
  • 데이터 불러오기(언제 데이터를 가져올지? 빌드시점?아니면 데이터 요청시?)
  • 여러 통합된 서드파티들 (next-oauth,next-storage등등)
  • 각종 최적화들(Link 컴포넌트, Image컴포넌트 등등)
  • 좋은 개발자 경험

7 of 33

NextJs와 리액트

그럼 리액트대신 NextJs를 써야 하는 이유들

앞서 말했던 것들이 장점이 될 수 있음

  • Client Side Rendering 뿐만 아니라 여러 랜더링 전략을 혼합해서 쓸 수 있음
  • 어떤 페이지는 CSR로 돌아가고, 어떤 페이지는 SSG로 돌아가고,,
  • Nextjs에서 제공하는 여러 컴포넌트들
  • 폴더 기반으로 페이지 라우팅을 해줌
  • 서버리스(api route) -> 일종의 proxy를 만들 수 있음

8 of 33

서버 컴포넌트에 대해

컴포넌트가 랜더링 되는 곳이 서버냐 클라이언트의 차이

​

  • 서버 컴포넌트 : 서버에 해석된 후 클라이언트로 전달
  • 클라이언트 컴포넌트 : 클라이언트가 번들을 다운받고 해석되기 시작

9 of 33

10 of 33

11 of 33

12 of 33

서버 컴포넌트..

사용자 -> 해당 페이지에 접속 -> 서버에 요청을 날리면

서버가 컴포넌트 트리를 직렬화된 JSON 형태로 구성하기 시작

13 of 33

이 과정은 서버 컴포넌트가 아니라 클라이언트일떄 건너뜀

(서버 컴포넌트에서만 저 과정이 실행됨)

-> 클라이언트 컴포넌트 일떄에는 “아 이곳은 클라이언트 컴포넌트가 랜더링될거임” 이라는 표시를 배치함

​

14 of 33

결국 최종적으로 클라이언트에는 다음의 결과물이 반환.!

15 of 33

16 of 33

17 of 33

  • 서버 컴포넌트는 번들 크기에 포함되지 않습니다

​

  • 예를들어 서버컴포넌트에서 npm으로 다운로드된 패키지를 쓰면 해당 패키지는 번들 크기에 포함되어 지지 않음!

​

  • 파일 시스템, DB에 직접 접근가능함

18 of 33

  • 서버 컴포넌트의 자식으로 클라이언트 컴포넌트 -> O
  • 클라이언트 컴포넌트의 자식으로 서버 컴포넌트 -> X
  • ​

19 of 33

20 of 33

21 of 33

CSR vs SSG,SSR

CSR :

아 서버에서 모든 정보를 받아와서 화면을 그리면 너무 늦잖아–🤬🤬🤬

서버에서 틀이 되는 파일 하나만 내려줘! 나머지는 자바스크립트로 화면을 그릴게

​

-> 빈 HTML만 내려받고, Client단에서 자바스크립트로 DOM을 랜더링해!

-> 모든 로직은 Client에서 처리할게(라우팅, 데이터 가져오기 등)

​

22 of 33

23 of 33

그럼 SSR?

서버에서 HTML,,CSS, 최소한의 자바스크립트를 처리하고 서버에서 미리 페이지를 만들어서

(pre-rendering) 내려줄게

​

-> 그 후 페이지가 랜더링되면 자바스크립트 코드와 연결이 이루어짐

-> hydration이라고 불림니다.

24 of 33

25 of 33

Next js Pre-rendering

  • ​

​

26 of 33

Pre-rendering과 SSG/SSR

이 Pre-rendering을 언제하냐에 따라 SSG,SSR로 구분됩니다.

  • Static Site Generation (SSG) : 빌드 타임에 HTML을 만들고 요청떄 이 HTML 써!
  • Server Side Generation (SSR) : HTML을 요청때마다 만들어!

27 of 33

28 of 33

Next js CSR?

아님니다.!

29 of 33

Next js Link태그 (Prefetch를 곁들인..)

다른 페이지로 가는 링크를 쓸때 Next가 제공하는 Link컴포넌트를 쓸 수 있음.

일반적인 a태그와는 약간 다름!

Next는 Link컴포넌트가 현재 뷰포트에 존재한다면, 해당링크의 페이지를

“미리 가져옴”!

따라서 더 빠른 페이지 전환이 가능함

30 of 33

31 of 33

NextJs의 App Dir

이 폴더는 URL Path와 매핑이 되어짐니다. 페이지를 위한 파일은 Page.tsx

32 of 33

Next js App Dir

서버 컴포넌트는 서버부분에서 랜더링되는 컴포넌트

대부분의 컴포넌트가 서버에서 랜더링되고 작은 UI요소들만 클라이언트에서 랜더링

-> 이 작은 UI요소들을 클라이언트 컴포넌트 -> 리액트의 컴포넌트와 성격이 비슷!

​

- 클라이언트 컴포넌트에서만 useState,useEffect같은 훅을 사용할 수 있음

- 상단에 ‘use client’지시어를 붙여줘야 함

33 of 33