你好,这里是我的一个页面在未来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每次我会去一个页面...谢谢你的帮助!
1条答案
按热度按时间2ic8powd1#
我不建议这种方法用于服务器组件,最后我将展示我将如何做,但回答你的问题...
在声明ChatPage之前,您可以添加:
字符串
另一种方法是像这样设置重新验证
型
这将使重新验证每次都发生。
您可以阅读更多关于Route Segment Config的内容,看看是否有其他案例适合您的需求。
现在我建议你从页面中的RSC方法转移到服务器端页面+ RSC组件中,如下所示:
的字符串