こんにちは、CURUCURUエンジニアの水谷です。 あけましておめでとうございます。2024年が始まりました。

今回はNext.jsのSSRについて少し書いていこうと思います。 最近ちょっと手こずったのでその話を書きます。

---

概要

Next.jsでのSSR（サーバーサイドレンダリング）について

Next.jsのサーバーサイドレンダリングについて

Next.jsにはクライアントサイドとサーバーサイドでレンダリングの方法を選ぶことが出来ます。 今回はサーバーサイドレンダリングの方で話を進めていきます。

SSR（Server-Side Rendering）

サーバー側でデータの取得やレンダリングをして、HTMLをクライアント側に渡す方法でレンダリングをします。 サーバー側でレンダリングするので、この方法はSEOにも有効です。

最近手こずった話

わりと初歩的な話ではありますが、こういったところを意識しないと不具合を入れ込んでしまうという話になります。

const data = await Promise.all(recommendDatas.map(async (recommendProductData) => {
    try {
        const productDatas = await api.getProductById(recommendProductData.pid);
        if (productDatas === undefined || productDatas === null || productDatas.res === null) return null;
        const productData = productDatas.res.data.find((product) => {
            const productFamily = product.product_families.find((pf) => pf.family_masters.family_master_id === PRODUCT_FAMILY_MASTER_SELECT);
            const productCode = productFamily ? productFamily.product_family_code : null;
            return productCode === recommendProductData.pid ? product : null;
        });
        return productData ? { products: productData, order: recommendProductData.order, start_date: recommendProductData.start_date, end_date: recommendProductData.end_date } : null;
    } catch (error) {
        return null;
    }
}));
const filterProducts = productsData.filter(p => p);

これは取得した商品データから該当するIDの商品を取得する処理です。 問題は複数箇所でnullを設定しているところです。

undefinedのまま放置するのはまずいので、nullの設定自体は問題ないのですが、 nullが入った状態でレンダリングをするとサーバー側で500エラーが起きます。

なので、渡してあげる値はnullを取り外して上げる必要があります。 このnullを取り外すというのが盲点でしたね。 わりと初心者あるあるな話だと思います。

const filterProducts = productsData.filter(p => p);

今回も先輩に教えてもらいました。そろそろ自分で解決できるようになりたいですね。 余談ですが、nullを外すのはわりとよくある話で、Rubyとかだとcompactメソッドがあります。

post = [1,2,nil,4]
@posts = posts.compact

Rubyの場合はnilですが。 なので、わりと一般的に意識してケアしないといけないことだなと感じました。 こういうケアもしっかり気をつけてコーディングしていきたい。

まとめ

クライアントサイドで特にコンポーネント単位でエラーが起きても被害は少なめですが、 サーバーサイドでエラーが起きると、そのままページが表示されなくなるので、より気を張ってコードを書く必要があるなと実感しました。

メンバー募集

CURUCURUでは開発メンバーを絶賛募集中です。 CURUCURUの開発に興味があったり、モダンな開発環境で挑戦してみたいという方がいましたら、ぜひこちらも覗いてみてください！