SWRの導入

2021/01/03

このブログは一覧ページはいいね（いいねボタン未実装）の多い順に表示しているのだが、リアルタイムに反映させたい。
しかしながら毎回フェッチするのはパフォーマンス的に問題がある。
そこでSWRを導入することにした。
インストール 
npm install swr -S
ソースは以下 
import useSWR from 'swr'

const getPosts = async () => {
    const _posts = await app.content.get({ schemaKey: "myposts", populate: true, orderBy: { field: 'like', order: 'desc' } });
    const posts: any[] = [];
    Object.keys(_posts).forEach(key => {
        const post = _posts[key]
        delete (post._fl_meta_);
        posts.push(post)
    });
    return posts;
}

export const getStaticProps: GetStaticProps = async () => {
    auth = auth || await firebase.auth().signInWithEmailAndPassword(process.env.ADMIN_ID, process.env.ADMIN_PASSWORD);
    const posts = await getPosts();

    return {
        props: {
            posts: posts
        },
    }
}

const index = (props: any) => {
    //
    //ここで匿名認証しているが、割愛
    //
    const { posts, error } = useSWR('/blog/posts', getPosts, { initialData: props.posts });
    if (error) return <div>failed to load</div>
    if (!data) return <div>loading...</div>
    const out = posts.map(post=>{
        return (<div>{post}</div>)
    });
    return (
        <div>
            {out}
        </div>
    )
}