Optimistic-UI
낙관적 UI
데이터 전송이 느린 경우, 실제 데이터가 서버에 도착하지 않았지만 먼저 출력되는 결과를 바꾼 후 데이터를 보낸다.
다만 성공이 어느정도 보장된 데이터 전송에 관해 발생하는 이벤트
ex) 게시글의 좋아요 클릭 -> UI를 먼저 1만큼 올려서 보여줌 -> 서버에 데이터 전송 -> DB에 등록 후 다시 Br에 변한 데이터를 반환 -> 변한 데이터를 가지고 다시 리패치 (성공한 경우)
네트워크 불안정 등의 요소로 실패한 경우 +1 되었던 좋아요 카운트가 바로 원래의 상태로 돌아감
물론 중요한 데이터거나 안정성이 필요한 때는 (결제 등) 사용하면 안된다.
URL 미리보기
위의 그림처럼 URL전송시 해당 페이지의 요약 데이터를 미리 보여주는 것 (og)
페이지를 구성하는 요소 중 속성에 og가 있다면 해당 데이터를 불러올 수 있도록 구성
Head 태그를 임포트하고
<Head>
<meta property='' content='' />
</Head>
의 구성으로 사용한다
SSR
상품 상세페이지 등은 SSR로 구성하는게 좋은데, SSR을 적용하면 다른 디바이스에서 링크 등을 공유할 때 og를 통해 미리보기가 출력될 텐데
상세페이지마다 주소가 다르기 떄문에(동적 라우팅) 해당 주소값을 정확히 받아오기 위해 필요하다.
SSR을 적용하면 링크를 공유 했을때 FE의 서버에서 바로 BE로 요청을 보내고 DB에서 데이터를 받아오기 때문에 정확한 주소를 받아올수 있지만
SSR을 적용하지 않는다면 FE에서 바로 리턴값을 주기때문에 상세 페이지의 주소가 하드코딩이 아닌이상 제대로된 주소를 받아오지 못한다
즉, 동적 데이터가 적용된 페이지에 대해서는 SSR을 적용시켜야 한다.
SEO
Search Engine Optimization
검색엔진최적화
SSR이 가장 많이 적용되는 옵션
