标签: server-side-rendering

如何从服务器端的请求中获取当前域名？

我的基于 Nuxt 的网站可以从不同的域访问。我想从用户访问网站的地方获取域名。我怎样才能做到这一点？

我尝试为此目的编写一个中间件，但它总是显示 localhost:3000

export default function({ store, req }) {
  if (process.server) store.commit('hostname', req.headers.host)
}

知道如何解决这个问题吗？

我正在使用 Angular 构建一个 Web 应用程序。出于 SEO 目的，我实施了 SSR（Angular Universal）。

问题：当从服务器获取应用程序时，会播放各种动画。几秒钟后（当浏览器渲染完成并且浏览器接管时）再次播放相同的动画。

这看起来很糟糕。

有问题的动画是ScrollReveal和animate.css

问：如何防止浏览器渲染完成后动画再次播放？

我看到两者都用于 SSR。那么有什么区别呢？除了 isomorphic-fetch较旧且 gzipped package 稍大之外。

链接：

同构 Unfetch

同构获取

在 Google 上打开缓存版本的网页时，React 应用程序出现以下错误。

DOMException：无法在“History”上执行“replaceState”：无法在来源为“https://webcache.googleusercontent.com”和 URL 为“https”的文档中创建 URL 为“https://projecturl”的历史状态对象： //webcache.googleusercontent.com/search?q=cache:X4dz2ukZZAYJ:https://projecturl/+&cd=1&hl=en&ct=clnk&gl=in'

在我们的应用程序中，我们使用 react-router-dom 并实现了服务器端渲染。在谷歌搜索中打开带有缓存选项的页面时，它首先加载页面几秒钟，然后在控制台中显示带有上述错误的空白页面。

在寻找解决方案时，我发现https://github.com/ReactTraining/react-router/issues/5801 与我的问题相关，但没有解决方案。

更新1：

同样的问题在这里被问到，但对于 Angular。虽然我无法理解答案中的解释以及它如何与我的问题相关。

我们正在使用React Loadable SSR Add-on来渲染我们的React应用程序。

更新 2：

在用于服务器端渲染的 npm 包的 Git 存储库上打开了相同的问题。 问题已打开

更新 3：

当我通过禁用安全性在谷歌浏览器中打开它时，该页面工作正常。因此它不应该与我的代码相关。

此外，在 bing 搜索引擎缓存版本中打开时会出现不同的错误：

脚本资源位于重定向之后，这是不允许的。

在 bing 和 yahoo 搜索引擎上，404 页面都出现在缓存版本中。

更新 4：

这是路由文件的外观：

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Loadable from 'react-loadable';
import {
  OTPNew,
  LoginNewFb,
  OnboardingWrapper,
  PageNotFound,
  SignUpSpecialty,
  SignUpDetails,
  Feed,
} from './lazy'; …

我最近推出了一个使用服务器端渲染（使用 next.js）的网站。该站点具有登录功能，如果存在来自用户请求的身份验证 cookie，那么它将在服务器上为该用户呈现登录视图，并将呈现的登录视图返回给用户浏览器。如果用户没有身份验证 cookie，那么它会在服务器上呈现一个已注销的视图并将其返回给用户浏览器。

目前它工作得很好，但我在尝试通过 CDN 为网站提供服务时遇到了障碍。我的问题是 CDN 将缓存服务器响应以加快速度，因此第一个访问 CDN 上的网站的用户将缓存其登录视图并返回到浏览器。这反过来意味着，因为它被缓存，所以访问该站点的其他用户也会看到其他用户登录的视图，而不是他们自己的，因为这是 CDN 缓存的内容。不理想。

我正在努力思考解决这个问题的最佳方法是什么。想听听有关解决此问题的最佳实践方法的任何建议吗？

我想到的一种方法是可能总是在第一次访问页面时返回注销的视图请求，因此在客户端进行身份验证/登录，从那时起始终在服务器上进行身份验证。但是，如果 next.js 仅在第一个请求上进行服务器端渲染，并且让后续请求在客户端上进行所有渲染，则此方法仅适用，我不确定是否是这种情况。

谢谢，并会喜欢我能得到的所有帮助/建议！

更新

