그동안의 next강의를 토대로 catfact API json data를 활용하여 각 렌더링에 걸맞는 페이지를 구현해보기로 하였다.(과제)
렌더링에 대해서는 이전에 너무 많이 설명했으므로 이번 TIL에서는 생략!
목표
라우팅과 렌더링의 핵심 개념을 이해할 수 있는 예제를 작성합니다.
주제
렌더링 테스트 페이지 만들기
요구사항
- RootLayout에 내비게이션 역할을 하는 Nav 컴포넌트를 포함시킵니다.
- Nav 컴포넌트는 다음 메뉴를 가지고 있습니다.
- SSG
- ISR
- SSR
- CSR
- 각 페이지를 클릭하면, 고양이에 대한 사실을 알려주는 API를 각 렌더링 방식(SSG ~ CSR)에 맞게 보여주도록 합니다.
https://catfact.ninja/fact- styling 도구는 반드시 Tailwind만을 이용하여 css를 여러분의 입맛대로 구성합니다.
- 주의사항
- 테스트를 위해서는
dev모드가 아닌production모드를 사용해주세요. 즉,npm run dev가 아니라npm run build⇒npm run start를 사용해주세요.
일단 RootLayout을 기존 src/app에 있는 layout.tsx를 그대로 사용하기로 결정하였고, 네비게이션 역할 즉, Link를 사용해서 Nav 컴포넌트로 이동시키기로 하였다
그리고 각각의 렌더링을 적용하기 위해 src/app이 아닌 components에 tsx파일을 생성하였는데, 따로 제작해서 넣나 app안의 csr 같은 폴더 안의 파일에 직접넣나 큰 상관은 없다
그리고 타입자체가 2개뿐이라 types안에 선언해주기
layout.tsx에서 연결시킨 nav컴포넌트 안에 link 태그로 각 렌더링 폴더명에 연결시키기
SSG렌더링 같은 경우 no cache 즉 빌드 타임에서 렌더링 하지 않고 링크를 클릭하면 렌더링됨. 즉, 계속 렌더링 할 수 있음
SSR렌더링은 force-cache 즉, 빌드타임에 렌더링한걸 고정함으로써 새로고침해도 변함이 없음
ISR렌더링은 revalidate :5초 즉, 5초마다 재렌더링되기때문에 새로고침을해도 5초가 지나야만 api데이터가 바뀜
CSR렌더링은 'use client' 즉 react같이 클라이언트 컴포넌트 환경에서만 구현되며, useEffect, useState 사용할 수 있다.
여기서 타입선언 시, RandomCat type or null이므로 null에 대한 처리도 꼭 해줘야만 한다. 그렇기 때문에
if (!cat) {
return <div>로딩중...</div>;
}으로 cat이 null일 경우 로딩중처리를 할 수 있다는게 SSG와 큰 차이점이다(둘다 렌더링 계속 가능)
그런데 여기서 return 없이 1줄 로직이라 코드를 짯었는데,
JSX를 반환하려면 꼭 return 키워드를 사용해야한다는 몰랐던 사실을 알게 되었다.
즉 어떤 오류든 상세하게 잡아내기 위해선 이러한 경험이 나에겐 너무나도 좋은 경험이다 ㅠㅠ
<div>
<h1>Cat Fact</h1>
{cat ? (
<>
<p className="m-4">{cat.fact}</p>
<p>Fact length : {cat.length}</p>
</>
) : (
<p>Loading...</p>
)}
</div>단 if문 없이도 3항 연산자로 null에 대한 처리를 해줄 수도 있다
결국 이런식으로 각 렌더링마다 화면 렌더링 비교를 할 수 있는데
결론은
CSR - api불러오기전 로딩처리 가능하며 새로고침 시 계속 재렌더링
ISR - 00초마다 재렌더링 설정 가능, 00초마다 새로고침 시 api 데이터 새로 불러옴
SSG - CSR과 동일하지만 로딩처리 불가
SSR - 한번 빌드타임에 렌더링한 후 절대 api 데이터가 바뀌지 않음
이렇게 오늘도 next.js에 대해 맛~있게 잘 배워갑니다요~~ ㅎㅎ
