小编iva*_*ias的帖子

试图熟悉nextJS 13。我遇到的是getServerSideProps函数没有预渲染页面道具。这是我第一次尝试，所以我不知道我是否做错了。

这是编写的代码/app/login/page.js

import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

function Login({ message }) {
    return (
        <Content>
            <div className="ml-2 my-2">
                {message || "NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

export default Login;

export async function getServerSideProps() {
    console.log("running getServerSideProps function..");
    return {
        props: { message: "NextJS is awesome!" },
    };
}

我在这里想要实现的关键是在显示登录页面之前使用 axios 请求检查服务器的会话密钥。如果用户已登录，则应将用户重定向到主页。如果我能够使这个函数工作，这是未来的代码：

export async function getServerSideProps() {
    console.log("Im running getServerSideProps funct ");
    let isLoggedIn …

我正在构建一个简单的 Next13 彩票应用程序，以了解有关新 App Router 的更多信息。我想根据动态变化的状态获取服务器组件上的数据，但我不知道如何实现这一点。

LottosPage是一个服务器组件，显示交互式LottoCard客户端组件的网格。在新的 Next13 服务器组件之后，它被实现为一个异步函数，用于获取服务器上的数据：

应用程序/lottos/page.tsx：

export default async function LottosPage() {
  const games: Game[] = await getGames(chainId);

  // process and map games to LottoCards 
}

当用户与LottoCards 交互（例如购买门票）时，我刷新路线（使用 router.refresh()），提示 sLottosPage重新获取数据，从而更新所显示的游戏。问题是我希望它根据所选的 chainId 获取不同的数据。chainId 是在文件的下拉列表中动态选择的layout.tsx，我使用上下文提供程序将其传递到组件树中，这使所有子组件可以使用 useContext() 挂钩访问其动态值。问题是我无法在服务器组件中使用反应挂钩。所以我不知道如何访问LottosPage.

因此，总而言之，我希望它做的是根据所选的 chainId 获取不同的数据（如上面的代码片段所示）。我希望LottosPage在选定的 chainId 更改时重新获取新数据。LottosPage有没有办法在保留服务器组件的同时完成此任务？我的直觉告诉我这是可能的，因为实际组件本身没有动态或交互元素。它只需要在服务器上完全重新渲染。这是我的第一个 Next 应用程序，我对网络开发还很陌生，所以我愿意接受任何建议，我可能会以错误的方式思考这个问题。