从到目前为止我从答案中收集到的信息看来，解决这个问题的最佳方法是在每个用户第一次访问该站点时为他们提供一个 CDN 缓存的注销视图。如果他们的 cookie 中存在身份验证令牌，我可以从前端手动登录他们。他们登陆的第一页之后的所有页面都必须返回登录的视图 - Next.js 是否可能？这是一个很好的方法吗？以下是这些步骤的摘要：

1. 用户登陆任何网页
2. 向服务器发出该页面以及用户 cookie 的请求。
3. 因为这是他们访问的第一个页面，所以 cookie 将被忽略，并且“注销”视图将返回给用户浏览器（已缓存在 CDN 中）
4. 然后前端加载一个登出的视图。加载后，它会检查身份验证令牌，如果存在，则调用 API 以登录它们
5. 之后的任何其他页面导航都作为“登录”视图从服务器返回（即这次不会忽略身份验证 cookie）。这避免了必须再次执行第 4 步，这会让用户在每个页面上都感到厌烦。

我有一个[slug].js页面可以获取 API 以获取目标页面

export async function getServerSideProps({ query, res }) {
    const slug = query.slug;
    try {
        const destination = await RoutingAPI.matchSlug(slug);
        res.writeHead(302, { Location: destination });
        res.end();
        // return {
        //     redirect: {
        //         permanent: true,
        //         destination,
        //     },
        // }
    } catch (error) {
        return {
            notFound: true
        }
    }
}

如果我客户端从另一个页面重定向到 slug 页面，它会起作用并使 URL 与 slug 保持相同，但它会使浏览器重新加载。如果我使用

return {
     redirect: {
        permanent: true,
        destination,
     },
}

它不会重新加载浏览器，但会将 URL 更改为目标，与 slug 不同。我该如何解决这个问题？我将不胜感激任何想法，谢谢

我正在使用react-router-dom并且我猜测这是导致问题的原因，但我不知道从哪里开始寻找或如何解决它。我也收到类似的错误Warning: Did not expect server HTML to contain a <nav> in <div>。

正如我所说，我不确定在哪里查看，所以如果您认为某些代码会有所帮助，请告诉我，我会发布它。否则，我可以发布用于执行 SSR 的代码。

编辑：确切错误：Warning: Prophrefdid not match. Server: "/profile/5a073dc44cb45b00125e5c82" Client: "profile/5a073dc44cb45b00125e5c82"

我已经检查了客户端，它/profile/:id不确定它在哪里说没有/，至于<nav>in的另一个错误，我的标题中<div>有一个nav，但我不确定如何“修复”那个.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-javascript';
import { Helmet } from 'react-helmet'; …

我正在使用 React 构建一个网站，最近切换到使用服务器端渲染 (SSR) 以提高性能。在此更改后我遇到的一个问题是，当我在页面上格式化时间时（我使用的是Moment.js），它使用服务器的时区错误地呈现。

如何使用客户端的时区格式化时间？我是否需要在服务器响应上留出时间，然后让客户端呈现？

我是服务器端渲染的新手，我想在服务器端渲染 React 组件并在 html 中传递它。

我在https://spring.io/guides/tutorials/react-and-spring-data-rest/上遵循了本教程。它仍在客户端呈现。

我renderToString在 thymeleaf 模板中找不到方法。

我该怎么做呢？

我已经使用 webpack 和 HMR 设置了 SSR 环境。有一个静态呈现的标记，该服务器传递给客户端和一个client.js带有ReactDOM.hydrate()方法的包。如果我更改我的源代码，HMR 工作正常，但在控制台中发出警告，说客户端代码和静态标记之间存在不匹配。

我正在使用带有webpack-dev-middleware和的快速服务器webpack-hot-middleware

我的 webpack 配置如下所示：

module.exports = {
  mode: 'development',
  entry: ['webpack-hot-middleware/client', './src/client.js'],
  devServer: {
    hot: true,
    publicPath: '/'
  },
  plugins: [new HotModuleReplacementPlugin()],
  module: {
    rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  output: {
    filename: 'client.js',
    path: path.resolve(__dirname)
  }
};

我想知道是否有任何方法可以解决这个问题，因为我无法想出如何使我的标记与我所做的更改相匹配的任何想法，或者我应该抑制这些警告？