Sota Tech Blog.

コメント機能のためのSupabaseとレンダリング方法投稿日: 2023年 3月13日

コメント機能が欲しかった

前にも説明させてもらったかもしれないが時々「じぶんのブログの記事や情報性は正しいのか？」と不安になることがある。
自分自身のキャッチアップ方法として自分の発信した意見から客観的にみたらどのような意見をいただけるのかということや他に応用することができることや素直に自分の記事がどう思われているのかが気になっていた。
だからどんな意見でもいいから客観的に情報発信として正しい情報なのかということや記事の方向性のアドバイスなどもいただきたいと考えている🙇‍♀️
勉強で比喩すると自分がインプットした意見を人に説明して間違ったことや改善することがあればアドバイスしてもらうような感覚で発信することができればと思っている。

結論

ISRを用いたsupabaseを利用したコメント機能の実装となった。

参考記事

supabaseへのログインページ
 JSまたはTSを用いた機能の概要
 Next.jsでのクイックスタート
 Next.jsでの実装例
 わかりやすいレンダリング方法の概要

実装要件

触れたことない技術を利用して実装
レンダリング方法を変更
匿名で投稿することができるように

触れたことない技術を利用して実装

これはシンプルに触ったことがない技術を使ってみたいとプロダクトを実装する際に常々思っている。
バックエンドが実装することはスピード感を持って実装したかっため、想定していなかった。
そうなるとプラットフォームで完結しようと考えfirebaseは以前インターンをしていた際に利用したことがあったので今回は既存のデータベース知識を利用することができるsupabaseを使ってみてみたいと思っていたのと、友人や先輩が利用していた背景があり今回は使ってみることにした。

レンダリング方法を変更

これもコメントを機能を付け加えるために必須の要件である。
今まではmicroCMSのみで完結していたため静的ページのみで開発することができたが、コメント機能実装となると実際に投稿されたコメントはサーバー側で処理して反映されるため、ビルド時に反映される既存のレンダリング方法では対応することができないということを想定していた。
そのため、現状ではSSGを利用していたがSSRかISRのどちらかに変更して実際に投稿されたコメントを次の記事の投稿にビルドされる必要もされることなく反映できればと思っていた。

匿名で投稿することができるように

自分は特定の視聴者さんの意見を知りたいということもあるがそれ以上に自分のブログは客観的にどのように思われているかどうかが知りたいということもあってそのようなことを考えると匿名でいいと思い。今回はそれ以外の部分は考慮しないという考えにした。また仮に名前ありで実装した場合、ログインやフォームでの名前の入力が必要になると思ってしまったため、あくまでもこれは自分のブログということで必要ないと考えた

実装

データベース

厳密にやれば色々やれるが省略させてもらう。
簡単に説明させていただくと、

created_at ... Dateオブジェクトを利用はするが表示の際に文字型で利用する
blog_id ... ブログの方のデータはプラットフォームが違うため外部キーとしない

とした。

フロント側の実装

supabaseの実装については上記の参考サイトの欄を閲覧してほしい。
かなりドキュメント的にもわかりやすいものになっていると思うのでしっかりと理解することができると思う。
以下の部分で実際のコードを抜粋して紹介する。

supabase.ts

import { createClient } from '@supabase/supabase-js';


interface Database {
  public: {
    Tables: {
      movies: {
        Row: {}; // The data expected to be returned from a "select" statement.
        Insert: {}; // The data expected passed to an "insert" statement.
        Update: {}; // The data expected passed to an "update" statement.
      };
    };
  };
}


export const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

formでの部分はreact-hook-formとuuidというライブラリを利用している。
全てのコードを紹介できなくてすいません！もし何かあればコメントください。

CommentForm.tsx

import { v4 as uuidv4 } from 'uuid';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, reset } = useForm();
  const onSubmit = async (data: any) => {
    let insertData: Comment = {
      uuid: uuidv4(),
      created_at: getDate(),
      comment: data.comment,
      blog_id: blog.id,
    };
    await supabase.from('comments').insert(insertData);
    reset();
  };
        <form onSubmit={handleSubmit(onSubmit)}>

このように実装している。

Supabaseを利用して感じたこと

実際に今までのデータベースの知識を利用することができたのはかなり大きかなと感じた。
Firebaseと比べしっかりとデータベースの設計などもすることができ、GUIを用いて様々な制約なども作ることができるのでかなり利用しやすいのとメソッドなどもかなり自然に利用することができるのでとてもいいなと感じることができるようなものになっている。
また、Firebaseに比べかなりコードが理解しやすいなと個人的に感じることができた。

レンダリング関係について

結論から話すとISRを利用することにした。
最初はSSRを利用していたが実際に利用してみると想像よりもリクエスト数が増えていたことと自分がコメントされたことがわかればいいこととそこまでの即時性は求めていないのでISRが最適だと感じた。
ただ自分もここの部分まだまだ不安に残ることも多いのでしっかりとさらに知識を深めたいと思う。

感想

まだまだ改善することができる点は多いがブログの開発は一度ここまでにしておこうと思う。
他にもバックエンドでキャッチアップしたいことや他にもやらなければいけないような私用の手続きがたくさんあるのでこの引越しの時期に進めなければいけないような手続きを進めていこうと思う。
supabaseに触れる機会が今までなかったので実際に利用することができて本当によかった。

匿名でコメント

ISRほんとに素敵