천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: ,

Next.js

React의 SSR을 구현할 수 있게하는 프레임 워크

검색엔진 최적화(SEO)을 하기위해서

⇒ 빈 html 파일만 나오기 때문에 포털 검색에 노출될 일이 없다

CSR

브라우저 에서 html → js → 리액트 받는 과정을 로딩하는 동안 진행한다.

서버에서 데이터를 가져올때 지연 시간 발생으로 UX 측면에서 좋지않다.

웹크롤링을 할 때 데이터를 가져오게 되면 내용을 제대로 가져와 할 수 없기 때문에 최적화 검색 엔진 최적화에 문제가 생긴다.

SSR

html 파일을 response로 내보낸다.

js, react등은 화면이 보인 상태에서 브라우저에서 다운로드 받기에

클라이언트 대신 서버에서 페이지를 준비한다.

설치: npx create-next-app@latest --typescript next를 붙어주어서 설치한다.

기본 파일 구조

pages

  • 페이지를 생성한다.
  • index.tsx 루트 페이지
  • _app.tsx 공통되는 레이아웃을 작성한다. url을 통과하여 특정 페이지에 진입하기전 통과하는 인터셉트
  • 어떤 페이지를 작성할 때 example.tsx 형식으로 생성하면 된다.

public

정적인 파일을 저장하는 장소

styles

  • 스타일링을 처리해주는 폴더
  • 모듈 css는 컴포넌트 종속적으로 스타일링을 하기 위한것, 확장자 앞에 module을 붙어줘야한다.

next.config.js

  • Next.js는 웹팩을 기본 번들러로 사용
  • 웹팩에 관한 설정을 해당 파일에서 실행

Pre-rendering

모든 페이지를 미리 랜더링한다. 이미 display가 되어있기 때문에 유용하다

JS disable : 관리자 모드에서 ctrl + shift + P 로 Disable javascipt 선택

react 앱에서는 js를 끄면 랜더링이 안되지만 Next.js로 로딩된 앱은 js를 꺼도 정상적으로 작동이 된다.

Data Fetching

리액트에서는 useEffect 안에서 데이터를 가져온다.

getStaticProps : 빌드할 때 데이터를 불러온다.

  • 랜더링 하는 데이터가 사용자의 요청보다 먼저 빌드하여 데이터를 가져온다.

getStaticPath : 데이터에 기반하여 pre-render시 특정한 동적 라우팅을 구현

export default getStaticPath() {
	return {
		paths: [
			{ params: {...} }
		],
		fallback: true
	}
}
  • paths: 어떠한 경로가 pre-render 될지를 결정 / pages/posts/[id].js 를 이용하는 페이지를 생성함
  • params: [params] 안에있는 데이터를 넣어준다. […slug]로 모든 경로를 사용한다면 배열로 이용한다.
  • fallback
    • false : 리턴되지 않는 것은 모두 404
    • true : 리턴되지 않으면 fallback이 뜨게 된다.

getServerSideProps : SSR 요청이 있을 때 데이터를 불러온다.

  • 요청할 때마다 데이터를 가져온다. 서버가 모든 요청에 대해서 처리를 해야되기 때문에 시간이 getStaticProps 보다 느리다.
  • 데이터가 계속 바뀔 때는 해당 요청을 이용하는게 더 유리하다

참고