[Next.js 챌린지] DAY8 ISR

정재은·2024년 9월 24일

ISR next.js seo

Next.js 챌린지

목록 보기

6/16

한 입 크기로 잘라먹는 Next.js(15+)

# Section2

17. ISR 소개 및 실습

ISR (Incremental Static Regenertion) = 증분 정적 재생성
=> SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술

유통기한이 60초인 페이지 / 60초 동안은 이미 완성된 페이지를 렌더링

유통기한이 끝나고 재생성된 페이지를 렌더링

정리
처음 빌드 타임에서 생성된 V1은 60초가 될 때까지 계속해서 V1을 반환한다
60초 이후에 요청 발생시 우선 V1을 반환하고 V2를 재생성한다
그 후부터는 V2 페이지를 반환한다

즉,
처음에는 매우 빠른 속도로 응답 가능 (기존 SSG 방식의 장점)
일정 시간 이후에는 최신 데이터 반영 가능 (기존 SSR 방식의 장점)

실습하기

src/pages/index.tsx 페이지에서
getStaticProps의 return문에 코드 추가
revalidate : 3 → 3초 주기로 새롭게 재생성한다는 뜻
$ npm run build
$ npm run start → 약 3초 마다 새로고침시 데이터가 변경됨

18. ISR 주문형 재 검증 (On-Demand-ISR)

요청을 받을 때마다 페이지를 다시 생성하는 ISR

ex1) 시간과 관계없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지
ex2) 게시글을 수정 및 삭제 하는 경우

실습하기

기존에 작성했던 revalidate : 3 코드 삭제 (SSG 페이지로 다시 변경)
api 폴더에 revalidate.ts 생성

// 📄 src/api/revalidate.ts
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await res.revalidate('/');
    return res.json({ revalidate: true });
  } catch (err) {
    res.status(500).send('Revalidation Failed');
  }
}

$ npm run build + $ npm run start
브라우저는 현재 SSG로 작동하기 때문에 새로고침을 눌러도 변하지 않는다
새로운 탭을 열어 http://localhost:3000/api/revalidate 주소로 요청 날리기
api 요청 결과 ↴
다시 원래 페이지(http://localhost:3000)로 돌아와 새로고침시 페이지 변경 확인

⇒ api routes를 통해서 요청을 받았을 때, 특정 페이지를 다시 생성하도록 만들 수 있다

19. SEO 설정하기

각 페이지마다 meta 태그를 설정할 수 있다

import Head

// 📄 src/index.tsx
import Head from 'next/head';

페이지 컴포넌트에서 Head 태그를 작성하고 내부에 meta 태그 작성

① 📄 src/index.tsx

<Head>
  <title>한입북스</title>
  <meta property='og:image' content='/thumbnail.png' />
  <meta property='og:title' content='한입북스' />
  <meta property='og:description' content='한입 북스에 등록된 도서들을 만나보세요' />
</Head>

② 📄 src/search/index.tsx

 <Head>
  <title>한입북스 - 검색결과</title>
  <meta property='og:image' content='/thumbnail.png' />
  <meta property='og:title' content='한입북스 - 검색결과' />
  <meta property='og:description' content='한입 북스에 등록된 도서들을 만나보세요' />
</Head>

③ 📄 src/book/[id].tsx

 <Head>
  <title>{title}</title>
  <meta property='og:image' content={coverImgUrl} />
  <meta property='og:title' content={title} />
  <meta property='og:description' content={description} />
</Head>

하지만 동적 경로인 ③ src/book/[id].tsx 에서는
path로 설정해주지 않은 페이지에 방문했을 때
폴백 상태가 끝나야만 meta 태그가 페이지에 추가된다
즉, SEO 설정이 안되는 문제가 발생한다

이런 경우에는 기본적인 meta 태그를 작성해주는 것이 좋기 때문에
페이지 컴포넌트의 코드 수정이 조금 필요하다

// 원본 코드
export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) return '로딩중입니다';
.
.
.

설정해놓은 meta 태그가 없음

// 수정 코드
export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  if (router.isFallback) {
    return (
      <>
        <Head>
          <title>한입북스</title>
          <meta property='og:image' content='/thumnail.ppng' />
          <meta property='og:title' content='한입북스' />
          <meta property='og:description' content='한입 북스에 등록된 도서들을 만나보세요' />
        </Head>
        <div>로딩중입니다</div>
      </>
    )
  }
.
.
.

설정해놓은 meta 태그 적용 확인

20. 배포하기

vercel.com 회원가입
$ npm install -g vercel → vercel 패키지 설치
$ vercel login → vercel 로그인

로그인 할 옵션 선택
로그인 성공
로그인 완료후 $ vercel

? Set up and deploy “~\Develop\onebite-next\section2”? (y)
  → 지금 이 폴더에 들어있는 Next 앱을 배포할건지?

? Which scope do you want to deploy to? (배포할 계정)
  → 어떤 계정에 배포할건지?

? Link to existing project? (n)
  → 기존에 존재하는 프로젝트에 연결할건지?

? What's your project's name? (프로젝트 이름)
  → 프로젝트의 이름이 뭔지?

? In which directory is your code located? (엔터)
  → 어떤 디렉토리에 코드가 있는지?

-Build Command: next build
-Development Command: next dev --port $PORT
-Install Command: yarn install, pnpm install, npm install, or bun install
-Output Directory: Next.js default
? Want to modify these settings? (n)
  → 설정을 바꿀건지?

배포가 완료된 터미널 화면