오늘의 TIL
1. 빠르게 할 수 없다면, 속여보자! ㅋㅋ >> Optimistic-UI
- Optimistic-UI: 낙관적인 UI
실제로 성능을 높여주는 것이 아니라! 빨리 처리하는것처럼 보이게 하는 것이다.
API 요청을 보낼 때 성공할 것이라고 가정하고, 화면에 미리 요청이 성공됐을 때의 데이터를 보여주고 결과가 돌아오면 다시 진짜 결과로 바꿔서 보여주는 방법이다.
update()를 사용해서 cache state를 직접 수정해서 만들었다.
2. 미리보기랑 서버 사이드 렌더링이 관련 있다고? >> Open-Graph / SSR
-
OG: Open Graph
OG는 html의 meta 태그 중의 하나이다. 링크의 미리보기 이미지나 사이트의 설명, 제목을 보여주는 역할을 해준다.
즉, html 문서의 메타 정보를 알아보기 쉽게 표시해주기 위해 사용하는 것이다.
각 서비스에서 미리보기를 구현해놓았다면 이 OG 태그를 읽어서 미리보기 화면으로 보여주는 것이다. -
SSR
게시글 상세 페이지처럼 다이나믹 라우팅이 일어나는 페이지에는 meta 태그에 값을 넣어줄 수 없다. data를 받아오기 전에 이미 화면을 그려주기 때문에 meta의 내용은 비어 있게 된다..
그래서 SSR을 사용해서, SSR이 된 페이지라면 프론트엔드 서버에서 브라우저를 거치지 않고 바로 백엔드로 요청이 보내져서 meta 태그에 해당하는 데이터가 들어간 상태로 스크래핑이 가능하도록 만들 수 있다.
3. 검색 엔진 최적화도 서버 사이드 렌더링과 관련이 있대! >> SEO
- SEO: Search Engine Optimization 검색 엔진 최적화
SSR을 사용하는 가장 큰 이유는 SEO 때문이다. 검색봇이 돌아다니며 사이트 정보를 읽는데, 사이트 안의 내용이 있어야 특정 키워드들에 점수를 올려준다. 또한 이 검색봇들은 사이트에 내용이 들어올 때까지 기다려주지 않는다..^^ 그래서 SSR 처리를 해서 사이트의 키워드 점수를 올릴 수 있게 해주는 것이 중요 포인트이다~!
