NextJS- 페이지렌더링

페이지 렌더링

일반 리액트는 사전렌더링이 되지않아 SEO 에 적합하지못한다.

이같은경우 NextJS 에서 제공하는 페이지 렌더링 방법이 2가지가 있다.

이 방법은 코드실행부분이 다르다는것에 집중해서 학습해보자.

Static Generation

Static Generation 은 프로젝트를 빌드하게됬을때 사전렌더링이 되게된다.

수시로 데이터가 업데이트되야할때 는 추가적인 작업이 필요하지만

그렇지 않은경우 빌드할때만 해당내용들을 사전렌더링을 하게된다.

getStaticProps 을 사용한다. 코드를 보며 살펴보자

import React from "react";
import MeetupList from "../components/meetups/MeetupList";

export const DUMMY_DATA = [
  {
    id: "m1",
    image:
      "https://cdn.pixabay.com/photo/2022/10/16/13/17/road-7525092_960_720.jpg",
    title: "foreste",
    address: "03357",
  },
  {
    id: "m2",
    image:
      "https://cdn.pixabay.com/photo/2022/11/20/09/06/night-view-7603847_960_720.jpg",
    title: "city",
    address: "03325",
  },
];
export const HomePage = (props) => {
  return (
    <>
      <MeetupList meetups={**props.meetups**} />
    </>
  );
};

**export async function getStaticProps() {
  // fetch logic
  return {
    props: {
      meetups: DUMMY_DATA,
    },
  };
}**

export default HomePage;

getStaticProps 는 async 비동기처리를 할수있고 그것을통해 데이터를 받아오거나 데이터베이스와 통신을 할수있다.

반환값에는 객체를 반환하게되는데 객체의 props 를 통해 해당 컴포넌트의 props 에 데이터를 내려줄수있다.

이것은 서버나 , 클라이언트쪽에서 처리하는과정속에 일어나는것이아닌

프로젝트를 빌드할때 생기는과정이기에 사전렌더링에 데이터를 내려줄수있다.

그리고 해당프로젝트를 실행해서 페이지소스를 보면 데이터들을 읽어올수있다.

데이터 가 수시로 변한다면 ?

데이터가 수시로 변해서 최신데이터를 보여줘야되는데 빌드할때만 사전렌더링 생성하기때문이다.

이같은경우 리턴 객체에 revalidate 를 사용한다.

revalidate 값에 시간을지정할수있고 이 시간마다 새로운페이지를 서버에요청해서 새로운페이지를 생성한다.

import React from "react";
import MeetupList from "../components/meetups/MeetupList";

export const DUMMY_DATA = [
  {
    id: "m1",
    image:
      "https://cdn.pixabay.com/photo/2022/10/16/13/17/road-7525092_960_720.jpg",
    title: "foreste",
    address: "03357",
  },
  {
    id: "m2",
    image:
      "https://cdn.pixabay.com/photo/2022/11/20/09/06/night-view-7603847_960_720.jpg",
    title: "city",
    address: "03325",
  },
];
export const HomePage = (props) => {
  return (
    <>
      <MeetupList meetups={props.meetups} />
    </>
  );
};

export async function getStaticProps() {
  // fetch logic
  return {
    props: {
      meetups: DUMMY_DATA,
    },
    **revalidate: 100 // 100초 마다 갱신**
  };
}

export default HomePage;

Server-side Rendering

이 함수는 빌드 프로세스에서 실행되지않고 서버에서 실행되고

요청이 들어올때마다 함수를 실행하여 최신상태를 유지하게된다.

export async function getServerSideProps(context) {
  // fetch logic
// 요청값
  const req = context.req;
// 응답값 
  const res = context.res;

  return {
    porps: {
      meetups: DUMMY_DATA,
    },
  };
}