Estoy realizando una app de comentarios con NextJs 13.4 (/src/app) + Firebase y quiero convertir el componente Home, donde se muestran todos los comentarios, como un server component, tengo que usar el useEffect para hacer la llamada hacia firebase y, por lo tanto, tengo que agregarle "use client" al inicio del archivo.
La cuestion es que al hacer esto no puedo exportar metadata (https://nextjs.org/docs/app/building-your-application/optimizing/metadata), ya que es obligatorio que sea un server component.
Mi componente Home esta definido asi:
"use client";
import { useState, useEffect } from "react";
import Comment from "./components/Comment";
import AddComment from "./components/AddComment";
import { Comment as CommentType } from "./types";
import { db, auth } from "@/utils/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { collection, onSnapshot, orderBy, query } from "firebase/firestore";
import GoogleLogin from "./components/GoogleLogin";
import RootLayout from "./layout";
import Header from "@/Header";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'
export default function Home() {
const [user, loading] = useAuthState(auth);
const [myComments, setMyComments] = useState<CommentType[]>([]);
// Get comments from firestore
const getCommentsFromFirestore = async () => {
const collectionRef = collection(db, "comments");
const q = query(collectionRef, orderBy("createdAt", "desc"));
const unsubscribe = onSnapshot(q, (querySnapshot) => {
const comments = querySnapshot.docs.map((doc) => {
return {
id: doc.id,
...doc.data(),
} as CommentType;
});
setMyComments(comments);
});
return unsubscribe;
};
useEffect(() => {
getCommentsFromFirestore();
}, []);
return (
<RootLayout>
<ToastContainer limit={1}/>
<Header />
<main className="py-6 flex min-h-screen flex-col items-center">
<h1 className="sr-only">Interactive Comments</h1>
<div className="comments flex flex-col gap-6 w-[22rem] md:w-[36rem] mx-auto mb-8">
{myComments.map((comment: CommentType) => {
return <Comment key={comment.id} {...comment} />;
})}
</div>
{user ? (
<AddComment
/>
) : (
<GoogleLogin />
)}
</main>
</RootLayout>
);
}
Si no le coloco "use client" me tira error porque los useEffect y useState solo se pueden usar en el lado del cliente.
Intenté colocar la metadata en el archivo layout.tsx, pero me sale igualmente el error de que no se pueden usar los hooks en client components:
6 | export const metadata = {
: ^^^^^^^^
7 | title: 'Interactive Comments',
8 | description: 'A demo of interactive comments with Firebase and Next.js',
9 | }
Intenté substraer la lógica de la lista de comentarios en un solo componente e importarlo en Home, pero igual me sale el error de arriba. ¿Cómo podría solucionarlo?