0

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?

2
  • Extrae todo lo que necesites hacer en el server-component a otro componente y se lo pasas a tu client-component (el home) a través de los props, y ahí lo instancias tranquilamente. Hay una "brecha" que no puedes cruzar constantemente entre server-component y client-component, una vez que un componente es server-component, no tiene acceso a las cosas del cliente, porque no lo vas a renderizar en un cliente.
    – Benito-B
    Commented el 7 ago. 2023 a las 10:34
  • Como lo haría ? no tendría que usar los hooks para pedir los datos de firebase?
    – kilex
    Commented el 7 ago. 2023 a las 15:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.