标签: server-side-rendering

我正在尝试让 nuxt 生成本地化的动态路由。我使用 nuxt-i18n 来翻译每条路线。

这是我的 nuxt-i18n 配置：

['nuxt-i18n', {
  lazy: true,
  locales: [
    {
      name: 'French',
      code: 'fr',
      iso: 'fr-ch',
      file: 'fr.json'
    },
    {
      name: 'German',
      code: 'de',
      iso: 'de-ch',
      file: 'de.json'
    },
    {
      name: 'Italian',
      code: 'it',
      iso: 'it-ch',
      file: 'it.json'
    },
  ],
  langDir: 'lang/',
  defaultLocale: 'fr',
  parsePages: false,
  pages: {
    'advice/_uid': {
      fr: '/conseil/:uid',
      de: '/ratschlag/:uid',
      it: '/consiglio/:uid',
    },
  }
}]

正如文档中所写：

生成命令 (yarn generate) 会忽略动态路由。Nuxt 不知道这些路由是什么，因此无法生成它们。

所以我试图调整他们的例子并使用我的无头 CMS 的 Api 来重建所有路线，但不幸的是，由于某种原因，nuxt 没有生成它们。我尝试使用文件结构（即/advice/_uid.vue）而不是本地化路由，希望 …

我正在尝试让EditorJS在 NextJS 中工作。编辑器在没有插件的情况下加载良好，只有一个段落作为块选项。但是，当我尝试通过工具道具控制台添加插件时，会抛出以下警告：

editor.js?9336:2 Module Tools was skipped because of TypeError: Cannot read property 'prepare' of undefined

当我点击浏览器中的编辑器时，它抛出：

Uncaught TypeError: Cannot read property 'holder' of undefined

我已经在普通的 React 应用程序中测试了编辑器插件，它们加载得很好。这意味着问题出在 EditorJS 和 NextJS 导入和插件处理中。我曾尝试使用 require 在 componentDidMount 挂钩中导入编辑器和插件，但遇到了与 NextJS 动态导入相同的问题。尝试使用 React ref 获取组件，但发现当前NextJS 在获取组件的 refs 方面存在问题，尝试了建议的解决方法，但仍然没有结果。在触发 onChange 之前，编辑器的实例不可用，因此由于“准备”属性，插件无法连接到编辑器，或者在编辑器上的事件发生之前，整个编辑器都未定义，但编辑器输出到控制台它准备好了。

我的组件代码：

import React from "react";
import dynamic from "next/dynamic";

const EditorNoSSR = dynamic(() => import("react-editor-js"), { ssr: false });
const Embed = dynamic(() => import("@editorjs/embed"), { ssr: false }); …

我正在使用 Next.js 应用程序，并且创建了一个api 路由来发送电子邮件。

一切都在我的开发环境中工作。

但是，当我部署到生产环境时，我只收到一个404-The page could not be found错误作为对此 api 路由的响应。

我不是项目的创建者，我怀疑问题出在用于部署的 npm 命令中。

我刚刚在 'pages/api' 中创建了一个文件，并将其包含server.post('*', (req, res) => handle(req, res));在 server.js 文件中。我还需要做什么吗？

我正在使用 Vercel 进行部署。

这些是我在package.json文件中的脚本：

"scripts": {
    "dev": "node index.js",
    "build": "NODE_ENV=production next build",
    "start": "node index.js",
    "export": "next export",
    "now-build": "next build && next export -o dist"
}

在本地环境中，我正在使用npm start命令。

我在生产中的构建命令是 npm run now-build

这是index.js文件：

