가비아, 고대디 도메인 가입하기
수업때는 가비아
AWS

optimistic-UI 는 낙관적 UI라고 불린다.
예를 들어 좋아요 버튼을 누를때
원래 요청을 보내면 백엔드에서 DB로 가서 데이터를 받아와야하지만
요청보내고 성공 하겠다 가정하고 바로 cashState를 바꿔서 업데이트를 한다.
하지만, 막 사용하면 안된다.

optimistic-UI 사용해도 될 때

• 99% 이상 성공한다고 예상이 될 때 사용해야한다.
• 1% 확률로 실패하더라도, 문제가 안되는 API

먼저 state값을 변경해준뒤, 실패하면 다시 와서 전값으로 되돌린다.

서버사이드렌더링

오픈 그래프

그림은 디스코드 개발자분들이 만들었지만,
그안에 있는 내용은 네이버 개발자분들이 만들었다.

og: open graph 의 약자

Scraping 스크래핑

소스코드를 긁어와서 필요한 데이터를 뽑아내서 뿌려준다.

터미널에서 curl 명령어로 html 코드를 긁어올 수 있다.

Crawling 크롤링

서버 사이드 렌더링

og: 에는 정적인 데이터만 담을 수 있다.
쿼리로 data를 불러와서 데이터를 담아준다면, 브라우저를 열 때는 불러오지 않아 없다고 뜬다.

상품을 보여지게 하고 싶은데 그럴려면 useQuery를 써야한다.
그럼 스크래핑이 안되서 미리 보기가 나오지않는다.

해결 방안
useQuery를 프론트엔드 서버에서 한번에 처리하여 백엔드로 보내주면 된다.
그리고 DB에서 데이터를 꺼내와 프론트가 받고 브라우저에 뿌려준다.

서버사이드렌더링을 할 때는 useQuery를 사용하지 않고, getServerSideProps라는 것을 이용한다.

이렇게 하면 데이터를 받아오는 meta태그를 스크래핑 하는 것이 가능하다.

네이버봇이나 구글봇등 검색엔진에서 데이터를 크롤링 할 때,
useQuery를 받는 데이터들도 보내주기 위해서 서버사이드렌더링을 이용한다.

SEO(Search Engine Optimization)_검색 엔진 최적화