[Web template] Next.js 정적 생성(Static Generation)_ getStaticProps, getStaticPaths(6)

April·2021년 12월 2일
0

Nextjs🚀

목록 보기
6/14

서버사이드 렌더링(Server-side Rendering/SSR)은 ⬅︎ 요기


정적 생성(Static Generation)

pre-rendering(사전 렌더링)

Next.js는
1) 모든 페이지를 pre-render(사전 렌더) 한다

  • 클라이언트에서 모든 작업을 하는게 아니라, 사전에 각 html 파일을 생성한다

2) 이렇게 생성된 html은 퍼포먼스 향상
3) SEO 향상에 효과적이다

SEO: Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.
meta 태그를 이용해 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용한다.

  • meta 태그도 잘 보이고
    • 메타 태그: 웹 페이지의 보이지 않는 정보를 제공.
      페이지에 대한 설명, 제작자, 크롤링 정책 등의 정보를 제공할 수 있다.


☹️ pre-render를 하지 않으면?

  • JS load 전에는 아무것도 확인되지 않는다.

    • JSload 되어야 그 페이지 요소들을 채워나간다
  • Next.js처럼 pre-render를 하게 되면 초기에 meta data가 포함된 html 요소들이 페이지에서 확인된다.

    • 그 후 JSload 되고 <Link /> 등의 컴포넌트 들이 작동한다. 이 것을 hydration 이라고 한다.

Hydrate: server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤,
클라이언트 단에서 html 코드와 ReactJS코드를 서로 매칭 시키는 과정을 의미. Next.js의 주요 동작 방식 중 하나.



getStaticProps

미리 만들어 static html을 제공

변경하고 나니,

  • 길었던 로딩 시간 없이 첫 페이지를 바로 볼 수 있었다.
  • 로딩 페이지 등 불필요 코드를 줄이니 깔끔해졌다
import type { NextPage } from 'next';
import { getProducts } from './api/api';

const Home: NextPage = ({ list }: any) => {

  return (
    // ... 생략
  );
};

export default Home;

export async function getStaticProps() {
  const data = await getProducts();

  return {
    props: {
      list: data,
    },
  };
}
  • .next > sever

  • .next > static

    • 서버에서 사용되지 않는 js 번들 파일들이 확인된다.


getStaticPaths

❓Dynamic Routing(동적 라우팅)은 static page를 미리 만들 수 없는걸까?

  • [id].ts 파일 같은 페이지는 보통 SSR 처리 되지만,
    • 개수가 몇 개 되지 않고 한정적이면 미리 만들어 둘 수도 있다.
    • 그럴 경우 사용되는 게 getStaticPaths 이다
export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true // 없는 페이지 대한 대응 여부. 새로 정적 페이지를 만들게 된다..
  }
}

profile
🚀 내가 보려고 쓰는 기술블로그

0개의 댓글