Page Pre-Rendering

pre-rendering

• Next.js는 페이지와 필요할 법한 모든 데이터가 있는 HTML 콘텐츠를 사전에 렌더링 ➡️ SEO관점에서 👍
• 오직 최초 로딩할 때 로딩되는 첫 번째 페이지만 사전 렌더링됨
  첫 번째 렌더링이 끝나고 나면 다시 react가 프론트엔드의 모든 처리를 수행함
• react가 모든 준비를 마칠 때까지 빈 페이지를 보는 대신에 모든 초기 콘텐츠가 포함된 pre-rendering된 페이지가 표시됨

pre-rendering 종류

1. static generation

• 빌드되는 동안 모든 페이지가 사전 생성됨

2. server-side rendering

• 배포 후 요청이 서버까지 왔을 때 모든 페이지가 생성됨

static generation - getStaticProps

export async function getStaticProps(context) {...}

• 파일에 getStaticProps 함수가 있으면 Next.js에서 이 함수를 먼저 실행하고 두 번째로 컴포넌트 함수를 실행함
• 렌더링 되기 전 API요청을 통해 원하는 데이터를 불러와야 하는 경우 사용됨
• client side에서 실행되지 않기 때문에 서버 측 작업을 수행할 수 있음
• 파일 시스템을 이용해서 json을 가져오는 코드 예시

// page/index.js
import path from "path";
import fs from "fs/promises";
function HomePage(props) {
  const { products } = props;
  console.log(products);
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);
  return {
    props: {
      products: data.products,
    },
  };
}

export default HomePage;