[Next.js] 좌충우돌 SSR 적용하기 -1

기록하며 공부하자·2021년 12월 13일
0

Next.js SSR 적용하기

목록 보기
1/3
post-thumbnail

Next.js의 가장큰 장점을 검색해보면 react보다 손쉬운 SSR 적용이라고 많이 찾아볼수 있다.

프론트엔드 개발자라면 SSR을 떼어놓을수 없기 때문에 적용을 하기 시작했다.

어떤 페이지에 적용을?

모든 페이지에 SSR을 적용해버리면 안되기에 SSR적용페이지를 정해야 한다.

SSR 적용페이지는 주로 상세페이지들에 설정한다.

하나의 페이지에 모두 다른 정보들이 나오기 때문에 CSR이 아니라 미리 정보를 받아서 페이지를 그려야 SEO 대응, 링크전달시 썸네일 띄우기 등등의 작업이 가능하다.

적용단계

적용방법을 크게 요약하면 다음단계가 필요하다.
1. SSR 적용페이지에 코딩하기
2. docker file 설정
2. SSR CSR 나눠서 build 하기
3. 배포하는곳에서 SSR 페이지는 VM으로 CSR페이지는 Bucket으로 설정하기
4. VM에서 docker를 이용해 build 하기

위 과정들을 미리 생각하며 SSR 적용에 들어갔다.

1. SSR 적용페이지에 코딩(getServerSideProps)

SSR 적용을 하려는 페이지에 아래와 같이 코딩이 필요하다.

import Head from "next/head";
import { gql, request } from "graphql-request";
import { withAuth } from "../../../src/components/commons/hocs/withAuth";
import ProductsReadContainer from "../../../src/components/units/product/read/ProductsRead.container";
const ProductsReadPage = (props: any) => {
  return (
    <>
      <Head>
        <meta property="og:title" content={props.fetchUseditem.name} />
        <meta property="og:description" content={props.fetchUseditem.remarks} />
        <meta
          property="og:image"
          content={`https://storage.googleapis.com/${props.fetchUseditem.images[0]}`}
        />
      </Head>
      <ProductsReadContainer />
    </>
  );
};
export default withAuth(ProductsReadPage);
const FETCH_USEDITEM = gql`
  query fetchUseditem($useditemId: ID!) {
    fetchUseditem(useditemId: $useditemId) {
      name
      remarks
      images
    }
  }
`;
export const getServerSideProps = async (context: any) => {
  //* 1번째실행
  // 페이지 안에만 적을수 있다.  getServerSideProps는 정해진 이름이라 바꾸면 안된다.
  // 1. graphql 데이터를 요청한다.
  const result = await request(
    "https://backend03.codebootcamp.co.kr/graphql12",
    FETCH_USEDITEM,
    {
      useditemId: context.query.ProductsDetailPage,
    }
  );
  console.log("123");
  // 2. 요청받은 데이터를 페이지로 넘겨준다.
  return {
    props: {
      fetchUseditem: result.fetchUseditem,
    },
  };
};

meta 태그 사용을 위해 head를 불러온후 선언해준다.

<meta property="og:title" content={props.fetchUseditem.name} />
<meta property="og:description" content={props.fetchUseditem.remarks} />
<meta property="og:image" content={`https://storage.googleapis.com/${props.fetchUseditem.images[0]}`}
/>

상세내용들이 고정되어있는 페이지가 아니기에 meta 태그도 그때마다 변하는 값을 적어준다.
이제 여기에 데이터를 넣기위해 데이터 요청 Query를 작성한다.

const FETCH_USEDITEM = gql`
  query fetchUseditem($useditemId: ID!) {
    fetchUseditem(useditemId: $useditemId) {
      name
      remarks
      images
    }
  }
`;

쿼리작성은 기존에 하던것처럼 작성해 준다.

그후 서버사이드렌더링에 필요한 getServerSideProps를 선언해준다.

export const getServerSideProps = async (context: any) => {
  //* 1번째실행
  // 페이지 안에만 적을수 있다.  getServerSideProps는 정해진 이름이라 바꾸면 안된다.
  // 1. graphql 데이터를 요청한다.
  const result = await request(
    "https://backend03.codebootcamp.co.kr/graphql12",
    FETCH_USEDITEM,
    {
      useditemId: context.query.ProductsDetailPage,
    }
  );
  console.log("123");
  // 2. 요청받은 데이터를 페이지로 넘겨준다.
  return {
    props: {
      fetchUseditem: result.fetchUseditem,
    },
  };
};

이렇게 선언해주면 getServerSideProps가 먼저 실행된후 페이지가 렌더링 된다고 생각하면 된다.

profile
프론트엔드 개발자 입니다.

0개의 댓글