Help us understand the problem. What is going on with this article?

無料で爆速なWebアプリケーションを作ろう!

More than 1 year has passed since last update.

動機

日本語にはこんな格言があります。

  • 「ただより高いものはない」
  • 「時は金なり」

じゃあ、無料サービスで爆速Webアプリケーションを作れば最高じゃない??
→作りました。

Qiita-Trend-PWA

https://qiita-trend-pwa.now.sh/

  • Qiitaいいね数ランキング表示サイト
  • ランキング上位タグの可視化
screen_shot1.png screen_shot2.png

構成

  • サーバ
    • 『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

lighthouse_score.png

中々良いスコア👍
(Accessibilityは、Qiitaの見た目に合わせに行った結果、諦めました。。。)

WebPageTest

https://www.webpagetest.org/

WebPageTest_score.png

中々良いスコア👍
「Load Time」、「Speed Index」、「First Interactive(beta)」あたりを確認いただけると1秒を大きく下回っています。。
ServiceWorkerを利用して、各リソースのレスポンスをクライアントサイドにキャッシュしているので、2回目の表示が早くなっていますね。
(あえてサイトの比較は行いませんので、他のサイトについては皆さんで試してみてください。)

まとめ

  • 「ただより高いものはない」
  • 「時は金なり」

じゃあ、無料サービスのみで爆速Webアプリケーションを作れば最高じゃない??

→『now』 + 『Firebase』 + 『Next.js』 + 『next-offline』 = 無料で爆速!😀

追記

zonbitamago
仕事ではサーバーサイドを細々とやってます。 趣味ではクライアントサイドをやってます。 すべてがWebになる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした