标签: react-server-components

所以这是一个比较新的话题，最近发布了React Server Components，对比SSR/Next.js，它对SEO有什么影响？

由于组件在请求时在服务器中动态呈现，因此它不像Next.js那样像SSR那样静态，如果我使用它，搜索引擎会无法索引这些组件吗？

可以在此处找到演示

我们可以看到，在api.server.js，

async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, '../build/react-client-manifest.json'),
    'utf8'
  );
  const moduleMap = JSON.parse(manifest);
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));
  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

我知道这可以帮助减少客户端设备的工作量，因为组件在服务器上呈现并发送到客户端，并且组件可以使用存储在服务器中的秘密来呈现，因为我们可以将其作为道具传递而不是我们将秘密发送给客户。

但如果 SEO 很重要，SSR 是否比 React Server 组件更受欢迎？

我正在开发一个新项目，最近在我的前端应用程序中使用了 nextjs13。

当函数generateStaticParams与next/header库函数headers()一起使用时，

我在开发模式下遇到错误。

\n

未处理的运行时错误 - 动态服务器使用：标头

\n

开发模式期间发生错误的屏幕截图

但是当前端使用下一个构建/下一个启动时，不会出现错误。

我使用 next/header 库的主要原因是为了获得对 cookie 的访问权限。

generateStaticParams在app/detail/[questionId]/page.tsx文件中\next/headers 在app/layout.tsx文件中

应用程序/page.tsx

import React from "react";\nimport QuestionCard from "../components/Card/QuestionCard";\nimport Carousel from "../components/Carousel/Carousel";\nimport HomeNavBar from "../components/HomeNavBar/HomeNavBar";\nimport { ICarousel } from "../types/carousel";\nimport TabNavigator from "../components/TabNavigator/TabNavigator";\n\nconst getGoogleSession = async () => {};\n\nconst getQuestionList = async () => {\n  const response = await fetch(`https://pioneroroom.com/questionlist`);\n  const data = await response.json();\n  return data;\n};\n\nconst page = …

根据 NextJS 13 文档，编写异步组件是在服务器上预取某些数据的新方法 - 所有 、getStaticProps、getInitialProps和getServerSideProps都应该替换为异步组件。

我的问题是，我遇到了一种情况，我需要访问path才能预取一些数据（我正在从服务器加载页面的元数据）。以前，我使用NextApiRequest作为参数传递给getServerSideProps函数的对象来检索有关路径的信息。但是，我不确定如何在异步组件中访问此信息。

我尝试使用“useRouter”挂钩来检索信息path，但是服务器组件上不允许使用挂钩。

我正在使用 Next.js 并测试他们的新数据获取方式，但这也可能是一个常见的 React 18+ 问题，因为库本身正在转向客户端和服务器组件之间的区别。

假设我有这样的设置：

// page.tsx (server component)
export default function Home() {
  return (
    <>
      <Search /> {/* Search is a client component that tracks state for an input */}
      <ServerData /> {/* ServerData is a server component that gets the initial data */}
    </>
  )
}

由于Search跟踪input状态，我如何使用该值并对 进行客户端过滤器ServerData？

我尝试过的： Search可以是接受孩子道具的客户端组件。page.tsx可以重构，以便SearchData作为子项传递给 Search 并ServerData可以接受输入 prop。这可能行不通，因为我无法传递input到ServerDataasSearch只能将其理解为children …

我正在尝试在 Next.js 13.4.1 中的服务器操作函数内设置 cookie。 示例代码

import { cookies } from 'next/headers';
 
async function create(data) {
  'use server';
  cookies().set('name', 'lee');
  // or
  cookies().set('name', 'lee', { secure: true });
  // or
  cookies().set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  });
}

但我收到消息错误： Property 'set' does not exist on type 'ReadonlyRequestCookies'

我错过了什么吗？

在 Next 13 中，使用 React Server 组件，我们可以直接在组件中获取数据。但是当客户端组件中的状态发生变化时如何重新获取该数据。

例如上面的树结构。假设我们在导航栏（服务器组件）中有一些数据。如果我们想在搜索组件（客户端）中的状态发生变化时再次获取该数据该怎么办？

我们可以提升状态或使用上下文。但是我们如何实现类似 useEffect 的功能呢？就像搜索组件中的状态更改使服务器组件重新渲染并使用新参数再次获取该数据一样。

