标签: server-side-rendering

首先，我知道我不应该嵌套<p>标签。

所以我创建了一个 Next.js 应用程序，我有一个设置富文本 html 的组件，如下所示：

    <Typography
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

react 组件最终Typography只是一个p标签，所以可以简单地写成：

    <p
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

所以当浏览器加载页面时，我的内容没有显示出来，我留下了控制台警告：

Warning: Prop 'dangerouslySetInnerHTML' did not match. Server: "" Client: "<p>...</p>"

经过长时间的调试会话，在清理期间，使用<span>代替<p>是解决方案

    <span
      dangerouslySetInnerHTML={{
        __html: richText
      }}
    />

嵌套的 p 标签是一个错误，不管发生了什么使 Next.js 不呈现这个特定内容导致空字符串Server: ""？Next.js 只是对错误和警告非常敏感吗？

根据nextjs文档，如果我想将环境变量公开给浏览器，我可以NEXT_PUBLIC在.env.local文件中添加它们的前缀，如下所示：

NEXT_PUBLIC_VAR=7

但是，看起来我也可以使用 向浏览器公开我的环境变量next.config.js，如下所示：

NEXT_PUBLIC_VAR=7

这将添加到 javascript 包中

这两种策略有什么区别？

1. 我的网站 - https://sandbox.billionlearners.com => 它位于 Angular 12 SSR（在节点上运行）

2. 渲染页面所需的总时间为@6秒，但初始服务器端页面需要@4秒（其大小小于200Kb）

3. 命令行dig time https://sandbox.billionlearners.com花费的时间非常少 - @150ms

4. https://tools.pingdom.com/ => 即使最初我确实看到@115KB，然后立即更改为@5MB。

5. 我还检查了我的服务器箱统计信息（CPU/网络/RAM 等）- 根本不是问题。

6. 我的 CloudHosting 公司说 - 这是因为总规模，我不相信。SSR 本身的全部目的都落空了。我希望用户快速看到初始页面，然后它将加载大的最终页面。

我是否遗漏了 SSR 代码中的某些内容，或者 CloudHosting 端是否存在问题？

提前致谢

更新：Angular.json

...

            "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
          "./node_modules/bootstrap-social/bootstrap-social.css",
          "./node_modules/primeicons/primeicons.css",
          "./node_modules/primeng/resources/themes/nova/theme.css",
          "./node_modules/primeng/resources/primeng.min.css",
          "./node_modules/primeflex/primeflex.min.css",
          "./node_modules/prismjs/plugins/toolbar/prism-toolbar.css",
          "./node_modules/prismjs/themes/prism-coy.css",
          "./node_modules/ngx-sharebuttons/themes/modern/modern-light-theme.scss",
          "./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
          "./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "./node_modules/he/he.js"
        ],
...

索引.html

  <script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
      inlineMath: [['$#','#$'], ['\\(','\\)']],
      processEscapes: true
      }
});
  </script>
  <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML"></script>
  <!--for Google reCaptch …

只是想了解我为 SSR 页面指定的标题：public, s-maxage=3600, stale-while-revalidate=59。

请注意，我的stale-while-revalidate值是 59 秒，远小于s-maxage1 小时的值。我想知道当stale-while-revalidatevalue 小于 时s-maxage，到底会发生什么？标题是否被stale-while-revalidate忽略？

显然这个问题之前已经被问过，但答案对我没有帮助。

我的问题是服务器端渲染时间太长，从一个页面导航到另一个页面大约需要 2.5-4 秒，有时甚至需要 10 秒。我所做的只是使用 prisma 和一些简单的必要函数对数据库进行两次查询。

我知道图像是性能的一个重要因素，但尽管使用 CDN 并最大限度地优化图像，但这仍然不够。

我的问题是，如果 nextjs 无法处理我可怜的网站，它将如何处理真正的大型网站中的繁重请求和大量数据？

请记住，这是我使用 nextjs 的第一个应用程序，我确信我错过了一些东西。

这是该网站的链接，您可以四处浏览并亲自查看，我添加了一个进度条，希望能减轻痛苦，但旧的“平滑反应导航”仍然不存在。

https://elvito-property.netlify.app/

链接到存储库

https://github.com/VitoMedlej/elvito-property

当然，这是我使用 getServerSideProps 获取数据的完整代码

` const isCategoryValid = (categoryQuery : string) => { letcategories = ["公寓", "别墅", "商业", "土地", "小木屋"]

if (categories.includes(categoryQuery)) {
    return categoryQuery
}
return undefined

}`

const isPurposeValid = (purposeQuery : string) => { if (purposeQuery === 'for-sale' || purposeQuery === 'for-rent') { return purposeQuery } return undefined }

