标签: server-side-rendering

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private …

   Run Code Online (Sandbox Code Playgroud)

Next JS 13 于上个月刚刚发布，完全改变了数据的获取方式，同时还通过使用根布局.js 提供了 _app.js 和 _document.js 的替代方案。以前在 Next JS 12 及更低版本中，要使用 Hydration 方法使用 React Query SSR 功能，您需要像这样设置 _app.js 文件：

import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import queryClientConfig from '../queryClientConfig';

export default function MyApp({ Component, pageProps }) {

  const queryClient = useRef(new QueryClient(queryClientConfig));
  const [mounted, setMounted] = useState(false);

  const getLayout = Component.getLayout || ((page) => page);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
      <QueryClientProvider client={queryClient.current}>
        <Hydrate state={pageProps.dehydratedState}>
          <AppProvider>
            {getLayout(<Component {...pageProps} …

使用 @loadable/server 中的 ChunkExtractor，我们可以在页面正文中包含链接，以在 SSR 期间预加载必要的块。

通过将这些脚本与 HTML 文档之后的主块同时加载，可以加快水合速度。

我怎样才能在没有 @loadable 的情况下使用 React 18 SSR + Lazy/Suspense 做同样的事情？

renderToPipeableStream 的onAllReady回调没有参数。

所以基本上我想在应用程序目录中的客户端组件上使用 getServerSideProps

"use client";
import React, { useLayoutEffect, useState } from "react";
import VoxelDog from "../src/components/loaders/voxel-dog";
import FirstSection from "../src/components/reusable/FirstSection";
import FeaturesSection from "../src/components/reusable/FeaturesSection";
import BannerMobile from "../src/components/mobile/BannerMobile";

// get server side props from the server

const page = (
  props: any // get the props from the server
) => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth as number);

  useLayoutEffect(() => {
    function updateSize() {
      setWindowWidth(window.innerWidth);
    }
    window.addEventListener("resize", updateSize);
    updateSize();
    return () => window.removeEventListener("resize", updateSize);
  }, [windowWidth]);

  console.log(props.data);

  return ( …

我正在构建一个应用程序作为一个业余爱好项目，并尝试学习服务器渲染的 React，但我偶然发现了一个看似容易修复的错误，但我不知道应该如何解决这个问题。使用混音 1.10。

当我的代码运行时，它是有缺陷的。服务器渲染一件事，客户端渲染另一件事，导致渲染的元素在页面加载时闪烁。它还会在控制台中抛出大量错误，例如：

未捕获的错误：补水时出现错误。由于错误发生在 Suspense 边界之外，因此整个根将切换到客户端渲染。

24x react-dom.development.js:12507 未捕获错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。

react_devtools_backend.js:4012 警告：文本内容不匹配。服务器：“2023 年 1 月 29 日，上午 10:44:09” 客户端：“2023 年 1 月 29 日，下午 12:44:09”

服务器采用 UTC 时区，但客户端可以是任何时区。在本例中，时间为 GMT+2。我应该怎么办？我想我可以将服务器时区设置为客户端时区，但我也认为这可能是一个糟糕的主意。

我能做的最好的简单例子就是这个。

// routes/example.tsx
import { useLoaderData } from "@remix-run/react"
import {json, LoaderArgs } from "@remix-run/server-runtime"

export async function loader({ request }: LoaderArgs) {
  const timestampFromDB = "2023-01-29T10:44:09.672Z"
  
  return json({ time: timestampFromDB })
}

export default function HydrationError() {
  const loaderData = useLoaderData<typeof loader>()
  const time = new Date(loaderData.time)
  const …

我正在 Nuxt 3 中使用 SSR 构建前端网站，后端使用 Laravel。在 Nuxt 3 项目中，我的utils目录中有一个 ApiBridge.js 文件，我用它来组织 API 调用、设置基本 URL 等。自从启动该项目以来，我一直在关闭服务器端渲染的情况下运行该文件。方便，但是当我尝试在 SSR 打开（在 nuxt.config.js 中打开）的情况下运行它时，我收到“Nuxt 实例不可用”错误。我一边忙于这个项目，一边在旅途中学习 Nuxt 3，所以我可能会错过一些明显的东西。

import axios from "axios";

const runtimeConfig = useRuntimeConfig()

const api = axios.create({
    baseURL: runtimeConfig?.API_BASE_URL,
    withCredentials: true,
});


const apiBridge = {
    login: (info) => api.post('/login', {
        ...info,
    }),

    register: (info) => api.post('/register', {
        ...info,
    })

    /* .... */
}

export default apiBridge;

为什么会发生这种情况？这是一个不好的方法吗？如何修复它？为什么在 SSR 关闭的情况下它还能工作？是因为汽车进口吗？提前致谢！

浏览了一下网络，但没有发现任何有用的东西。

编辑：nuxt.config.js 根据评论的要求

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: [ …

这个问题与几年前的问题非常相似。以下是导航到讨论的链接。

Github 讨论

我正在使用Next.js 13ant Ant Design V5design 组件，在首次加载时将具有 flash unstyled 组件。之后就恢复正常了，根据讨论，好像是SSR的问题。

除了使用讨论中的解决方案之外，还有什么完美的解决方案可以解决吗？

• 禁用 SSR，它可以工作，但似乎不是一个完美的解决方案。
• visibility: hidden直到useEffect设置mount state为true，不起作用，动画仍然存在。
• 禁用动画，动画不再存在，但它仍然从无样式组件转换为样式组件。

有没有办法使用 NextJS 13 和新的应用程序目录来获取请求对象（NextRequest）或至少是request URL服务器组件内部（页面和/或布局组件）？

我知道如何在客户端组件中执行此操作，但我想在服务器组件中获取它。

我正在开发一个项目，使用 Next.js 13 和服务器组件以及 Chakra UI 进行样式设置。我主要关心的是在使用应用程序/布局功能时保护敏感的服务器端代码逻辑不暴露给客户端。

Chakra UI 组件仅是客户端，我不确定它们在代码公开方面如何与服务器组件交互。具体来说，我想知道在布局文件中使用“use client”指令是否也可能会暴露其他文件中的代码逻辑。例如，如果我的索引文件具有确定呈现哪些 html 或哪些组件的逻辑（或导入带有逻辑的组件），那么该逻辑是否也会发送到客户端，或者客户端只是接收 html？

这是我的布局文件的示例：

"use client";

import { ChakraProvider } from "@chakra-ui/react";
import { CacheProvider } from "@chakra-ui/next-js";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <CacheProvider>
          <ChakraProvider>{children}</ChakraProvider>
        </CacheProvider>
      </body>
    </html>
  );
}

这是我第一次创建服务器和客户端应用程序，因此对这个主题的任何澄清将不胜感激。

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

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

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

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