- Optimistic UI
- Opengraph / SSR
- SEO
1. Optimistic UI
Optimistic UI는 서버로 보내는 요청이 성공할 것이라 가정하고 유저에게 요청이 성공한 응답의 결과를 임의로 만들어서 미리 보여주는 것이다.
왜 사용하나?
요청과 동시에 응답 결과를 프론트단에서 미리 제공해주므로 유저 입장에서는 요청 즉시 즉각적으로 반응하는 것처럼 보인다. 즉 UX 측면에서 매우 좋음.
언제 사용하나?
요청과 응답이 성공적으로 이행된다는 가정을 깔아두기 때문에, 실패할 경우를 생각해야한다. 실패하더라도 유저 입장에서 타격이 없을 때 사용하는 것이 좋다. 유저에게 직접적으로 타격이 생기는 중요 기능들, 특히 결제 관련 부분에는 적용하지 않는 편이 좋다.
update - cache.modify (기존에 있던 값만 바꿈)
update - cache.writeQuery (기존에 없던 값도 추가해서 바꿈)
2. Opengraph / SSR
Scraping & Crawling
Scraping은 긁는다라는 뜻으로, 1 번 가져오기
Crawling은 일정 주기로 계속 가져오기
Crawling 할 때 주의사항
- 크롤링한 데이터를 상업적 용도로 사용한다면 법적 문제 발생
- 너무 많은 접속으로 크롤링 하는 회사의 서버에 부하를 주면 안됨.(공격으로 판단될 수 있음)
과거에는 프론트 엔드 서버를 따로 두지 않았다. 백엔드에서 html을 보내주어 브라우저에서 읽게 만들
브라우저 검색창은 rest API.
Scrapping - cherrio
Puppeteer - crawling
axios로 스크래핑해서 cherrio로 쉽게 조작할 수 있음.
Open Graph: og
3. Server Side Rendering
SSR과 SEO
구글이나 네이버는 프로그램을 가지고 있다. 어떤 프로그램이냐 하면,
axios와 같은 api요청으로 다른 수많은 웹사이트들을 스크래핑 해와서 유저가 검색 엔진에 검색을 했을 때 스크래핑 해온 사이트들을 검색어에 맞게 보여주는 프로그램이다.
예를 들어,
Client Side Rendering이 적용된 웹 사이트A,
Server Side Rendering이 적용된 웹 사이트B가 있다고 하자.
웹 사이트A는 처음 브라우저에서 호출이 되면, 처음엔 빈 html 파일을 보내주고 그 파일 안에서 서버에 요청을 보낸 후 응답을 받아 내용을 채워서 웹 사이트A의 콘텐츠들을 보여준다.
이 때, 네이버나 구글이 돌리는 프로그램은 수많은 웹 사이트들의 메인 URL을 호출하는데 그렇게 호출한 첫 페이지가 만약 위와 같은 CSR이 적용된 웹 사이트A의 첫 페이지라면, 빈 페이지가 출력되게 된다. 빈 페이지에서 아무런 결과를 받아올 수 없으므로 사용자가 구글의 검색 엔진으로 검색해도 웹 사이트A는 나오지 않는다.
웹 사이트B는 처음 브라우저에서 호출이 되면, 처음부터 모든 콘텐츠들이 채워진 파일을 보내준다. 콘텐츠들이 채워져있기 때문에, 구글이 돌리는 프로그램은 메인 콘텐츠의 키워드를 찾을 수 있게 되고 사용자가 검색한 키워드에 맞춰서 웹 사이트B가 나오게 된다.
구글은 CSR도 감지함. -> 스스로 실행시키는 기능이 있음. 하지만 SSR만큼 SEO 순위가 높지는 않다.