`const GetTotalCount = async(类型？：字符串，目的？：字符串) => { const prisma …

我正在研究一个简单的服务器端渲染（SSR）场景：只是一个登录页面，其中包含用户名和密码的文本输入。

与 SSR 一样，当客户端首次加载页面时，他们会获得服务器渲染的版本，该版本未经过水化。看起来不错，并且可以单击文本框并输入内容。

希望 JS 能够快速加载，并且在用户在框中输入任何内容之前就发生水合作用，并且一切正常。

但是，如果用户的网络速度很慢并且 JS 需要几秒钟才能加载怎么办？然后会发生以下情况：

1. 用户在框中输入一些字符
2. JS 突然加载，React 控制了输入框，并清除了它，因为初始状态是一个空字符串（！）
3. 用户感到困惑，必须重新输入。

一定有一个最佳实践，对吗？我尝试过一些事情，例如测试 iftypeof window === "undefined"并将输入设置为disabledif so，但没有什么是令人满意的。我认为最好的用户体验是让水合组件拾取已键入的字符，但我也可以禁用编辑，直到水合完成。

FWIW 我正在使用 Material UI，它会带来一些额外的样式问题，但除此之外，我认为这个问题适用于任何 SSR 文本输入场景。

我在渲染我的网站时遇到问题，过去它工作正常，但我必须重新安装节点和角度，它停止工作我使用的是 m1 macbook pro。

角度：14.2.7

节点：v16.18.0

\xe2\x9c\x96 预渲染到 /Users/anya/Documents/dev/practice-landing/dist/siem-new-landing/browser 的路由失败。\n方法 Promise.prototype.then 在不兼容的接收器 [object Object] 上调用

我有一个简单的app/components/organisms/Cookies.tsx模态窗口组件，我将其导入到app/page.tsx. 我已'use client'在组件顶部添加了指令，但由于某种原因，我不断收到：

ReferenceError：本地存储未定义

我的代码Cookies.tsx：

'use client';
import { useState } from 'react';

const Cookies = () => {
  const localStorageCookies = localStorage.getItem('cookies-accepted');
  const [cookiesAccepted, setCookiesStatus] = useState<boolean>(!!localStorageCookies);

  const acceptCookies = () => {
    localStorage.setItem('cookies-accepted', 'true');
    setCookiesStatus(true);
  }
  
  return (
    <>
      {!cookiesAccepted && (
        <section className="fixed max-w-md p-4 mx-auto bg-white border border-gray-200 left-12 bottom-16  rounded-2xl z-20">
          <h2 className="font-semibold text-gray-800 "> Cookie Notice</h2>

          <p className="mt-4 text-sm text-gray-600">
            We use cookies to ensure that …

我正在尝试将具有 Auth0 身份验证的 Next.js 应用程序移动到新的应用程序路由器。我了解服务器组件无法写入 cookie 的限制，但我收到一条令人困惑的消息。

我的理解是，如果我需要获取服务器组件上的用户信息，我需要使用'getSession'from 的函数'@auth0/nextjs-auth0'，该函数不适用于客户端组件。

但是，每次我调用它时，服务器控制台都会记录以下消息（未标记为错误或警告）："nextjs-auth0 is attempting to set cookies from a server component"。

我不想设置任何cookie，只是获取用户信息。谁能帮助我理解为什么这个调用使'getSession'组件设置cookie？另外，如果我并没有真正尝试设置 cookie，忽略此消息是否安全？

提前致谢。

添加代码：完整的解决方案有点复杂，但这段代码说明了我的问题。这是一个简单的 SSR 组件，它从服务器会话中获取用户名（按照 Auth0 的格式指定）：

import { getSession } from '@auth0/nextjs-auth0';

export default async function Profile() {
    const session = await getSession();

    return (
    <div>
        HELLO {session?.user?.name}
    </div>
    )
}

在上面的代码中，每次getSession调用服务器控制台都会发出消息"nextjs-auth0 is attempting to set cookies from a server component"。

我没有明确尝试设置cookie，只是获取用户的信息。我想了解为什么会发生这种情况以及忽略该消息会产生什么影响。

再次提前感谢您的帮助。

最近我将角度从 16 迁移到 17 并开始显示 localStorage 未定义错误。我看到了一些从 angular.json 禁用 ssr 的解决方案

从

"server": "src/main.server.ts",
"prerender": true,
"ssr": {
  "entry": "server.ts"
}

到

"server": "src/main.server.ts",
"prerender": false,
"ssr": false

它有效，但我想知道还有其他方法可以在不禁用 ssr 的情况下使用本地存储。