hmk run dev

next.js의 SSR 본문

React

next.js의 SSR

hmk run dev 2022. 3. 1. 14:52

Next js의 모든 페이지 들은 사전 렌더링 (Pre-rendering)을 한다.

- 더 좋은 퍼포먼스

- 검색엔진 최적화(SEO)

 

Pre rendering엔 두 가지 형태가 있는데

차이점은 언제 html 파일을 생성가는가에 있다.

1. 정적 생성

- 프로젝트 빌드 시점 생성, 모든요청에 활용

- nextjs는 정적 생성을 권고함

- 정적생성된 페이지들은 cdn에 캐쉬됨

- getStaticProps / getStaticPaths

- 미리 만들어도 되는 페이지 상품리스트, 블로그 게시글 등을 처리할때 유용

 

2. SSR 

- 매 요청시 html 생성

- 항상 최신상태 유지

- getServerSideProps

 

페이지에 타이틀과 메타 정보들이 비어있는데 

검색엔진 최적화를 위해 SSR을 이용해 해결 보겠습니다.

 

 

 

SSR 적용 전 코드

 

전형적으로 useEffect에서 axios.get으로 데이터를 호출해 state로 set 해주는 코드

const Post = ({item}) => {
  const router = useRouter();
  const { id } = router.query;
  const [isLoading, setLoading] = useState(true);
  const [item, setItem] = useState({});

  const API_URL = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;

  function getData() {
    Axios.get(API_URL).then((res) => {
      setLoading(false);
      setItem(res.data);
    });
  }

  useEffect(() => {
    if (id && id > 0) {
      getData();
    }
  }, [id]);

  return (
    <>
      {isLoading ? (
        <div style={{ padding: "300px 0" }}>
          <Loader inline="centered">Loading...</Loader>
        </div>
      ) : (
        <Item item={item} />
      )}
    </>
  );
};

export default Post;

 

SSR적용 후 코드

 

getServerSideProps에서 데이터를 요청하고 response값을 props로 넘겨준다!

const Post = ({ item }) => {
  return (
    <>
      <Head>
        // 메타 데이터 추가
        <title>{item.name}</title>
        <meta name="description" content={item.description}></meta>
      </Head>
      {item && <Item item={item} />}
    </>
  );
};

export default Post;

export async function getServerSideProps(context) {
  // context는 params나 요청 응답 쿼리 등이 담겨서 온다
  const id = context.params.id;
  const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
  const res = await Axios.get(apiUrl);
  const data = res.data;

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

 

useEffect vs getServerSideProps

 

useEffect는 구성 요소가 마운트된 후에 실행되므로 페이지가 로드된 다음 데이터가 나타납니다.

getServerSideProps은 이미 데이터가 있는 페이지를 로드합니다. 

 

차이점은 페이지가 이미 로드된 후 플래시 데이터가 표시되는 것을 눈치채지 못할 것이며 html 문서가 데이터로 미리 채워져 훨씬 더 나은 검색엔진 최적화를 허용한다는 것입니다.

 

결국 데이터를 받는 시점이 다르다고 할 수 있습니다.

미리 받아서 데이터를 채워주고 있는 getServerSideProps가 검색 SEO 측면에서 좀 더 유리할 수 있습니다.

 

 

 

getStaticProps는 '빌드' 모드에서 페이지를 빌드할 때 사용됩니다. 

구성 요소에 필요한 모든 데이터를 정적으로 제공하여 페이지를 더 빠르게 페이징하므로 사용하는 것이 좋습니다.

 

getStaticProps가 반환한 키로 데이터를 푸시하여 getStaticProps가 가져온 모든 데이터에 액세스할 수 있으며, 해당 데이터를 props구성 요소 자체의 props에서 사용할 수 있습니다.

 

정적 생성은 다음 게시물에서..!

'React' 카테고리의 다른 글

useMemo와 useCallback  (0) 2022.03.22
Next.js 정적 생성(Static Generation) - getStaticProps, getStaticPaths  (0) 2022.03.01
Next.js의 장점과 프로젝트 구조  (0) 2022.03.01
async, await  (0) 2021.05.20
쿠키방식 로그인 코드  (0) 2021.04.17
'React' Related Articles more
Comments