동기

일본어에는 이런 격언이 있습니다.

"단지 높은 것은 없다"

"시간은 돈이야"

그럼, 무료 서비스로 폭속 웹 어플리케이션을 만들면 최고가 아닌가? ?
→ 만들었습니다.

Qiita-Trend-PWA

Qiita 좋아요 수 랭킹 표시 사이트

순위 상위 태그 시각화

구성

서버

"now"(Node.js 서버)

데이터 스토어

Firebase

프레임 워크

"Next.js"+ "next-offline"

"now"(Node.js 서버)

역할

SEO 대책 + 성능 대책을위한 SSR

장점

OSS 플랜 - FREE → 무료

하위 도메인 검색 가능

HTTP2 대응 → 폭속

HTTPS 지원

"Firebase"

역할

Qiita 좋아요 번호 스크래핑 결과 얻기
(CloudFirestore + CloudFunctions + CloudHosting)

장점

Spark 플랜 → 무료

CDN 이용에 의한 응답 취득 고속화 → 폭속

『Next.js』+『next-offline』

역할

PWA 대책

SPA 지원

장점

OSS → 무료

ServiceWorker가 15행 정도로 이용 가능 →폭속

정말 폭속인가?

(여기까지 읽어주신 여러분의 마음의 목소리가 들립니다...)

"정말 폭속인가??🤔"

→폭속입니다.

lighthouse

꽤 좋은 점수 👍
(Accessibility는, Qiita의 외형에 맞추어 간 결과, 포기했습니다..)

WebPageTest

꽤 좋은 점수 👍
「Load Time」, 「Speed ​​Index」, 「First Interactive(beta)」당을 확인하실 수 있으면 1초를 크게 밑돌고 있습니다. .
ServiceWorker를 이용하여 각 리소스의 응답을 클라이언트 측에 캐시하고 있으므로 두 번째 표시가 빨라지고 있네요.
(굳이 사이트의 비교는 실시하지 않으므로, 다른 사이트에 대해서는 여러분으로 시험해 주세요.)

요약

"단지 높은 것은 없다"

"시간은 돈이야"

그럼 무료 서비스만으로 폭속 웹 애플리케이션을 만들면 최고가 아닐까? ?

→ "now" + "Firebase" + "Next.js" + "next-offline" = 무료로 폭속! 😀

추가

상기 사이트에서 실시한, CDN 이용에 관한 일 연구를 기재했습니다.

무료 서비스만으로 CDN 히트율을 높이기 위한 한가지 연구