标签: react-ssr

假设我有一个如下组件.

User extends React.Component {
  componentDidMount() {
    this.props.fetchUserDetails(this.props.params.userSlugName);
    // this slug name is coming from route params (ex: path is /users/:userSlugName)
  }
  // Other lifecycle methods
}

User.loadData = () => {
  // some data fetching logic for backend
}

我正在使用react-router v4和react-router-config设置.我的想法已经不多了.如何在服务器中获取userSlugName.

现在,我如何在Server for SSR中预取这些详细信息才能正常工作.

我正在使用 React 16.2.0 并进行 SSR。我的网络应用程序在水合后闪烁。因此，为了查找服务器呈现的 HTML 和客户端呈现的 HTML 中的错误或不匹配，我在开发模式下运行了代码。现在它显示

warning.js?6db0:33 Warning: Did not expect server HTML to contain a <div> in <div>.

我知道这个错误是由于从服务器渲染的 HTML 到客户端渲染的 HTML 删除了一些 div 造成的。

但现在，我的问题是......如何调试这个？没有对发生的元素节点的引用。一种解决方案是手动检查整个页面。有没有其他方法..更有效。如何解决这个警告？

我的应用程序有一个带有 ssr 的简单路由，下面是我的代码

索引.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";

ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
serviceWorker.unregister();

应用程序.tsx

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import Home from "./components/home/Home";
import Tournament from "./components/tournament/Tournament";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact strict component={Home} />
          <Route
            path="/tournament/:tourId/:tourName"
            exact
            component={Tournament}
          /> …

简化我的帖子：

我的 ssr 网页在启动客户端时闪烁，这意味着页面渲染服务器端渲染的 html，然后变为空白，然后开始重新加载所有内容。

详细说明：

我正在开发一个反应项目，我们决定将其从在客户端渲染更改为在服务器渲染。该项目包括react-router-dom,redux和react-redux，material-ui它附带react-jss, loadable/component，还通过 来处理头元素react-helmet-async，并且在 ssr 中它使用express.js这似乎是必须的。

• 因为react-router-dom我做了文档上的所有内容。BrowserRouter在客户端和StaticRouterssr 中使用并向context其传递一个对象。
• for redux，react-redux我保存preloaded_state在窗口中的变量中，并在客户端获取它，然后将其传递给存储。还获取了一些外部数据以获取页面源上的内容。所以我在 ssr 中有一些请求和数据获取。
• 因为material-ui我创建了一个new serverSideStyleSheet并收集了整个项目的所有样式。
• 因为react-helmet-async我Helmet为每个页面设置了不同的标签，收集不同的标题、描述和...个人。还有一个helmetProvidercsr 和 ssr 的包装器。
• 起初我使用了，react-helmet但它与 .i 不兼容。renderToNodeStream我没有更改react-helmet-async，尽管我没有使用 renderToNodeStream 但renderToNodeStream希望将其迁移到有一天。
• 关于express.js我按照文档所说使用它，但是在我添加之后，loadable/component …

我正在尝试在使用https://github.com/jaredpalmer/razzle with-react-router-3创建的 SSR 应用程序中使用 firebase 按摩。我已经在使用 Firebase，它非常有效，包括托管。但是当我开始在应用程序中添加消息时开始抛出错误。

我的入口点看起来像，

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/messaging';

import FirebaseConfig from 'config/firebase-config.json';
if (!firebase.apps.length) {
  firebase.initializeApp(FirebaseConfig);
}
const messaging = firebase.messaging();

当我使用以下命令启动服务器时出现以下错误 razzle start

/Users/subkundu/Desktop/Work/Projects/React/ownerstown/node_modules/@firebase/messaging/index.ts:75
  if (self && 'ServiceWorkerGlobalScope' in self) {
  ^

ReferenceError: self is not defined

我如何解决它？任何领先都将是惊人的。谢谢。:)

我正在尝试使用 SSR 将 CSS 添加到我在 React 中构建的组件中，但我无法这样做。

我看过的东西：

• https://www.npmjs.com/package/isomorphic-style-loader
• https://cssinjs.org/server-side-rendering/?v=v10.0.0-alpha.22
• 网络包加载器

但没有一个过程是简单的或明确提到的。我经常尝试的是同构加载器，它看起来很有希望，但是在我的 CSS 文件中设置它后，它给出了一些模糊的错误：

意外令牌 (1:0) 您可能需要一个适当的加载程序来处理此文件类型。

这是我的样板包 - https://github.com/alexnm/react-ssr

如何向 React SSR 代码添加样式。

更新

const dev = process.env.NODE_ENV !== "production";
const path = require( "path" );
const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" );
const FriendlyErrorsWebpackPlugin = require( "friendly-errors-webpack-plugin" );

const plugins = [
    new FriendlyErrorsWebpackPlugin(),
];

if ( !dev ) {
    plugins.push( new BundleAnalyzerPlugin( {
        analyzerMode: "static",
        reportFilename: "webpack-report.html",
        openAnalyzer: false,
    } ) );
}

module.exports = { …