Next.js 공부기록 <서버사이드 렌더링(SSR)>

성민개발로그·2022년 1월 22일

next.js

Next.js

목록 보기

3/5

코딩앙마 유튜브 채널에서 참고하고 쓴 블로그입니다.
코딩앙마 유튜브

먼저 Next.js 장점을 다시 짚어보겠다.

Next.js 모든 페이지 사전 렌더링을 한다 (Pre-rendering)
미리 html파일들을 만들어 둔다고 생각 하면된다. 미리 html 생성해주면 더 좋은 퍼포먼스 와 검색엔진최적화(SEO) 장점이 있다.

`Pre-Rendering` 에는 두가지의 상태가 있다.

정적 생성.
서버사이드 렌더링(SSR, Dynamic Redering).
차이점은 html 의 생성시점이다.

정적 생성

프로젝트가 빌드하는 시점에 html파일들이 생성된다.
모든 요청에 재사용하기가 수월하다.
퍼포먼스 이유로, 넥스트 js는 정적 생성을 권고한다.
정적 생성된 페이지들은 CDN에 캐시된다.
getStaticProps / getStaticPaths 사용하여 구현한다.

서버사이드 렌더링

매 요청마다 html 을 생성한다.

한상 최신 상태 유지하는 페이지에 적합하다.

getServerSideProps 사용하여 구현.

구현하는 페이지 중에서 서버사이드 렌더링 해야하는 페이지 기준은?

코딩앙마 유튜브 채널에 프로젝트중에서 모든 화장품 제품을 보여주는 index 페이지의 html 구조를보면 굳이 매번 서버사이드 렌더링해서 html을 다시 그릴필요가 없다. 왜냐하면 <head> 부분만 봐도 언제나 같은 내용이기때문에 비동기로 불러오는 화장품 제품만 그려주기만 하면 되기때문이다.
index 페이지:

index 페이지 html 상단구조:

홈화면 은 페이지가 원하는 정보가 크게 다르지않기 때문에 굳이 서버사이드 렌더링으로 다시 변하지 않는 내용을 그릴필요가 없다고 생각한다.

반대로 각각의 화장품 제품의 상세페이지는 제품의 정보 따라 html head 부분의 description , title 부분이 바뀌어서 보여줘야한다. 제품마다 바뀌는 페이지들은 서버사이드 렌더링으로 저희가 페이지를 요청할때 마다 서버에서 그려줘서 프론트로 보내주는 방법이 좋다.

상세페이지 :

상세페이지 html 상단:

서버사이드 렌더링 하기전에는 보이듯이 title에 제품이름 이랑 meta description 을 매번 제품이 다를때마다 바꿔주고 싶다. 그래야 검색엔진최적화에도 적용이되고 sns나 메신저에 링크를 전송할때 간단한 썸네일도 보여주게끔 할수있다(이부분은 Open Graph 사용해서 구현을 해야한다) 이제 상세페이지 부분을 서버사이드 렌더링을 적용시켜 보겠다.

적용전 상세페이지 코드:

import Axios from "axios";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Item from "../../src/component/Item";

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  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) => {
      setItem(res.data);
    });
  }

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

  return <Item item={item} />;
};

export default Post;

서버사이드 렌더링 적용후 코드:

import Axios from "axios";
import Head from 'next/head';
import Item from "../../src/component/Item";

const Post = ({item}) => { // prop 을 받아와서 활용한다.
  return <>{item &&(
  <>
  <Head> //받아온 item으로 title , meta 를 다시 그려준다.
    <title>{item.name}</title>
    <meta name='description' content={item.description}></meta>
  </Head>
  <Item item={item} /> // Item 컴포넌트에 item 전달.
  </>
  )}</>;
};

export default Post;

export async function getServerSideProps(content){ //서버사이드 렌더링 할때 사용할 함수 
  const id = content.params.id;  //content 의 있는 프로퍼티 params 중에 id 를 가져온다 우리의 링크중 /[id]/ 이부분 
  const apiUrl = `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
  const res = await Axios.get(apiUrl);
  const data = res.data; //api 에서 받아온 데이터.

  return {
    props:{
      item: data, // item 이라는 이름으로 post 컴포넌트에 props로 전달.
    }
  }
}