Optimistic-UI /SSR

Park Bumsoo·2022년 4월 30일
0
  1. Optimistic-UI
  2. Open-Graph /SSR
  3. SEO

Optimistic-UI

좋아요를 올리는 API가 있다 해보자.
작동할 때 브라우저에 버튼을 클릭하는 동작을 통해 백엔드 서버로 데이터를 전송하고
백엔드 서버는 DB에 저장을 한 후 다시 백엔드를 거쳐 브라우저에 표시를 해준다.

브라우저->백엔드->DB->백엔드->브라우저

이 과정에선 서버간 이동이 많기에 렌더까지의 시간이 증가한다.

Optimistic-UI는 브라우저에서 좋아요 버튼을 누르게 되면, 데이터가 전송되지 않았음에도 화면에 결과를 미리 빠르게 렌더해 보여주는 것으로 상대적으로 위 과정을 거치는 동안 결과를 속여서 보여주기 때문에 속도가 빠르다.

단 속여서 보여주는 거지 데이터의 저장은 서버의 API에 의거하기 때문에
Optimistic-UI를 사용할 때는 아래의 조건을 가지고 있어야 한다..

  • 실패율이 적어야한다.
  • 설령 실패하더라도, 큰 영향이 없어야한다.

Open-Graph /SSR

Open-Graph 줄여서 Og라고 한다.
우리가 여러 사이트의 주소를 입력하면 간단한 정보가 아래와 같이 보인다.

Og는 이 부분을 보여주는 태그들이다.

		<Head>
		  <meta property="og:title" content="사이트이름"></meta>
          <meta
            property="og:description"
            content="설명설명"
          ></meta>
          <meta
            property="og:image"
            content="img_url"
          </meta>
        </Head>

코드로는 위와 같이 <Head> 안쪽에 <meta></meta>태그를 이용하여 작성한다.
react/next환경의 경우엔import Head from "next/head";로 head를 가져온 후 사용하자.

useQuery를 통해 data를 받아온 경우

	  <Head>
        <meta property="og:title" content={data?.fetchBoard.title}>			</meta>
        <meta
          property="og:description"
          content={data?.fetchBoard.content}
        ></meta>
        <meta property="og:image" content={data?.fetchBoard.image}>			</meta>
      </Head>

위 처럼 query를 한 값을 가져오는 것은 불가능하다.

브라우저가 가져오는 데이터는
1. HTML CSS JS 등 프론트엔드 서버에 하드코딩된 기본적인 값들을 브라우저에 채워주며
2. 백엔드로 부터 query요청을해 받아온 데이터들을 2차적으로 브라우저에 채워준다.

이 실행순서를 og: 에 적용시켜 생각해보면
<meta property="og:title" content={data?.fetchBoard.title}> </meta>

부분은 실행순서 1번에 의하여 브라우저에 채워질 때
content={data?.fetchBoard.title} === content={}
이 되는 셈이다.

axios / curl / postman.. 처럼 스크랩을 이용할 때 useQuery를 통해 데이터를 가져올 때 까지 기다려주지 않기에 동적으로는 content={data?.fetchBoard.title}를 채우는게 힘들다.

그래서 SSR을 통해 실행순서 1번과정에 모든 데이터를 불러오게 되면 CSR 대비
2번까지 기다려야 하기 때문에 페이지 구성속도가 느려지지만 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점을 당길 수 있다.

SSR(Server-Side-Rendering)

SSR은 서버에서 백엔드로부터 Query를 통해 데이터를 받아오고, 한번에 브라우저에 보여주는 방식으로 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지가 나타나게 된다.

SSR을 사용하면 모든 데이터가 다운도르된 서비스 페이지를 브라우저에 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다.

기존의 react는 새로운 서버를 만들어 JSX 전체를 String으로 만들어 받아온 데이터를 넣어준 후 서버를 완성해서 프론트엔드 서버에 보내주는 방식을 사용하였기에 굉장히 어려운 작업이였다.(react 18.0 이후에는 react에서도 제공)

그렇기 때문에 하나의 함수로 SSR을 제공하는 Next.js를 사용하게 되었다.
(getServerSideProps) = ssr페이지 설정

  • 브라우저가 프론트 서버에 요청

따라서 SSR을 실행하는데 필요한 시간에 켜져있어야 할 서버 컴퓨터가 필요하며
해당 서버 컴퓨터를 통해 백엔드와 정보를 주고받으며 프론트 서버에서는 모든 데이터를 받아
한번에 브라우저에 로드시켜준다.

그렇게 되면 위쪽 Open-graph 부분에도 하드코딩이 아닌 Query를 통해 받아온 데이터로 가능하며
OG에서 계속해서 값을 바꿔야 하는 경우 사용하면 된다.
주로 게시글이나 제품들의 상세보기 같은 고유 아이디및 데이터를 가진 주소에 많이 사용한다.

export const getServerSideProps = async (context) => {
  // 데이터를 요청
  const result = await request(
    "https://backend06.codebootcamp.co.kr/graphql",
    FETCH_BOARD,
    {
      boardId: context.query.boardId,
    }
  );
  //   const { data } = useQuery(FETCH_BOARD); // 서버에서는 useQuery 사용불가

  return {
    props: {
      myboardData: {
        title: result.fetchBoard.title,
        contents: result.fetchBoard.contents,
        images: result.fetchBoard.images,
      },
    },
  };
};

croilling

croilling은 다른 사이트의 정보들을 가져오는 것을 말한다.
비슷한 단어로 Scraping이 있는데 이 둘의 차이는
Scraping은 한번을 가져오며 croilling은 정기적으로 계속해서 정보를 가져온다.

라이브러리로는 대표적으로 Cheerio(Scraping), Puppeteer(croilling)이 있다.

profile
프론트엔드 주니어 개발자(React, Next.js)

0개의 댓글