getStaticPaths fallback & ISR

hodu-gwaja·2023년 3월 1일

next.js 개발 공부

최근 블로그 작성이 양산형인가에 대한 걱정이 생겼다.

블로그는 나의 생각을 정리해주는 것이 목표인데,

여기다가 글을 작성함으로써 내가 복습하는 것이 첫번째 목표이며
두번째는 내가 필요할 때 이 글을 봄으로써 복습할 수 있는 것이 목표이다.

첫번째 목표는 잘 이루어지고있지만, 두번째 목표에도 성공할 수 있도록 글을 정리해보겠다.

시멘틱 요소 사용

많은 개발자들의 강의나 설명을 보면 인상 깊었던 것이 Sementic HTML을 잘쓴다는 점이었다.
그래서 그부분에 대해 제대로 복습을 한번 해보겠다.

React-markdown

React-markdown이라는 라이브러리가 있는데 블로그를 만들 시 참고해야겠다.
node.js로 받아주는 코드도 작성해야하는데 next.js에서 적합할 것 같다.

replace 파일명 제거

const slugs = postFilenames.map((fileName) => fileName.replace(/.md$/, ""));

CSR의 문제점

소스코드에 나오지 않아서 SEO에 불리하다
로딩 화면이 나오기때문에 UX가 별로다.

파일 시스템을 사전 렌더링에 사용할 수 있다.
그이유는 import되는 파일들은 클라이언트 사이드 코드 번들에서는 제거되고
서버 사이드 코드번들에서만 작성된다.

ISR(Incremental Static Generation)

특정시간을 정해서 그시간이 지나지 않았으면 기존의 페이지를 보여주고
업데이트해서 보여준다.
새로 생성된 페이지는 기존에 페이지를 대체한다

getStaticProps에서는
props 외에
revalidate라는 키를 추가하면 된다.
1을 넣으면 1초이기떄문에 빠르게 하고싶으면 적게 많이하고 싶으면 길게 넣어야한다.
SSG의 확장개념이라고 볼 수 있다.

getStaticPaths fallback

getStaticPaths: HTML을 미리 만들어 놓는 범위를 지정할 수 있다.

fallback은 사전생성 여부이다.
fallback true이면 path 목록들만 사전 생성해놓는다.
만약에 path에 없는 목록은 사전에 생성되는 것이 아니고,
요청이 서버에 도달하는 순간 만들어진다.

또한 true일 경우에 url로 방문하면 문제가 되는데
undefined와 함께 오류가 뜬다.이런 경우를 방지하고 클라이언트에서 대비해야한다.

const {product} =props;
if(!product){
return <p>Loading...</p>;
}

getStaticProps에서 반환해주는 props 키값을 product이라고 한다면
그값이 있는지 여부를 확인해서 사전 렌더링이 잘돌아가는지 아닌지 확인하는 방법으로
오류를 막을 수 있다.

만약에 fallback 값을'block'으로 생성한다면 완전히 사전 생성되도록
Next.js에서 기다릴 것이다.
그러면 사전에 클라이언트에서 확인할 필요가 없다.

정리하면 많은 페이지가 생성되서 소스를 낭비할 경우에는
fallback : true로 자원을 아끼면 되고,
(ex: 전자상거래)
완전히 부드럽게 작용하는 페이지를 하고 싶다면
fallback : 'block'을 사용하면 된다.
(ex: 페이지가 적은 사이트)

fallback true vs false

fallback:false인 경우
path 범위 외에 있는 존재하지 않는 페이지를 검색할 경우 404 페이지가 뜬다
fallback: true인 경우
path 범위 외에 있는 페이지를 검색하면 오류가 난다.
next는 path범위외에 있는 것은 존재하는지 아닌지 모르기 때문에
확인할 시간을 벌어줘야한다.

const {product} =props;
if(!product){
return <p>Loading...</p>;
}

위 문구를 추가해서 시간을 벌어주면 데이터가 존재하는 경우 올바르게 되겠지만
없는 경우에는 오류가 뜬다.

그래서 이렇게 데이터가 없는 경우를 대비해서
getStaticProps

if(!product){
	
    return {notfound:true}
}

설정해주면 데이터가 없는 경우에는 사전에 404를 띄워주어서 해결 할 수 있다.

Next.js CSR이 필요한 순간

갱신주기가 잦은 데이터는 미리 렌더링하는 의미가 없다
보는 순간 과거의 것이 된다.
개인 프로필 열람하는 경우에는 SEO에 노출할 필요가 없다.
데이터의 일부만 필요할 떄**

useSWR

Next.js 에서 만든 React hook이다.
캐싱 및 자동 유효성 재검사, 에러시 요청등이 담겨져있다.

useSWR은 첫번째 인자에는 URL을 필요로 하는데, URL을 기준으로 여러 요청으로 보내는 것을 한번에 모와서 보내느 기능을 수행한다.
두번째 인자에는 어떤 방식으로 전송될지 결정한다.

const { data, error } = useSWR('url')

로 구조분해할당으로 데이터를 갖을 수 있다.
(React Query, APollo와 같은 형식? 느낌이다)

저 두 단어를 기준으로
검증하는 if문을 작성한다

if(!data){ return <div> loading..</div>}
if(error) <div> Failed to load.<div>

이후에 데이터를 받아오면 가공하여 사용한다.

이 hook의 장점은 로직을 줄여고 심플하게 만들어준다
(React Query의 간편버전 느낌이다)

SSG & CSR

SSG와 CSR을 결합하여 사용할 수도 있다.
기존 React앱에서 자식을 내려주어서 전달하는 방식처럼
사전에 데이터를 받아오고 그값을 prop으로 내려주면 초기값도 원하는 값으로 통제할 수 있다
거기다가 useSWR을 결합하면 정확하게 캐싱이 이루어지면서 부드럽게 업데이트를 할 수 있다.