Problem with rendering title and description from Supabase

[iliamrv]

Hello! I'm working on a project where I use next-seo to manage meta tags in a Next.js 12 application. I've encountered an issue where next-seo seems unable to render meta tags that are fetched from Supabase. It appears that the meta tags are not being rendered because next-seo starts its rendering process before the useEffect hook has had a chance to fetch and set the title and description from Supabase. Does anyone have suggestions on how to resolve this issue?

import { NextSeo } from 'next-seo';
import { useRouter } from "next/router";
import React from "react";
import Link from '@/components/Link'
import { useState, useEffect } from "react";
import supabase from "@/lib/supabase";

function Info() { 
  const router = useRouter();
  const { id } = router.query;
  
 const [title, setTitle] = useState("");
  const [comment, setComment] = useState("");
 
  
 useEffect(() => {
    const fetchStores = async () => {
      const { data: testdata, error } = await supabase
        .from("dbase")
        .select()
        .eq("id", id)
        .single();

      if (error) {
        console.error("Error fetching store details:", error);
      }
      if (testdata) {
        
        setTitle(testdata.title);
        setComment(testdata.comment);        

      }
    };

    fetchStores();
  }, [id]);

  

  return (
    <>
      <div className="  prose ">
   
  

<NextSeo
      title={address}
      description={comment}
    />



export default Info;

[garmeeh]

Hey @iliamrv for SEO you need to server render the content.

Your current set up is fetching the data on the client via useEffect

You will need to use getServerSideProps

[LeandroGazoli]

Hi, good afternoon, the cause of you problem, comes from useEffect, when you use it in "use client" (render client), you send after render metadados to header of nextjs, to fix it, use "use server" function. Create new file for this, in your file, set "use server" on top and create a function for request, after create function set "use server"

example

async function getXYZ() {
'use server'

// ... rest code
}

and return the result.
in your application, you need a jsx file that renders in server side,
https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

in this file you configure the NextSeo

[iliamrv]

Thanks a lot, I will check!