[next.js-basic] 1. install, pre-rendering, data fetching

 

 

(설명추가 예정)

 

1. 설치 방법

npx create-next-app ./ --typescript

 

2. Pre-rendering

next는 모든 페이지를 pre-rendering 한다.

이 의미는 모든 페이지를 위한 HTML을 Client 사이드에서 자바스크립트로 처리하기 전에, "사전에" 생성한다는 것이다.

이렇게 하기 때문에 SEO 검색엔진 최적화가 좋아진다. 

 

프리렌더로 테스트할때 브라우저에서 js를 사용 못하게 해주면 프리렌더 테스트 가능해진다. 

 

자바스크립트를 disable해줘야한다. 

https://developer.chrome.com/docs/devtools/javascript/disable?hl=ko

자바스크립트 사용 중지  |  Chrome DevTools  |  Chrome for Developers

 

리액트 웹을 열어서 실행시켜주면 

CRA이기때문에 화면을 볼 수가 없다.

반면에 다시 javascript를 풀어주면 리액트 UI가 보인다.

 

Next.js에서는 javascript를 disable해줘도 화면을 볼 수있다.

알게된점을 요약하자면

 

 

1. Pre-rendering (Using Next.js)

• Initial Load (초기 로드):
  • Next.js는 미리 렌더링된 HTML을 브라우저에 전달합니다.
  • 사용자는 브라우저가 JavaScript를 다운로드하기 전에, HTML을 보고 빠르게 페이지 내용을 확인할 수 있습니다.
• Hydration :
  • 브라우저가 JavaScript 파일을 로드한 후, React 컴포넌트가 초기화됩니다.
  • 이 시점부터 앱이 인터랙티브해집니다 (예: <Link />와 같은 동작이 가능해짐).

---

2. No Pre-rendering (Plain React.js app)

• Initial Load (초기 로드):
  • 일반 React.js 앱에서는 서버가 HTML을 제공하지 않고 빈 화면이 먼저 보입니다.
  • 브라우저가 JavaScript를 다운로드하여 실행되기 전까지 아무것도 표시되지 않습니다.
• Hydration :
  • 브라우저가 JavaScript를 로드하고 실행한 후, React 컴포넌트가 초기화되고 HTML을 생성합니다.
  • 이 시점부터 앱이 인터랙티브해집니다.

 

비교 

• Next.js (프리렌더링 사용):
  • 초기 로딩이 빠르고 사용자 경험(UX)이 더 좋음.
  • SEO(Search Engine Optimization)에 유리함.
  • 사용자가 HTML을 즉시 볼 수 있음.
• 일반 React.js 앱:
  • 초기 로딩이 느림 (JavaScript 로드 후 렌더링 시작).
  • 사용자는 빈 화면을 볼 가능성이 높음.

3. data fetching 

 next.js에서ㅏ 데이터를 가져오는 방법은 여러가지있다.

용도에 따라서 달라지는데, 

보통 리액트에서는 데이터가져올때 useEffect안에서 가져온다. 하지만 next는 다르다

 

- getStaticProps 

   Static Generation으로 빌드할때 데이터를 불러온다( 미리 한번에 만들어줌)

- getStaticPaths

  Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현(pages/post/[id])

- getServerSideProps

   Server Side Rendering으로 요청이 있을때 데이터를 불러온다(계속)

 

여기서 잠시 :  Static Genertation이 뭐냐묜

SSG라고도 하는데

npm run build 처럼 빌드타임때 HTML을 각 페이지별로 서버에 생성해 놓고 요청이 왔을때 생성된 HTML을 반환한다.

 

그래서 브라우저가 페이지를 요청했을때 이미 생성된 HTML만 반환하고 이것은 재사용도 가능하다 -> 응답속도빠름

 

외부요청에 의해서 변동이 없는 페이지들은 먼저 만들어 놓고, 그것을 재사용하자 ~~

 

다시 돌아와서

3-1. getStaticProps 는 

- getStaticProps 함수를 async로 export 하면, getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render한다. build time에 페이지를 렌더링 한다.

- useEffect로 데이터를 가져왔을때 보다 훨씨 빠르다.

 

사용해야할 떄는??

- 페이지를 렌더링하는데 필요한 데이터를 사용자의 요청보다 먼저 build 시간에 가져올 수 있을때

- 데이터를 headless CMS에서 가져올때

- 모든 사용자에게 같은 데이터를 보여줄 때

- 페이지는 미리 렌더링 되어야하고, SEO경우 매우 빨라야할때

 

3-2. getStaticPaths

- 동적 라우팅이 필요할때 getStaticPaths로 경로리스트를 정의하고, HTML에 build시간에 렌더된다.

- Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져온다.

- paths

어떤 경로가 pre-render 될지 결정

만약 pages/posts/[id].js라는 이름의 동적 라우팅 페이지가 있다면 아래처럼

(getStaticPaths이용해서 경로가져오기 -> getStaticProps이용해서 각 페이지 데이터 가져와서 프리렌더)

 

-params

페이지 이름은 pages/posts/[postid]/[commentid/]라면, params는 postid와 commentid이다.

만약 페이지이름이 pages/[...slug]와 같이 모든 경로를 사용한다면, params는 slug가 담긴 배열이여야한다.

- fallback

(만약 들어간 페이지 경로가 getStaticPaths에서 리턴하는 paths에 없을때 어떻게 처리할 것인가... 예를들면 3000/posts/100으로  진입, 근데 getStaticPath에서 return한 경로에 100이 업슴)_

 

-false 라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.

-true 라면 getStaticPaths로 리턴되지 않는것은 404로 뜨지 않고, fallback 페이지가 뜨게된다.

 

* 그래서 먼저 사용자에게 fallback페이지를 보여준다.

*그리고 서버에서 static하게 페이지를 생성

* 그 후에 서버에서 생성한 해당 페이지를 사용자에게 보여준다.

* 그다음부터는 해당 페이지로 전송하는 사용자에게 static한 페이지를 보여준다.

3-3. getServerSideProps

-.getServerSideProps함수를 async로 export하면, Next는 각요청마다 리턴되는 데이터를 프리렌더한다.

A페이지에 들어간 후 다른페이지 갔다가 다시 A페이지 들어가도 다시 생성.

최신 데이터 반영된다

 

사용해야할때는??

- 요청할때 데이터를 가져와야하는 페이지를 미리 렌더해야할 때 사용한다.

서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기때메 첫번쨰 바이트 시간은 getStaticProps보다 느리다.