标签: server-side-rendering

我使用 vuejs 构建了一个新闻网站，出于 SEO 和性能原因，我想使用 nuxt 使用 SSR（服务器端渲染），我可以找到许多编写新 nuxt 应用程序的资源，但没有找到有关将现有 vuejs 应用程序转换为 nuxt 的资源。有没有人尝试过这个或有关于如何做到这一点的建议？

我试图根据屏幕宽度 < 768p 来以不同方式渲染组件。

如果小于 768p，则加载汉堡菜单。如果没有，则加载整个菜单。

这是我使用的代码。问题是，当页面首次加载时，我无法观察到变化。但是当我将浏览器屏幕缩小然后将其增加到原始大小时；效果发生。

我认为这是因为 React 是在服务器端渲染的。但仍然不明白为什么它会通过将屏幕变小然后再变大来起作用。

import "twin.macro"
import { Global, css } from "@emotion/core"

import { useState, useEffect } from "react"

const Navbar = () => {
  const useWindowDimensions = () => {
    const hasWindow = typeof window !== "undefined"

    function getWindowDimensions() {
      const width = hasWindow ? window.innerWidth : null
      const height = hasWindow ? window.innerHeight : null
      return {
        width,
        height,
      }
    }

    const [windowDimensions, setWindowDimensions] = useState(
      getWindowDimensions()
    )

    useEffect(() => { …

我们在工作中的 Next.js 应用中使用 Firebase。我对两者都是新手，但尽了最大努力阅读两者。我的问题更多的是 Firebase，而不是 Next.js。这是上下文：

• 在客户端应用程序中，我对 API 进行了一些调用，并在标头中传递 JWT（ID 令牌）Authorization。API 调用admin.auth().verifyIdToken以检查 ID 令牌是否足够新鲜。这工作正常，因为我或多或少保证 ID 令牌会定期刷新（通过使用onIDTokenChanged（doc link）

• 现在我希望能够在服务器端渲染我的应用程序页面。为此，我将 ID 令牌存储在服务器可读的 cookie 中。但从现在开始，我不能保证下次用户通过整页加载来加载应用程序时 ID 令牌足够新鲜。

我找不到与onIDTokenChanged.

这篇博文提到了一个用于刷新令牌的google API 端点。我可以从服务器上访问它并给它一个刷新令牌，但感觉就像我完全走出了 Firebase 领域，我担心维护临时系统将成为一种负担。

所以我的问题是，人们通常如何协调 Firebase 身份验证与 SSR？我错过了什么吗？

谢谢你！

CookieConsent 和库版本？

- cookieconsent version: 3.1.1\n- ngx-cookieconsent version: 2.2.3\n- Angular CLI: 10.0.3\n- Angular SSR (universal)\n

我正在运行以下命令：

npm run build:ssr && npm run serve:ssr\n

在哪里：

"serve:ssr": "node dist/compy/server/main.js",\n\n"build:ssr": "ng build --prod && ng run compy:server:production",\n

失败给出的日志

Node Express server listening on http://localhost:4000\n\nERROR TypeError: Cannot read property 'initialise' of undefined\n    at NgcCookieConsentService.init (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3482889)\n    at new NgcCookieConsentService (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3482119)\n    at Object.NgcCookieConsentService_Factory [as factory] (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3484065)\n    at R3Injector.hydrate (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2802301)\n    at R3Injector.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2799033)\n    at NgModuleRef$1.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2977443)\n    at Object.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2946537)\n    at …

我对 nuxt 很陌生，我需要帮助。

async asyncData({ params, route }) {
    const { data } = await axios.get(
      `${process.env.baseUrl}/homes/?search=${
        params.search
      }&home_status=${1}`
    )
    return {
      homes: data.results,
    }
  }

我正在尝试用数据填充我的组件（使用 asyncData），但我希望我的骨架加载器显示我的页面是否正在加载。我该如何在 nuxt 中做到这一点？这是我的骨架加载器的代码；

 <template>
    <div class="placeholder-container">
      <div class="placeholder wave">
        <div class="square"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
</template>
<style scoped>
.placeholder-container {
  width: 35rem;
  margin: 15px auto 15px auto;
}

.placeholder {
  padding: 10px;
  width: 100%;
  // border: 1px solid lightgrey;
  display: flex;
  flex-direction: column;
}

.placeholder div {
  background: #e8e8e8; …

下面的代码返回ArgumentNullException: Value cannot be null. (Parameter 'source')错误。该错误是由 引发的Model.Players.Any()。看起来页面是在评估隐藏文件的代码之前呈现的。我相信该错误一定与异步调用 OnGetAsync 有关，但我不知道如何修复它。使用 Visual Studio 调试，我已经检查了 Players 属性的值并且计算正确（但是在 razor 页面渲染之后 - 并抛出错误）

文件背后的代码（摘录）：

    public IEnumerable<Player> Players { get; set; }
    public async void OnGetAsync()
    {
        IEnumerable<Club> clubs = await clubService.GetAllClubs();
        IEnumerable<User> users = _userManager.Users;

        Players = from user in users
                  join club in clubs on user.ClubId equals club.ClubId
                  orderby user.Name
                  select new Player
                  {
                      UserId = new Guid(user.Id),
                      Name = user.Name,
                      Surname = user.Surname,
                      DOB = user.DOB,
                      ClubId = …

我正在使用 Express 提供一个 create-react-app 服务build，并在提供服务之前附加一些脚本标签index.html。由于我index.html在服务之前操作文件，因此我不希望我的express.static中间件处理/or 的请求/index.html。以下是我为实现这项工作所做的努力：

app.use(
  [/^\/index\.html/, /^\//],
  express.static(path.join(__dirname, "../../build"))
);

app.get("/*", function (req, res) {
  // logic to manipulate index.html
  res.send($.html());
});

但这只会给我一个空白的白屏，即使原始的 html 代码被插入，所以我假设静态中间件仍在处理请求/，它只是停止服务其他静态资产。

如何配置此代码以便我的express.static 停止覆盖我的/*路线？

保留路由很重要，/*因为我希望它能够处理客户端应用程序中的反应路由器中定义的所有路由。因此，我无法将express.static中间件移动到/*路由下方，否则这将覆盖对静态资产的所有请求。

我想在页面加载之前将某些用户组重定向到另一个 URL（外部），即使用中间件。
由于我在 ssr 模式下使用 nuxt 并通过 重定向布局/默认中的用户window.location.replace()，因此您会看到“主站点”一秒钟。

useEffect当我使用而不是时，我得到了数据getStaticProps。但getStaticProps它表明钩子只能在功能组件中使用。

import Head from 'next/head'
import Image from 'next/image'
import Sidebar from '../components/Sidebar'
import styles from "../styles/Home.module.css"
import CssBaseline from '@mui/material/CssBaseline'
import Navbar from '../components/Navbar'
import Mainbody from '../components/Mainbodi'
import { useGetCryptosQuery } from '../services/CryptoApi'

export default function Homee({res}) {
   console.log(res);
   return (
      <div>
         <div className={styles.container}>
            <CssBaseline />
            <Sidebar/>
            <div className={styles.bodi}>
               <Navbar/>
               <Mainbody/>
            </div>
         </div>
       </div>
   )
}

export const getStaticProps = async() => {
   const {data, isFetching} = await useGetCryptosQuery()
   return {
      props: { …

我将 React SSR 从纯@emotion 切换到了material-ui 5.0，但样式将不再被提取。ID 提取createExtractCriticalToChunks工作正常，但来自情感的 cache.inserted 对象现在始终是一个空对象。我在这里做错了什么？

 "@emotion/babel-plugin": "^11.3.0",
 "@emotion/cache": "^11.6.0",
 "@emotion/core": "11.0.0",
 "@emotion/css": "^11.5.0",
 "@emotion/react": "^11.6.0",
 "@emotion/server": "^11.4.0",
 "@emotion/styled": "^11.6.0",
 "@mui/icons-material": "5.0.0",
 "@mui/lab": "5.0.0-alpha.47",
 "@mui/material": "5.0.0",
 "@mui/styles": "5.0.0",
 "@mui/utils": "5.0.0",
 "@mui/x-data-grid": "5.0.0-beta.1",

HTML：

 "@emotion/babel-plugin": "^11.3.0",
 "@emotion/cache": "^11.6.0",
 "@emotion/core": "11.0.0",
 "@emotion/css": "^11.5.0",
 "@emotion/react": "^11.6.0",
 "@emotion/server": "^11.4.0",
 "@emotion/styled": "^11.6.0",
 "@mui/icons-material": "5.0.0",
 "@mui/lab": "5.0.0-alpha.47",
 "@mui/material": "5.0.0",
 "@mui/styles": "5.0.0",
 "@mui/utils": "5.0.0",
 "@mui/x-data-grid": "5.0.0-beta.1",

提取的 ID：

<style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global 1vs7qi2">html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:#29343D;line-height:1.5;font-size:1rem;font-family:Inter,sans-serif;font-weight:400;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}</style><style data-emotion="css-global r7h3of">*{margin:0;padding:0;box-sizing:border-box;}html{width:100%;height:100%;-webkit-overflow-scrolling:touch;}body{width:100%;height:100%;}#root{width:100%;height:100%;}input[type=number]{-moz-appearance:textfield;}input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}input[type=number]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{opacity:1;color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::-webkit-input-placeholder{color:#919FAB;}textarea::-moz-placeholder{color:#919FAB;}textarea:-ms-input-placeholder{color:#919FAB;}textarea::placeholder{color:#919FAB;}img{display:block;max-width:100%;}.blur-up{-webkit-filter:blur(5px);-webkit-filter:blur(5px);filter:blur(5px);-webkit-transition:filter 400ms,-webkit-filter 400ms;transition:filter 400ms,-webkit-filter 400ms;}.blur-up.lazyloaded{-webkit-filter:blur(0);-webkit-filter:blur(0);filter:blur(0);}</style><style data-emotion="css …