타이틀 링크를 클릭하면 해당 주차 강의 코드가 정리된 깃허브로 연결됩니다.
3강 서버사이드 렌더링 (Server-side Rendering/SSR/Dynamic Rendering)
(5강 설명이랑 합침)
- Next.js: 모든 페이지 사전 렌더링 (Pre-rendering)
- 기본적으로 모든 페이지 pre-render
- 사전에 HTML 파일을 만든다는 의미
- 퍼포먼스 향상, SEO
- 안 하는 경우: 아무것도 렌더링 안 되다가 JS 파일 로드되면 보임
- 하는 경우: 사전에 초기 HTML 요소가 렌더링되고 JS 렌더링됨
- 효과
- 더 좋은 퍼포먼스
- 검색엔진최적화(SEO)
- 형태
- 둘의 차이점: html 파일 생성 시기
- Static Generation: 정적 생성
- [정적 생성]은 프로젝트가 빌드하는 시점에 html 파일 생성
- 모든 요청에 생성한 파일 재사용
- 퍼포먼스 이유로, Next.js의 권고 사항인 정적 생성
- 정적 생성된 페이지들은 CDN에 캐시 → 더 빠름
- 유저 요청 전에 만들어놔도 상관 없는 페이지는 정적 생성 사용
- 마케팅 페이지, 블로그 게시물, 제품 목록, 도움말, 문서
- getStaticProps / getStaticPaths
- Server Side Rendering (SSR, Dynamic Rendering)
- [서버사이드 렌더링]은 매 요청마다 html 을 생성. (요청하면 그때 만듦)
- 서버 통해 프리렌더링된 페이지는 항상 최신 상태 유지
- CDN에 캐시되지 않아서 조금 느릴 수 있음.
- 검색 엔진에 걸려야 하는데 API 통신으로 받아오는 페이지, 항상 최신 상태 유지해야 하는 페이지에 사용
- 관리자 페이지, 분석 차트
- getServerSideProps
- getServerSideProps
// [id].js
// context에는 prams, 요청, 응답 쿼리 등이 담겨서 옴.
export async function getServerSideProps(context) {
const id = context.params.id;
const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
// id와 api 호출하고 받아온 응답값을
const res = await Axios.get(apiUrl);
const data = res.data;
return {
props: {
// item에 넣어줌
item: data,
},
};
}
// getServerSideProps의 응답값 item을 Post 페이지에 props로 넘겨줄 수 있음.
const Post = ({ item }) => {
return (
<>
{item && (
<>
{/* Head에 title이랑 meta 데이터 넣어주면 SEO가 읽을 수 있음. */}
<Head>
<title>{item.name}</title>
<meta name="description" content={item.description}></meta>
</Head>
<Item item={item} />
</>
)}
</>
);
};
export default Post;Gnb 라우터로 손보기
// Gnb.js
export default function Gnb() {
const router = useRouter();
// 현재 있는 페이지에 따라 네브바의 activeItem이 바뀜
let activeItem;
if (router.pathname === "/") {
activeItem = "home";
} else if (router.pathname === "/about") {
activeItem = "about";
}
// 여기의 data는 semantic-ui-react에서 제공해주는 것.
// : Menu.Item의 name, active 등.
function goLink(e, data) {
if (data.name === "home") {
router.push("/");
} else if (data.name === "about") {
router.push("/about");
}
}
return (
<Menu inverted>
<Menu.Item name="home" active={activeItem === "home"} onClick={goLink} />
<Menu.Item
name="about"
active={activeItem === "about"}
onClick={goLink}
/>
</Menu>
);
}5강 정적 생성(Static Generation) - getStaticProps, getStaticPaths
- [id].js같이 다이나믹 라우트는 어떤 id가 들어올지 몰라 모든 케이스에 대해 다 생성해줄 순 없음. 그런데 개수가 한정적이고 id list를 미리 알 수 있으면 가능.
- getStaticPaths()(와 getStaticProps()) 사용
export async function getStaticPaths() {
return {
paths: [
{ params: { id: "740" } },
{ params: { id: "730" } },
{ params: { id: "729" } },
],
// fallback: true면 getStaticProps로 전달된 경로들은 빌드 타임에 만들어지는 것.
// 나머지는 최초 접속 시 빈 화면으로 보여지게 되고 이외 백그라운드에서 정적 파일로 html과 json 생성해줌.
// next.js는 프리렌더링 목록에 추가함.
// 두 번째 접속부터는 접속생성된 페이지 사용함.
fallback: true,
};
}
export async function getStaticProps(context) {
// getServerSideProps()에서 함수명만 달라짐
const id = context.params.id;
const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
const res = await Axios.get(apiUrl);
const data = res.data;
return {
props: {
item: data,
name: process.env.name,
},
};
}더보기
코딩앙마의 NEXT 강의를 정리한 내용입니다
'WEB > NEXT' 카테고리의 다른 글
| [NEXT] 4강 에러 페이지, 환경 변수 + 6강 isFallback, getStaticPaths (0) | 2022.05.10 |
|---|---|
| [NEXT] 1강 소개, 페이지 레이아웃 + 2강 Dynamic Routes, next/link (0) | 2022.05.09 |
댓글