클라이언트 사이드 렌더링
프리렌더링 (정적생성, ssr)
리액트에서 프리렌더링을 하려면 여러가지가 필요함
- 서버가 필요함 일단
- 서버 실행에 필요한 코드들..
- 등등
Next js는 이걸 해결해줌
- 프리렌더링 알아서 해주고
- Vercel로 서버호스팅 쉬움
- Next.js에 최적화되어있음 - 파일시스템 기반 라우팅 제공
상대경로 안쓰고
import alias 쓰면 편하다.
최상단 기준으로 @/... 쓰면 된다.
파일s
- _app.js
- 이 파일은 Next.js앱의 주 컴포넌트를 전의한다.
- 모든 페이지는 이 파일을 통해서 렌더링된다.
- 페이지 전환 간에 상태를 유지하거나 공통 레이아웃을 정의하거나 추가 스타일이나 헤드요소를 추가할 때 사용된다.
- Component와 pageProps라는 두가지 주요 props가 있다. Component는 현재 렌더링되는 페이지의 컴포넌트이고, pageProps는 해당 페이지로 전달되는 props이다.
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp;- _document.js
- 이 파일은 서버사이드에서만 렌더링되며,
<html><body>같은 공통 문서 구조를 정의한다. - Next.js의 기본 Document는 간단한 HTML문서만 제공하기 때문에, 추가적인 리소스나 스타일을
<head>에 넣기 위해서 이 파일을 커스터마이징할 수 있다. - 이 파일을 사용하여 서버사이드 렌더링과 관련된 스타일 또는 스크립트를 정의할 수 있다.
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* 여기에 추가적인 헤드 요소를 넣을 수 있습니다. */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;- index.js
- 이 파일은 기본적으로 프로덕트의 메인페이지 (루트페이지 ) 를 의미한다.
- index.js 라는 이름은 특별한 의미를 가지지 않으며, pages 디렉토리에 있는 index.js 파일을 의미한다.
- 그냥 주요 루트페이지의 엔트리 포인트로서 사용된다.
function HomePage() {
return <div>Welcome to My Next.js App!</div>;
}
export default HomePage;
위의 코드내용에서 참고
<Main>
- 이 컴포넌트는 현재 페이지의 내용을 렌더링한다.
- 어플리케이션의 실제내용 (페이지 컴포넌트)가 이
<Main/>컴포넌트 위치에 삽입된다. - 기본적으로 Next.js는 사용자가 방문한 페이지에 대한 Javascript 및 HTML을 생성하고
<Main/>은 이 생성된 HTML을 브라우저에 표시하는 역할을 한다.
<NextScript/>
- 이 컴포넌트는 Next.js 프레임워크에 필요한 Javascript 파일들을 불러온다.
- 이는 Next.js의 핵심기능들 ( 예를 들어서 클라이언트측 라우팅)을 지원하기 위해 필요한 스크립트들을 포함한다.
- 또한 개별 페이지에 대한 Javascript 코드도 여기서 로드된다.
_document.js에서는 이 두 컴포넌트를 무조건 적으로 포함해야한다. 이를 통해서 각 페이지의 실제내용과 필요한 Javascript가 로드되기 때문임
라우팅
- 파일시스템 기반 라우팅
파일의 경로가 주소에 매칭되는 라우팅 방식 ( html과 유사 ) - 파일이름에서 [값]은 변수처럼 사용할 수 있다.
react-router-dom의 param과 유사
예를 들어서
pages (이름 바꾸면 안됨)
ㄴ index.js ( 디폴트 )
ㄴ search.js ==> localhost:3000/search
ㄴ setting.js ==> localhost:3000/setting
ㄴ products
ㄴ index.js ==> localhost:3000/products
ㄴ [id].js ==> /2 , /3, /4, .......
풀 리로드
전체 HTML을 다 받아옴
프리렌더링
- a
- Link
