标签: server-side-rendering

任何人都可以帮助我服务器端渲染（SSR），如果我从 webpack 中删除样式加载器，就会出现 CSS 代码问题。

webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93 var style = document.createElement('style'); ^

ReferenceError：文档未在 addStyle (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:93:15) 处定义/dist/runtime/injectStylesIntoStyleTag.js?:208:13) 在 moduleToDom (webpack:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:81:18) 在 module.exports (webpack: ///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?:239:25) 在 eval (webpack:///./src/App.css?:15:14) 在 Object../ src/App.css (C:\reactjs\ssr-demo\server-build\index.js:1:20922) 在 (C:\reactjs\ssr-demo\server-build\index.js:1:172 ）在 eval (webpack:///./src/App.js?:4:66) 在 Module../src/App.js (C:\reactjs\ssr-demo\server-build\index.js: 1:21877) 在 (C:\reactjs\ssr-demo\server-build\index.js:1:172)

我正在material-ui与SSR一起使用。我已经根据文档上的说明material-ui在我的应用程序上设置了 SSR 机制。它确实有效，但并非没有渲染问题，迄今为止很难调试。更多详细信息如下。

SSR + 加载状态（这会导致相关组件无法在其中一个 SSR 渲染通道中渲染，更多内容见下文）导致在第二个 SSR 渲染通道上渲染的特定组件的 className 中 ID 不一致，但不会在第二个 SSR 渲染通道上渲染首先（因为它的渲染以数据可用为条件）。

这会导致从服务器发送的标记对该组件具有不同的 CSS 类名称，从而导致水合作用时出现视觉不一致，如下所示：

SSRed 成分：

水合成分：

DOM 中实际可用的类是：

.PrivateSwitchBase-input-393 {
  top: 0;
  left: 0;
  width: 100%;
  cursor: inherit;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
}

但由于 CSS 类名不匹配，一个不存在的类PrivateSwitchBase-input-411被应用于 CheckBox input，并且它没有像应该的那样变得不可见，导致客户端水合时出现视觉故障。

我从 React 收到以下警告：

警告：道具className不匹配。服务器：“PrivateSwitchBase-input-411”客户端：“PrivateSwitchBase-input-393”。

我希望className服务器和客户端中的匹配和组件渲染是相同的。

重现步骤

我有一个TodoItem组件：

import React from 'react';
import { …

我的团队正在寻求构建类似Medium克隆的东西。用户创建的帖子预计不会有太大变化，因此SSR/SSG似乎是一个不错的选择，特别是如果有一些增量构建功能可用。然而，帖子上的“赞成票”之类的事情可能会经常发生变化，因此我们不确定如何适应这种情况。

此外，应用程序的一部分超出了登录范围，例如仪表板或用于创建新帖子的编辑器等，不需要 SEO，因此我们正在考虑是否可以通过 CSR 来完成，而其他部分仍然是SSG或SSR。

这样的组合可以用Angular Universal来完成吗？到目前为止，我们一直在制作 CSR Angular SPA，所以如果问题有点愚蠢，我们深表歉意:(

中进行的 API 调用getStaticProps似乎会导致错误 500。

这是我的组件的代码：

import React from "react";
import API from "services/api";

const ArtistListPage = (props) => {
    return (
        <>
            {props.artists.map((artist) => (
                <div key={artist.id}>{artist.first_name}</div>
            ))}
        </>
    );
};

export async function getStaticProps() {
    // Get external data from the file system, API, DB, etc.
    const res = await API.get("/get_artists");
    const artists = await res.data.json();
    return {
        props: { artists },
    };
}

export default ArtistListPage;

我想提一下，在 a 中进行相同的 API 调用useEffect，以及将硬编码对象传递到propsin 中 …

我现在才意识到这里的nextjs 环境变量的行为，这与通常设置 NodeJS 应用程序的方式不同：

注意：.env 文件应包含在您的存储库中，而 .env*.local 应包含在 .gitignore 中，因为这些文件将被忽略。将 .local 文件视为保存机密的好地方，将非本地文件视为保存默认值的好地方。

因此，我正在考虑限制自己使用仅在构建时可用的秘密，以便在“后端”/api路由中使用。

但是/api路由的行为是否像真正的后端一样？由于 nextjs仅在必须时才是 SSR （？），我认为此 /api 代码也可能最终出现在浏览器中，从而暴露秘密？有没有办法强制代码仅在服务器端运行而不在浏览器中运行？我对 SSR 概念很陌生。我的“真正的”后端暂时不会启动。这不是一个非常重要的秘密，但仍然如此。谢谢。

我还没有完全理解 React 的Server Side Rendering. 两个例子之间发生了什么不同的行为？

第一的

function Test() {
  const context = useContext(AuthContext)
  const { user } = context

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 发生错误文本内容不匹配。服务器：“无用户”客户端：“用户”

第二

function Test() {
  const context = useContext(AuthContext)
  const [ user, setUser ] = useState(null)

  useEffect(() => {
     setUser(context.user)
  }, [])

  return (
    user ? <h1>User</h1> : <h1>No User</h1>
  )
}

export default withApollo({ ssr: true })(Test)

===> 没有错误。 …

我正在尝试使用 React for Nextjs 9.4 创建一个简单的 UI 库，这就是我正在做的

// input.js in React UI Lib

import React from "react";
import styled from "./input.module.scss";

const Input = React.forwardRef((props, ref) => (
  <>
    {props.label && <label className={styled.label}>{props.label}</label>}
    <input className={styled.input} {...props} ref={ref} />
  </>
));

export default Input;

并为简单起见创建了导出所有模块的索引

// app.js the index file for the lib

import PrimaryButton from "./components/button/primaryButton";
import TextInput from "./components/input/input";
import PasswordInput from "./components/passwordInput/password";
import CheckBox from "./components/checkbox/checkbox";

export {
  PrimaryButton,
  TextInput,
  PasswordInput,
  CheckBox
};

这也是我为 SSR Next 构建的 …

我目前正在尝试按照Angular Universal 的官方 Angular 指南将服务器端渲染（SSR）添加到我的 Angular 应用程序中。我能够设置快速服务器，并且从服务器获得的响应包含我的应用程序，尽管看起来有点奇怪，好像缺少一些 CSS 导致FontAwesome图标渲染太大等。

但出于某种原因，客户端/浏览器永远不会接管（重新）渲染，并且网站保持与服务器响应相同。它不是交互式的并且完全静态。单击控件（链接除外）或交互元素时，没有任何反应。

在这里您可以看到部分App Shell / HTML。

这是网络流量。

package.json ：​

    {
      "name": "my-app",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "dev:ssr": "ng run my-app:serve-ssr",
        "serve:ssr": "node dist/my-app/server/main.js",
        "build:ssr": "ng build --prod && ng run my-app:server:production",
        "prerender": "ng run my-app:prerender"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "^1.1.0",
        "@angular/animations": "^10.0.14",
        "@angular/common": "^10.0.14",
        "@angular/compiler": …

我正在为我的网站使用 Next js，并在每个页面上添加 Head 部分以进行 SEO

这是我的所有博客页面的代码。我已经导入 withRouter 以便我可以在 Head 部分使用 router

 const head = () => {
    <Head>
      <title>Mental health blogs | {APP_NAME}</title>
      <meta
        name="description"
        content="Mental Health blogs and tutorials on how to live mental-illness free"
      />
      <link rel="canonical" href={`${DOMAIN}${router.pathname}`} />
      <meta
        property="og:title"
        content={`Latest mental health blogs | ${APP_NAME}`}
      />
      <meta
        property="og:description"
        content="Mental Health blogs and tutorials on how to live mental-illness free"
      />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={`${DOMAIN}${router.pathname}`} />
      <meta property="og:site_name" content={`${APP_NAME}`} />

      <meta property="og:image" content={`${APP_NAME}`} …

我在使用“react-dom/server”中的renderToString在 SSR 上渲染某些 URL 时遇到一些错误

TypeError: Cannot read property 'length' of undefined\nat areHookInputsEqual (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:992:38)\nat Object.useMemo (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:1230:13)\nat useMemo (C:\\projects\\spd-web-app1\\node_modules\\react\\cjs\\react.development.js:1521:21)\nat Provider (C:\\projects\\spd-web-app1\\node_modules\\react-redux\\lib\\components\\Provider.js:22:41)\nat finishHooks (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:1077:16)\nat processChild (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3046:14)\nat resolve (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:2962:5)\nat ReactDOMServerRenderer.render (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3437:22)\nat ReactDOMServerRenderer.read (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3375:29)\nat renderToString (C:\\projects\\spd-web-app1\\node_modules\\react-dom\\cjs\\react-dom-server.node.development.js:3990:27)\n

{\n  memoizedState: 0,\n  queue: { last: null, dispatch: [Function: bound dispatchAction] },\n  next: {\n    memoizedState: { current: [QueryData] },\n    queue: null,\n    next: { memoizedState: [Object], queue: null, next: [Object] }\n  }\n}\n