next.js

• 서버 서버 사이드 렌더링을 쉽게 도와주는 React 프레임워크

SSR vs CSR

CSR

• 클라이언트 사이드 렌더링 (일반적인 react 렌더링 방식)
• render() 함수가 먼저 실행되고 데이터를 가져와 다시 렌더링
• 초기 로딩 속도는 느리지만 첫 페이지 로딩 시 모든 파일을 받기 때문에 페이지 이동 시 필요한 데이터만 불러서 사용이 가능하다.

SSR

• 서버 사이드 렌더링 (next.js)
• getInitialProps() 함수를 사용해 데이터를 먼저 가져와서 한번에 렌더링
• 한번에 렌더링 되기 때문에 초기 로딩 속도는 빠르지만 page 이동시에는 느릴 수 있다. (page 요청마다 중복되는 파일들을 받아야하기 때문)

• 클라이언트 렌더링의 경우 모든 js파일을 로드한 후 뷰에 그려지기 때문에 로딩 시간이 지연된다
  👉🏻 서버에서 js파일을 로딩하기 때문에 유저가 기다리는 시간이 줄어든다.
• 클라이언트 렌더링의 경우 js 파일이 로드되지 않으면 별다른 정보를 보여주지 않아 검색엔진에 아무런 페이지도 적용되지 않는다.
  👉🏻 검색엔진이 js파일을 읽는 것이 아닌 서버 측에서 html, css, js를 만들어 컨텐츠를 직접 업로드하기 때문에 검색엔진에 게시글이 검색된다.

next.js로 프로젝트 시작하기

manual Setup

npm i next react react-dom

# Package.json script 수정 필요
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

create-next-app

npx create-next-app [파일명]

핵심 기능

hot reloading

• 개발 중 저장되는 코드 자동 새로고침

🌟 automatic routing

• pages 폴더에 있는 파일은 해당 이름으로 라우팅된다.

☝🏻 static routing

• pages/index.js >> '/'
• pages/blog/setting.js >> '/blog/setting'

☝🏻dinamic routing

• pages/[param] >> '/:param'
• pages/blog/[param] >> '/blog/:param'
• pages/blog/[...all] >> '/blog/*'

single file components

• style jsx를 사용하여 컴포넌트 내부에서 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.

🌟 server landing

• 서버 사이드 렌더링

code splitting

• 필요에 따라 파일을 불러올 수 있도록 여러 개의 파일을 분리
• 원하는 페이지에서 원하는 js 파일과 라이브러리를 렌더링하여 모든 번들이 하나로 묶이지 않고, 각각 나뉘어 효율적으로 로딩 시간을 개선할 수 있다.

typescript

• ts 적용을 위해 웹팩이나 바벨을 설정할 필요가 없다.

Head 태그

• react-helmet과 같은 기능

_document.tsx

• 여러 페이지에서 공통적으로 사용하는 헤더를 설정하는 경우 전체 페이지를 관리하는 컴포넌트

sass

• 별도의 config를 정의하지 않고 sass를 설치하면 next에서 자동으로 설정이 된다.

yarn add sass --dev

Link 태그

• next에서는 a 태그를 사용하지 않기 때문에(a 태그를 사용하면 처음 페이지에 진입시 번들 파일을 받고, a 태그에 의해 라우팅되면서 다시 번들 파일을 받는다.) Link 태그를 사용한다.
• a 태그는 전혀 다른 사이트로 페이지를 이동시켜 다시 돌아오지 않는 경우만 사용
• prefetch : 링크 컴포넌트를 렌더링 시 데이터를 먼저 불러온 다음 라우팅을 시작
• href : 실제 이동할 경로
• as : url에 어떻게 보일지 설정

import Link from 'next/link'
...
<Link
  prefetch
  href={`/p/[profile]`}
  as={`/p/${props.profile}`}
>
	<a>소개</a>
</Link>

next/router

• react의 router.push와 동일하게 사용
• link의 prefetch도 사용 가능

import { useRouter } from 'next/router'
...
const router = useRouter()
...
useEffect(() => {
	router.push('/')
}, [])

2탄에선,,

getInitialProps

• 외부 데이터 가져오기
• getStaticProps
  : 빌드 시 고정되는 값 >> 빌드 이후 변경 불가
• getStaticPatch
  : 빌드 시 정적으로 렌더링할 경로 설정
  : 이곳에 정의하지 않은 하위 경로는 접근해도 페이지가 뜨지않음
• getServerSideProps
  : 각 요청에 따라 서버로부터 데이터를 가져옴