Nextjs 13, 15강 정리

강석우

Jul 06, 2024

Contents

페이지 사전 렌더링 & 데이터 페칭 Page Pre Rendering NextJS 페이지 라우터 최적화 <Head>document.js 이미지 최적화

페이지 사전 렌더링 & 데이터 페칭

Page Pre Rendering

React 와 다르게 NextJS는 페이지를 사전에 렌더링해서 전송해주기 때문에 모든 HTML정보가 들어가 있게 되고 SEO에서 좋은 효율을 뽑아낼 수 있다.

사전 렌더링을 하는 방식은 두 가지가 있다.

Static Generation

getStaticProps
- 해당 함수가 작성되어있는 파일은 사전 렌더링 파일로 인식하고 사전 렌더링 해준다.
- 함수 내의 코드는 서버에서 실행된 것이므로 브라우저에서 확인할 수 없다. 또한 서버에서만 사용될 수 있는 fs, path 등을 사용할 수 있다.
- 아래와 같이 작성해주며 해당 파일은 props를 받아올 수 있다. ex) props.products
```
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,
    },
  };
}
```
- ISR(증분 정적 생성)
  - revalidate를 통해 시간을 설정하여 페이지를 재배포 없이 재 생성 해줄 수 있다.
```
return {
    props: {
      products: data.products,
    },
    revalidate : 10 // 10초마다 재생성
  };
```
- notFound
  - 404페이지를 렌더링해준다.
```
return {
  notFound: true,
};
```
- redirect
  - 데이터를 못 받아온 경우 리디렉션을 통해 다른페이지로 이동시켜줌.
```
return {
    redirect : {
      destination: '/no-data'
    }
  };
```
getStaticPaths()
- 동적 페이지의 경우 NextJS는 페이지를 정적생성하지 않음 ( 정적 페이지를 전부 재생성하는데 동적은 불가능 ) 따라서 getStaticPaths() 함수를 함께 사용하여 해결.
```
export async function getStaticPaths() {
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
    ],
    fallback: false,
  };
}
```
- paths
  - param을 통해 [pid] 값이 p1,p2,p3인 동적 페이지를 사전 렌더링 한다.
- fallback
  - false 일 때 사전 렌더링 되지 않은 페이지에 접근 시 에러를 반환한다.
  - true 일 때는 일부 페이지만 사전 렌더링을 하고 나머지 동적 페이지에 대해 서버에서 데이터를 가져온다.
    동적으로 생성하는 데이터에 대해서는 loading 처리를 통해 에러가 나지 않게 처리해줄 수 있다.
```
if (!loadedProduct) {
  return <p>loading...</p>;
}
```
  - ‘blocking’은 컴포넌트 로딩 처리를 해주지 않아도 에러가 나지 않는다.

Serverside Rendering

getServerSideProps()
- 요청마다 새로운 데이터를 가져온다.
- 서버 쪽에서 코드가 실행되기 때문에 동적 경로를 미리 설정해줄 필요가 없다.
```
export async function getServerSideProps(context) {
  const { params, req, res } = context;

  return {
    props: {
      userId: params.uid,
    },
  };
}
```

Q) 클라이언트 사이드 렌더링과 getStaticProps()를 app-router에서 함께 사용하는 방법?

NextJS 페이지 라우터 최적화

<Head>

title과 meta등의 태그를 이용해 웹 페이지의 head를 수정 및 추가할 수 있다.
head를 추가함으로써 검색엔진에 더 많은 정보를 노출 시킬 수 있다.
app.js 파일에 head를 추가하여 전체 페이지에 적용 시켜줄 수 있다.
NextJS는 가장 최근의 헤더만 적용한다. ( 위와 아래 중 아래 우선 적용 )

document.js

Head 뿐만 아니라 HTML문서의 전체에 접근할 수 있는 파일이다.

이미지 최적화

<Image>

품질을 조금 낮추지만 눈에 보이지 않을 정도로 낮추고 웹에 최적화 된 형식(WebP)으로 자동 변경해준다. => 이미지 리소스를 줄여준다.
자동 lazy loading 적용.
width 와 height를 필수로 사용해야 하지만 fetching을 위한 너비와 높이로 css를 주면 적용이 된다.

