next.js 下一页13页非动态

8wigbo56  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(90)

你好,这里是我的一个页面在未来13在应用程序目录中:

import { cookies } from "next/headers";
import Link from "next/link";
import styles from "@/styles/chatPage/ChatPage.module.css";
import ChatClient from "@/components/chatPage/ChatClient";
import Profile_Service from "@/services/Profile.service";
import { Refresher } from "@/components/refresher/Refresher";

export default async function ChatPage() {
    let     token: string | undefined;
    let     myself: User;

    try {
        token = cookies().get("crunchy-token")?.value;
        if (!token)
            throw new Error("No token value");

        const profilService = new Profile_Service(token);
        myself = await profilService.getProfileAndAvatar();

    } catch (err) {
        console.log(err);
        return (
            <div className={styles.error}>
                <h2>Oops... Something went wrong!</h2>
                <Link href={"/home"} className={styles.errorLink}>
                    <p>Return to Home Page!</p>
                </Link>
            </div>
        )
    }

    return (
        <>
            <Refresher />
            <ChatClient token={token} myself={myself}/>
        </>
    )
}

字符串
我的问题是,这个服务器组件只在我第一次访问该页面时被调用,我不得不添加这个Refresher组件,以便每次访问该页面时调用try catch函数:

// Sample Refresher Component
// to be imported into SSR page
// needing a refresh after 
// next.js appDir Link nav
//

'use client'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'

export function Refresher() {
    const router = useRouter()

    useEffect(() => {
        router.refresh()
    }, [router])

    return <></>
}


我不知道该怎么办,是不是可以告诉next每次我去这个页面调用这个函数?在下一个文档中,对cookie()函数的调用应该告诉next这个页面是dynamyc,但即使这样,它也只被调用一次。这里的问题是我在这里获取客户端数据,但是如果我在返回到这个页面时更改了一些数据,它就不会再次获取它。我尝试了“export dynamic ='force-dynamic”、revalidate=0、fetch=no-store a、以及我在文档中可以找到的所有方法,但我找不到任何有效的解决方案。目前,我发现这个刷新组件解决方案在一个论坛上,人们有同样的问题,我,但它不是一个很好的解决方案,我想不使用它,如果我可以.有人能帮帮我吗??
我在下一个文档中尝试了所有的常量导出,但它是一样的,除了我的middelxare它的exactly相同,它被称为juste我第一次去一个页面,但不是再次当我回到它...
第一个编辑:我想我只是不明白服务器组件应该如何工作…我再次尝试了一个小测试,用两个页面“/welcome”和“/login”。我的最终目的将是访问cookie,当我去这个页面,使服务器端被触发,每次我去的页面。这是我的欢迎页面:

import ServerComponent from "@/components/ServerComponent";
import Link from "next/link";
import { Suspense } from "react";

// export const dynamic = 'auto'
// export const revalidate = 0

export default async function Welcome() {

  console.log("laaaaa welcome");

  return (
    <main>
      <p>Crunchy Pong !</p>
      <Suspense fallback={<>Loading...</>}>
        <ServerComponent/>
      </Suspense>
      <Link href="/welcome/login">Login</Link>
    </main>
  );
}


这里是我的登录页面:

import ServerComponent from "@/components/ServerComponent";
import Link from "next/link";
import { Suspense } from "react";

// export const dynamic = 'auto'
// export const revalidate = 0

export default function SignUpPage() {

  console.log("laaaa login");
  
  return (
    <>
      <p>Login Pong !</p>
      <Suspense fallback={<>Loading...</>}>
        <ServerComponent/>
      </Suspense>
      <Link href="/welcome">Welcome</Link>
    </>
  );
}


这只是一个什么都不做的小例子,它们都使用这个服务器组件:

export default async function ServerComponent() {
    let data: any = 'nothing';
    try {
        const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    
        data = await res.json();
        console.log(data);
    }
    catch (error) {
    
    }
    return (
        <>
        {data.title}
        </>
    )
}


所以如果没有“export const revalidate = 0”,我可以看到:在2 ms内获得https://jsonplaceholder.typicode.com/todos/1 200(缓存:HIT),并且使用hit我可以看到该高速缓存是MISS ;但是我不明白为什么页面中的console.log和这个服务器组件在我第一次访问页面时就被执行了。所有的服务器组件都是一样的吗?不是每次我们进入页面都会触发吗?我期待它,因为我想使用一些httpOnly cookie,我想它会检查cookie每次我会去一个页面...谢谢你的帮助!

2ic8powd

2ic8powd1#

我不建议这种方法用于服务器组件,最后我将展示我将如何做,但回答你的问题...
在声明ChatPage之前,您可以添加:

export const dynamic = 'force-dynamic'

字符串
另一种方法是像这样设置重新验证

export const dynamic = 'auto'
export const revalidate = 0


这将使重新验证每次都发生。
您可以阅读更多关于Route Segment Config的内容,看看是否有其他案例适合您的需求。
现在我建议你从页面中的RSC方法转移到服务器端页面+ RSC组件中,如下所示:

// page.tsx
export const dynamic = 'auto'
export const revalidate = 0

export default function ChatPage() {
    return (
        <>
          <Suspense fallback={<>Loading...</>}>
            <ServerChatComponent />
          </Suspense>
        </>
    )
}
// ServerChatComponent.tsx
export default async function ServerChatComponent() {
    token = cookies().get("crunchy-token")?.value;
    if(!token) return <ErrorComponent />
    
    const profilService = new Profile_Service(token);
    myself = await profilService.getProfileAndAvatar();

    return (
        <>
           <ChatClient token={token} myself={myself}/>
        </>
    )
}

的字符串

相关问题