NextJS에 대해....
간단히 NextJS에 대해 설명하고 넘어가도록 하겠습니다.
먼저 Next(이하 넥스트) 의 모든 페이지는 사전 렌더링 ( Pre - rendering ) 을 원칙으로 하고 있습니다. 이러한 사전 렌더링으로 더 좋은 퍼포먼스 , 검색엔진 최적화 가 가능하다는 장점이 있죠.
이런 사전 렌더링은 두 가지 형태가 있습니다.
- 정적 생성
- SSR
두 형태를 구분하는 기준은 언제 html파일을 생성하는가? 에 있습니다.
정적 생성
-
프로젝트가 빌드하는 시점에 html 파일들이 생성됨.
-
모든 요청에 빌드 파일을 재사용 ( 👉 즉 만들어 두고 요청이 들어 올때마다 재사용함 )
-
넥스트의 경우 정적 생성을 퍼포먼스의 이유로 권고하고 함.
-
정적 생성된 페이지들은 CDN 의 캐시가 됨.
-
만약 미리 만들어 놔도 상관없는 페이지의 구성인 경우,
getStaticProps,getStaicPaths사용해서 정적생성
getStaticProps: 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.
SSR
-
반면에 SSR은 매 요청이 들어올때 마다 html 을 생성
-
항상 최신 상태를 유지함.
-
요청에 다이나믹한 구조가 필요한 경우 ,
getServerSideProps
getServerSideProps: 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옵니다.
NextJS의 구조.
이전 포스팅 CSR VS SSR 을 통해 SSR을 실행하기 위해 React의 대표적인 라이브러리 Next JS 를 시작하기에 앞서, 먼저 NextJs의 구조가 어떻게 되고 어떤 식으로 실제로 구현이 되는 지 정리하고자 합니다.
먼저 NextJS 는 아래와 같은 파일 구조를 가집니다. 👇
|-- pages | |-- _document // HTML Document, Application Container, 각종 페이지 등을 작성한다. | |-- _app // Application Container. 공통의 레이아웃을 작성한다. | |-- _error // Error Page 작성. | |-- hello // localhost:3000/hello로 시작되는 경로의 페이지 컴포넌트
그렇다면 실제로 각각의 파일이 어떻게 작성 되어있는지 자세히 살펴보도록 하겠습니다.
_app.js
...
function MyApp({ Component, pageProps }) {
// Component : 현재 페이지 의미 , pageProps : 데이터 케치 메서드로 가져온 초기 객체
return <div>
<Top />
<Component {...pageProps} />
<Footer/>
</div>
}
export default MyApp;
-
client에서 띄우길 바라는 전체 컴포넌트의 레이아웃
-
최초 실행됨.
-
페이지 전환시 레이아웃 유지
-
페이지 전환시 상태값 유지
-
componentDidCatch 를 이용해서 커슽첨 에러 핸들링 가능
-
추가적 데이터를 페이지로 주입 가능
-
글로벌 CSS를 이곳에 선언
한줄요약 👉 client에서 띄우길 바라는 전체 컴포넌트의 레이아웃!
_document
import { Html, Head, Main, NextScript } from "next/document";
function MyDocument (){
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
MyDocument.getInitialProps = Document.getInitialProps;
// 각 페이지마다 사전에 불러와야할 데이터를 서버에서 미리 처리하도록 도와줌.
MyDocument.renderDocument = Document.renderDocument;
// static html를 구성하기 위한 _app.js에서 구성한 Html body가 어떤 형태로 들어갈지 구성
export default MyDocument;-
시멘틱 태그를 구성하기 위해 _app.js에서 구성한 html body가 어떤 형태로 들어갈지 구성하는 곳
-
서버에서만 렌더링되고 onclick 같은 것은 작동 X
-
그리고 CSS도 작성 X
-
nextJS 페이지들은 마크업 정의를 건너뛰고 페이지를 만들기 때문에 아래의 HTML을 수정하려 할때 이 파일로 수정 해야함
한줄 요약 👉 React로 작성할때 시작되는
ìndex.html을 서버에서 리턴함.
_error
function Error({ statusCode }) {
return <p>{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}</p>
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
export default Error
한줄 요약 👉 에러가 발생했을 때의 공통적인 에러페이지가 어떻게 표현할지