1week 1Next

Nextjs 13, 15강 정리

강석우

Jul 06, 2024

Contents

페이지 사전 렌더링 & 데이터 페칭 Page Pre Rendering NextJS 페이지 라우터 최적화 <Head>document.js 이미지 최적화

페이지 사전 렌더링 & 데이터 페칭

Page Pre Rendering

React 와 다르게 NextJS는 페이지를 사전에 렌더링해서 전송해주기 때문에 모든 HTML정보가 들어가 있게 되고 SEO에서 좋은 효율을 뽑아낼 수 있다.

사전 렌더링을 하는 방식은 두 가지가 있다.

Static Generation

getStaticProps
- 해당 함수가 작성되어있는 파일은 사전 렌더링 파일로 인식하고 사전 렌더링 해준다.
- 함수 내의 코드는 서버에서 실행된 것이므로 브라우저에서 확인할 수 없다. 또한 서버에서만 사용될 수 있는 fs, path 등을 사용할 수 있다.
- 아래와 같이 작성해주며 해당 파일은 props를 받아올 수 있다. ex) props.products
```
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,
    },
  };
}
```
- ISR(증분 정적 생성)
  - revalidate를 통해 시간을 설정하여 페이지를 재배포 없이 재 생성 해줄 수 있다.
```
return {
    props: {
      products: data.products,
    },
    revalidate : 10 // 10초마다 재생성
  };
```
- notFound
  - 404페이지를 렌더링해준다.
```
return {
  notFound: true,
};
```
- redirect
  - 데이터를 못 받아온 경우 리디렉션을 통해 다른페이지로 이동시켜줌.
```
return {
    redirect : {
      destination: '/no-data'
    }
  };
```
getStaticPaths()
- 동적 페이지의 경우 NextJS는 페이지를 정적생성하지 않음 ( 정적 페이지를 전부 재생성하는데 동적은 불가능 ) 따라서 getStaticPaths() 함수를 함께 사용하여 해결.
```
export async function getStaticPaths() {
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
    ],
    fallback: false,
  };
}
```
- paths
  - param을 통해 [pid] 값이 p1,p2,p3인 동적 페이지를 사전 렌더링 한다.
- fallback
  - false 일 때 사전 렌더링 되지 않은 페이지에 접근 시 에러를 반환한다.
  - true 일 때는 일부 페이지만 사전 렌더링을 하고 나머지 동적 페이지에 대해 서버에서 데이터를 가져온다.
    동적으로 생성하는 데이터에 대해서는 loading 처리를 통해 에러가 나지 않게 처리해줄 수 있다.
```
if (!loadedProduct) {
  return <p>loading...</p>;
}
```
  - ‘blocking’은 컴포넌트 로딩 처리를 해주지 않아도 에러가 나지 않는다.

Serverside Rendering

getServerSideProps()
- 요청마다 새로운 데이터를 가져온다.
- 서버 쪽에서 코드가 실행되기 때문에 동적 경로를 미리 설정해줄 필요가 없다.
```
export async function getServerSideProps(context) {
  const { params, req, res } = context;

  return {
    props: {
      userId: params.uid,
    },
  };
}
```

Q) 클라이언트 사이드 렌더링과 getStaticProps()를 app-router에서 함께 사용하는 방법?

NextJS 페이지 라우터 최적화

<Head>

title과 meta등의 태그를 이용해 웹 페이지의 head를 수정 및 추가할 수 있다.
head를 추가함으로써 검색엔진에 더 많은 정보를 노출 시킬 수 있다.
app.js 파일에 head를 추가하여 전체 페이지에 적용 시켜줄 수 있다.
NextJS는 가장 최근의 헤더만 적용한다. ( 위와 아래 중 아래 우선 적용 )

document.js

Head 뿐만 아니라 HTML문서의 전체에 접근할 수 있는 파일이다.

이미지 최적화

<Image>

품질을 조금 낮추지만 눈에 보이지 않을 정도로 낮추고 웹에 최적화 된 형식(WebP)으로 자동 변경해준다. => 이미지 리소스를 줄여준다.
자동 lazy loading 적용.
width 와 height를 필수로 사용해야 하지만 fetching을 위한 너비와 높이로 css를 주면 적용이 된다.