"scripts": {
    "dev": "node index.js", …

在这个如何将 Material UI 与 Next.js 结合使用的示例中，当组件在浏览器中安装时，他们删除了服务器端注入的 CSS。这样做有什么好处？

我已经使用 nextjs构建了一个应用程序并将其部署在服务器上，我观察到初始页面加载需要 4 秒才能加载，所有后续页面加载需要几毫秒才能加载，如果接下来生成静态 html 页面并提供它，那么为什么会这样花这么长时间，如果我错了，请纠正我，

网络进程截图

https://public-sapient.vercel.app/

Next.js 中是否有任何全局位置来获取我可以传递给我的 Layout 组件的菜单项（服务器端）。

因为，我不能这样做，index.js好像有人直接打开了不同的路由，例如：/about那么数据将不会被获取。

我尝试_app通过实现它的静态getInitialProps方法来做到这一点，但我不确定这是否是一个好的做法，而且它会在没有静态生成的页面中禁用自动静态优化。

有什么建议吗？

我想创建一个 Nuxt.js 中间件来检查用户是否经过身份验证。在应用程序内部导航时效果很好。但是当我刷新页面时，我总是得到：

[错误] 43:48.846 foo - 服务器 { 15:43:48  
  错误：“未通过身份验证”
}
 错误 [错误] 43:48.844 AuthError - 15:43:48  
        错误：Amplify 配置不正确。
        配置对象缺少必需的身份验证属性。
        通过“amplify add auth”添加身份验证后，您是否运行了“amplify push”？
        有关更多信息，请参阅 https://aws-amplify.github.io/docs/js/authentication#amplify-project-setup

1. AWS Amplify 在此处有一篇关于 SSR 支持的文章：AWS Amplify 的 SSR 支持 在 那里您可以找到启用 SSR 和检查用户身份验证的代码

2. 在 Nuxt.js 文档中，您可以找到：

在通用模式下，中间件将在服务器端（对 Nuxt 应用程序的第一个请求，例如直接访问应用程序或刷新页面时）和客户端导航到进一步路由时调用一次。

好的，所以我在我的 amplify 插件中启用了 SSR 并调整了中间件：

if (process.server) {
const { Auth } = withSSRContext(context.req)
try {
  await Auth.currentAuthenticatedUser()
} catch (error) {
  return context.redirect(302, '/auth/signin')
}

}

当我刷新页面时，代码会被执行，但我总是收到“未验证”错误和“Amplify 未正确配置”。另一方面，在客户端（登录、注册等）一切正常

有什么想法吗？我找不到解决办法...

亲切的问候

我正在尝试将 SSR 添加到使用 ionic 5 制作的具有 angular 的 Web 应用程序中，但没有运气...

我已经安装了 @nguniversal/express-engine 和 @ionic/angular-server 并且所有服务器文件都被创建，即使命令npm run dev:ssr编译成功。

当我在浏览器中导航到 localhost:4200 时，问题就出现了，首先我遇到了“window”错误，后来是“localStorage”，然后是“self”等等，所以我一直在修复错误，直到这个错误出现了：

TypeError: Cannot redefine property: constructor
at Function.defineProperty (<anonymous>)
at /home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:37:96
at xa (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:37:199)
at Window.<anonymous> (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:47:501)
at Object.QdDj (/home/josecash/www/emae-app/dist/app/server/vendors~polyfills-dom.js:48:4)
at __webpack_require__ (/home/josecash/www/emae-app/dist/app/server/main.js:26:30)
at __webpack_require__.t (/home/josecash/www/emae-app/dist/app/server/main.js:83:33)
at ZoneDelegate.crGB.ZoneDelegate.invoke (/home/josecash/www/emae-app/dist/app/server/main.js:82926:30)
at Object.onInvoke (/home/josecash/www/emae-app/dist/app/server/main.js:116929:33)
at ZoneDelegate.crGB.ZoneDelegate.invoke (/home/josecash/www/emae-app/dist/app/server/main.js:82925:36)

我只是不知道发生了什么。

我的 server.ts 看起来像这样：

import 'zone.js/dist/zone-node';
import {enableProdMode} from '@angular/core';
import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {join} from 'path'; …

所以这是一个比较新的话题，最近发布了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 组件更受欢迎？

所以我在 Next.js 应用程序中创建身份验证逻辑。我创建了/api/auth/login处理请求的页面，如果用户的数据良好，我将httpOnly使用 JWT 令牌创建一个cookie 并将一些数据返回到前端。这部分工作正常，但我需要某种方法来保护某些页面，以便只有登录的用户才能访问它们，而我在为此创建 HOC 时遇到了问题。

我看到的最好的方法是使用，getInitialProps但在 Next.js 网站上它说我不应该再使用它，所以我想使用getServerSideProps但那也不起作用，或者我可能做错了什么。

这是我的 HOC 代码：（cookie 存储在“userToken”名称下）

import React from 'react';
const jwt = require('jsonwebtoken');

const RequireAuthentication = (WrappedComponent) => {

  return WrappedComponent;
};


export async function getServerSideProps({req,res}) {
  const token = req.cookies.userToken || null;

// no token so i take user  to login page
  if (!token) {
      res.statusCode = 302;
      res.setHeader('Location', '/admin/login')
      return {props: {}}
  } else {
    // we have token so …