Next.js (SSR/SSG/ISR) + 12.1v 업데이트 사항(up12.2v)

SSR : Server Side Rendering

export const getServerSideProps = async () => {
  const res = await axios.get("https://...");

  return {
    props: { data: res.data.data },
  };
};

getServerSideProps 함수를 비동기(async/await)로 실행하면 ssr.js 파일이 로딩될 때 서버 쪽 명령어를 실행시켜 데이터를 가져올 수 있다.
axios로 data fetch 후에 props 객체를 리턴한 값으로 컴포넌트에서 이용할 수 있다.

• 페이지가 처음 로딩될 때 한 번만 데이터 fetch가 된다.
• CSR과 마찬가지로 SSR도 새로고침 시 매번 Data fetch가 된다
• express등 을 이용한 node server 없이 서버에서 데이터를 가져올 수 있다(Serverless)

SSG : Static Site Generation

export const getStaticProps = async () => {
  const res = await axios.get("https://...");

  return {
    props: { data: res.data.data },
  };
};

getStaticProps 함수를 사용하여 정적 사이트를 생성할 때 사용한다.
next build 명령어가 실행될 때 getStaticProps 함수가 실행된다.
즉 사이트가 빌드될 때, 한 번 서버사이드 data fetch를 하게되고, 얻은 데이트를 이용해서 페이지를 렌더링 한다.
next build를 다시 하기 전까지는 처음 실행했을때의 데이터로 계속 남아있다.

• 정적 사이트 생성
• next build 명령어 시 data fetch 실행
• 새로고침해도 데이터 변화 없음

ISR : Incremental Static Regeneration

export const getStaticProps = async () => {
  const res = await axios.get("https://...");

  return {
    props: { data: res.data.data },
    revalidate: 50,
  };
};

SSG의 단점을 보안한 것으로 getStaticProps함수를 사용하지만 리턴 객체에 revalidate가 있다.
몇 초마다 getStaticProps을 실행할 것인지를 정한다.
위에 revalidate: 50 로 설정하면 50초에 한번씩 함수가 실행된다.
위 시간이 지나고 새로고침을 해보면 새로운 data가 fetch 된 것을 알 수 있다.

• 페이지 첫 방문 시, SSG와 마찬가지로 처음 next build시 data fetch한 데이터.
• revalidate로 지정한 시간마다 data fetch 가능함. 이외 제어 불가능

Next.js 12.1v 업데이트 항목

참조 : Next.js 공식 홈 _ 12.1v

• On-demand ISR (Beta): Revalidate pages using getStaticProps instantly.
  기존 ISR이 revalidate로 시간을 지정하여 data fetch를 했었는데, unstable_revalidate() 라는 함수를 통해서
  revalidate() 라는 함수를 통해서 getStaticProps 함수 실행을 제어 할 수 있게 되었다.
  12.2v 으로 업데이트되면서 메소드명 변경

// pages/api/revalidate.js

export default async function handler(req, res) {
  // 유효한 요청인지 확인하기 위해 secret을 체크.
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    // await res.unstable_revalidate('/path-to-revalidate');
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // 오류가 발생한 경우 Next.js는 마지막으로 
    // 성공적으로 생성된 페이지를 계속 표시합니다.
    return res.status(500).send('Error revalidating');
  }
}

• Expanded Support for SWC: styled-components, Relay, and more.
  향상된 SWC 지원 : styled-component, relay 등

• next/jest Plugin: Zero-configuration Jest support using SWC.
  next/jest 플러그인: SWC를 사용하여 구성이 필요 없는 Jest 지원.

• Faster Minification with SWC (RC): 7x faster minification than Terser.
  SWC (RC)로 더 빠른 축소: Terser보다 7배 더 빠른 축소

• Self-Hosting Improvements: ~80% smaller Docker images.
  자체 호스팅 개선: ~80% 더 작은 Docker 이미지.

• React 18 & Server Components (Alpha): Improved stability and support.
  React 18 및 서버 구성 요소: 안정성 및 지원이 향상.