Last updated on

ユーザー投稿型サイトの技術スタックを考える

考えること

ユーザー投稿型サイトを作成する際、どの技術を採用するか考えたものをまとめます。

ユーザー投稿型サイトというのは、技術系だとQiitaやZenn、そのほかにはnoteなどがあります

必要な機能

  • レンダリング
  • BaaS
  • フロントエンド
  • Markdownエディタ
  • CDN

レンダリング

今回は、SEOを重視する。また、個人開発のためお金はあまりかけたくない

  • SSG
    • 記事が投稿・変更されるたびにSSGでbuildするのは、記事数の増加に従ってパフォーマンスが落ちてしまうので見送り
    • AstroのContent Layerが将来的に解決してくれそう?
    • 管理・保守が楽、閲覧が増えた時のサーバーへの負荷が軽い
    • ユーザー認証が必要な画面は別で作る必要がある
  • ISR
    • Next.jsを使ったISRも候補、特にOn-demand ISRは強力。懸念としてはデプロイ先がVercelなどISRに対応した場所に限られること。
    • Astroでもできる
  • SSR
    • 単体だとアクセスが多いときにサーバーへの負荷がかかるが、CDNのCacheと連携すればいいとこどりできる
    • 変更を即時に反映させるためには、CDNのキャッシュをAPI経由でパージしなければならない
    • エッジでSSRすることでパフォーマンスが良好に
      • Astro + Cloudflare Pagesでアダプターを使用したレンダリングはいいかも
      • CloudflareのRuntimeは制約が多いのが懸念
      • 安いしパフォーマンスもいい
    • ほかのものに比べると複雑で、管理保守が大変
  • CSR
    • メインコンテンツをCSRするのはSEO的にパフォーマンスがよくない
    • サーバーの負荷は軽くなるので、自分のサーバーでもなんとかなる
    • いいねとか、コメントとかは動的かつSEOでそこまで大事じゃないので、CSRを採用するかも

メインをISRにするかSSRにするかは悩ましいところ

How to Implement On-Demand Revalidation in Astro | LogSnagはISRでいい感じにやってそう

Supabaseを使えばAPIリクエストは無料だし、SSR部分はキャッシュせずに提供するのもいいかなあ。CLoudflare Workersは1日10万Readは無料だし、超えたとしても安いし。

SSRの問題は、DBにリクエストしなきゃいけないので、応答速度が少し遅くなる可能性があるところ。

BaaS

ユーザー投稿型サイトである以上、ユーザーを認証する仕組みが必要。また、書いた記事を安全に保管できるデータベースも必要

自分のサーバーで管理したくはないので、BaaSを使いたいという気持ちがある

  • Firebase
    • NoSQLなので柔軟
    • 読み書きや消去にお金が発生するのはちょっと怖い
    • ベンダーロックインリスクが高い
    • Google Cloudへの移行が容易で、スケールアップしやすい
  • AWS Amplify
    • スケールが容易
    • AWSの知識がいる
    • 従量課金でコストが跳ね上がる危険性がある
  • Supabase
    • PostgreSQLでデータの一貫性がある
    • オープンソースでコミュニティも活発
    • 認証含めセルフホストも可能
    • 料金体系がわかりやすく、読み書きは無料(料金はデータ量のみに依存)

Supabaseでいいかなと思っている、スケールが必要になってからFirebase(Google Cloud)やAWSに移行してもよいので

フロントエンド

Astroでいいかなと思っている(SSRができて、部分的にCSRを導入できるため)

Next.jsでISRも候補だけど、デプロイ先が限られるのは大きい

Markdownエディタ

タイプとしては

  • 1ペイン
    • 別名WYSIWYG Editor
    • 入力がそのまま修飾されるタイプ
    • NotionやZenn、microCMSで利用されている
    • 非エンジニアでもつかいやすい
    • 実装が大変だったり、バグが多いイメージ
  • 2ペイン
    • Qiitaで採用されている
    • 実装が比較的楽

今回はターゲットをエンジニア限定しないため、1ペインエディタを採用する

参考: draft-js vs quill vs slate vs tiptap | npm trends

  • Slate.js
    • 学ぶのがちょっと大変
    • 大幅にカスタマイズするならこれがよさそう
  • Quill.js
    • シェア1位
    • 手軽な感じがする
    • 一時期メンテナンスされていなかった時がある
  • Draft.js
  • Tiptap
    • UIの拡張性が高い
    • 開発がすごく活発
    • 公式でMarkdown shortcutsをサポートしている

CDN

コンテンツを高速に配信するため、サーバーの負荷を軽くするために必要

SSRと共に運用すると、即時に変更を反映させるためにはバックエンド側からキャッシュのパージを指示しなければいけない。

投稿者本人からのリクエストのみ、DBに即時に照会するといった対策もあるみたい

  • Fastly
  • Cloudflare
    • Enterpriseプランじゃないと、特定のページをpurgeみたいなことはできない
    • 無料でいけそう、転送量無制限

Cloudflareではじめて、相当アクセスが跳ねたらFastlyに移行っていうのがよさそう?

総括

とりあえずAstroでSSRして、いいねとかコメントはCSR。パフォーマンスが悪そうだったらISR with On-Demand Revalidationsする

DBや認証はSupabase、オブジェクトストレージもひとまずSupabaseかなと思っている

投稿作成部分はSEO関係ないのでReact + Tiptapで開発するつもり

とりあえずCloudflareでやってみて、とても跳ねたらFastlyといった気持ちでいます

作ってるうちに気分が変わったりするかもしれないけど、今のところはこんな感じに思っています