[Next.js] - Pre-Rendering

Pre-Rendering

---

• Next.js 프레임워크는 기본적으로 Pre-Rendering 방식을 사용

• 미리 렌더링을 하여 html 생성

  • ✅ fater performance

  • ✅ SEO 최적화 : Pre-Render된 html을 SEO봇에게 전달

YouTube-codevolution

• Pre-Rendering 은 자바스크립트 엔진이 로드되기 전에 미리 html를 정적인 상태로 로딩

• 자바스크립트가 로딩이 되면 앱의 동적 작동이 활성화

Next.js App code source :

React.js 앱과 달리 코드소스를 열면 미리 html 태그가 로드되어있는 것을 볼 수 있다

HOW ?

---

🤔 Next.js 프레임워크에서 어떻게 Pre-Rendering 을 적용할까?

1. Static Generation

2. SSR - Server Side Rendering

Static Generation

---

• build time 에 생성되는 html 페이지

🟢 Production Server :

• 앱이 빌드가 될 때 미리 완성시키는 방법

• 빌드시 딱 한 번만 Pre-Render

• 배포가 된 이후엔 수정이 불가

🟣 Development Server :

• yarn dev 로 실행되는 개발한경에서는 수정되는 요소들을 바로확인 필수

• 모든 요청에 대한 Pre-Render

Static Generation & Data

---

getStaticProps :

const UserList: FC<Props> = ({ users }) => {
  return (
    <div>
      <h1>List of Users</h1>
      {users.map((user) => (
        <div key={user.id}>
          <p>
            {user.name} : {user.email}
          </p>
        </div>
      ))}
    </div>
  );
};

export async function getStaticProps() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  console.log(data);

  return {
    props: {
      users: data,
    },
  };
}

• 빌드시 고정되는 값 : 빌드 이후 변경이 불필요한 데이터를 위해 주로 사용

• 서비스의 사용되며 SSR에 필요한 고정적인 데이터들을 빌드 전에 가져와 Pre-Rendering

• ❗️ 서비스 중 Data Fetching에선 사용 불가

• console.log() : 빌드시 실행되는 함수 : 브라우저가 아닌 터미널에 출력

• getStaticProps는 props 를 키로 가진 갹체를 필수적으로 반환

Link Pre-fetching

---

• getStateProps 가 빌드 시 pre-render 되었을 때, Next.js 는 HTML 패이지 파일과 추가로 getStateProps의 결과를 가지고 있는 JSON 객체를 생성

• next/link next/router을 통한 client-side routing 에 사용됨

• 라우팅을 통한 페이지전환은 데이터를 pre-fetching 된 데이터를 props 로 사용하여 client-side-rendering

• 때문에 추가적인 Network 통신이 ❌