1 Pre-renders와 SEO

Next.js는 모든 페이지를 기본적으로 미리 그려놓습니다.(pre-render)

• 처음 클라이언트 쪽에서 HTML을 로드를 할 때, 이미 많은 부분이 그려져 있는 상태로 로드를 하게 됩니다.
• 이후 js번들이 로드되면, 그제서야 Hydration이라는 과정을 거쳐서 사용자와 앱이 상호작용을 할 수 있게 됩니다.

• 반면 pre-rendering이 없는 경우, 첫번째 로드를 할 때는 아무것도 존재하지 않습니다.
• 보통 리액트로 만든 single page application이 그렇습니다.
• 반드시 JS가 로드되고 실행이 되어야지만, 화면에 컴포넌트들을 그립니다.

1-1. Pre-rendering과 SEO의 상관관계

• CSR만 제공한다면(ex React), Client(브라우저)처럼 동작하지 않는 검색엔진의 경우 아무런 데이터도 조회할 수 없습니다.
• 반면, Pre-render를 해두면 Client처럼 동작하지 않는 검색엔진에게 필요한 데이터를 제공할 수 있습니다.
• 따라서 SEO를 위해서는 Pre-rendering이 필요하고, SSG(Static-Site Generation)와 SSR이 있어야합니다.

1-2. Next.js의 Pre-rendering방식은?

• SSG(recommended) & SSR
• SSG(Static-Site Generation)는 빌드타임에 pre-render
  • 빌드타임에 pre-render를 하기 때문에 서버에 부하가 덜합니다.
  • 따라서 Next.js에서는 SSG를 적극적으로 추천합니다.
• SSR(Server-Side Rendering)은 요청 타임에 pre-render
  • SSR의 경우 페이지에 접근할 때마다 서버에 요청이 들어가 부하가 걸릴 수 있습니다.

1-3 SSG(Static-Site Generation)의 2가지 상황

• Page의 내용물이 외부 데이터에 의존적인 상황

  • getStaticProps만 가지고도 가능

• Page Paths까지 외부 데이터에 의존적인 상황

  • ex) 상품리스트 중 코트가 하나 더 추가되어 카드리스트중 코트 path가 추가되어야함
  • getStaticPaths도 함께 활용해야 가능

2. Layouts

• 여러 페이지들의 공통처리가 필요합니다.

2-1 하나의 공통된 Layout을 쓰는 경우

• components/Layout.js
• 컴포넌트 하나를 pages/_app.js에서 활용할 수 있습니다.

Layout.js

_app.js

import Layout from "../components/Layout";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

2-2 여러개의 Layouts를 활용하고 싶은 경우

• components/SubLayout.js
• Page.getLayout에 getLayout함수를 제공

_app.js

import Layout from "../components/Layout";

export default function App({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
  return getLayout(<Component {...pageProps} />);
}

subLayout을 적용할 컴포넌트

export default function CSR() {
..
  return (
    <>
      <h1 className="title">{time}</h1>
    </>
  );
}

CSR.getLayout = function getLayout(page) {
  return (
    <Layout>
      <SubLayout>{page}</SubLayout>
    </Layout>
  );
};

3. Images

Next.js가 제공하는 최적화 Image Component

• Imporved Performance
• Visual Stablility(CLS-Cumnlative Layout Shift 방지)
• Faster Page Loads(viewport진입시 로드/ blur처리)
• Asset Flexibility(리사이징)