PS：我正在尝试学习服务器组件。并且很难理解新的 React 模型和架构。

我正在尝试使用 Next.js v14 进行页面转换，但没有成功。

没有显示错误，动画只是不起作用。我猜这是因为它layout.tsx是在服务器上呈现的。但我该如何解决呢？

我的layout.tsx代码（根级别）：

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Sidebar from "@/components/Sidebar";
import Breadcrumbs from "@/components/Breadcrumbs";
import Topbar from "@/components/Topbar";
import PageTransitionEffect from "@/components/PageTransitionEffect";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en"> …

我正在尝试 Next.js 13 应用程序目录和 React 18 的服务器组件。
按照文档，我async fetch()在服务器组件中放置了一个调用，并将该组件标记为异步。

但是当我将它作为客户端组件的子组件时，它会失败并出现错误

对象作为 React 子对象无效（发现：[object Promise]）

如果我将它作为另一个服务器组件的子组件，它就会按预期工作。

为什么？

代码在这里：

### page.tsx
import { ClientComp } from './ClientComp'

export default function Page() {
  return <ClientComp />
}

### ClientComp.tsx
"use client";
import { ServerComp } from "./ServerComp";

export function ClientComp() {
  {/* @ts-expect-error Async Server Component */}
  return <ServerComp />
}

### ServerComp.tsx
export async function ServerComp() {
  return <h2>ServerComp</h2>
}

React 服务器组件让我们在文件顶部使用“use client”指令。这基本上破坏了 React 组件库（如 ReactBootstrap 和 PrimeReact），并使我们创建包装文件只是为了在该库导出的每个模块中添加“使用客户端”。但是我们是否可以使用一些 Webpack 功能在此类库中添加这个“使用客户端”？

我有一个服务器组件ChatList，它从数据库中获取数据并显示它：

// server component

import Link from "next/link";
import db from "@/prisma";

export const ChatList = async () => {
  const chats = await db.chat.findMany();

  return (
    <ul>
      {chats.map((chat) => (
        <li key={chat.id}>
          <Link href={`chat/${chat.id}`}>{chat.name}</Link>
        </li>
      ))}
    </ul>
  );
};

然后我有一个服务器操作，它在同一个表中创建新记录：

"use server";

import db from "@/prisma";

export const createChat = async (name: string) => {
  const newChat = await db.chat.create({
    data: { name },
  });
  return newChat;
};

action此操作作为 form prop被调用。

创建新记录后，如何告诉服务器组件ChatList …

我是 Next.js 的新手。我刚刚完成本教程并有一个关于 API 的问题。

文档中的此页面似乎建议应在将使用 API 路由的每个页面的子文件夹/路由中定义 API 路由。

例如，假设我有一个页面/app/dashboard/page.tsx，我想调用第 3 方 API。我可以创建/app/dashboard/api/route.ts并定义一个 GET 请求：

export async function GET() {
  const res = await fetch('https://random-api.com/...')
  const data = await res.json()
 
  return Response.json({ data })
}

我不明白为什么这个逻辑会嵌套在路线内部而不是项目的顶层。有了上面的逻辑，你是不是必须在每个要使用它的页面中重新定义逻辑？

我很可能误解了该文档，如果有人可以帮助澄清，我将不胜感激。

定义 API 逻辑的最佳项目结构是什么，以便我可以在服务器组件内部全局使用该逻辑？另外，是否也可以在客户端组件中使用相同的 API 函数？

我正在构建一个简单的 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 应用程序，我对网络开发还很陌生，所以我愿意接受任何建议，我可能会以错误的方式思考这个问题。

我有一个名为的客户端组件Tab：

import * as React from "react";
import type { IconType } from "react-icons";

type TabProps = {
  Icon: IconType;
  label: string;
  isActive?: boolean;
};


export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon size={20} />
      {label}
    </div>
  );
}

每当我尝试使用此组件时，都会收到此错误： Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"。

好的。我尝试将通过的组件包装Icon在一个使用的函数中"use server"，但下一步要求我启用一些实验标志来使用该指令。

有什么方法可以实现我想要的而不经历这一切吗？我知道这在old反应中是可能的。我是否需要在使用图标之前将其声明为客户端组件，或者是否有更好的解决方案？