React 服务器端呈现页面源未更新

Question

我正在为我的 React Js 使用服务器端呈现 App.showing 页面内容和路由正常工作 fine.but 当我点击 'page source' 时，它没有显示里面的所有内容 html.also 当我导航到另一个页面并点击 'page source' 时，它不会更新为旧 html。对这个问题有什么想法吗？

server.js

import 'babel-polyfill';
import express from 'express';
import { matchRoutes } from 'react-router-config';
import Routes from './client/Routes';
import renderer from './helpers/renderer';
import createStore from './helpers/createStore';
const app = express();

app.use(express.static('public'));
app.get('*', (req, res) => {
  const store = createStore(req);
  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      return route.loadData ? route.loadData(store) : null;
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {};
    const content = renderer(req, store, context);
    res.send(content);
  });
});

app.listen(3000, () => {
  console.log('Listening on prot 3000');
});

renderer.js

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';
import Routes from '../client/Routes';

export default (req, store, context) => {
  const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path} context={context}>
        <div>{renderRoutes(Routes)}</div>
      </StaticRouter>
    </Provider>
  );

  const helmet = Helmet.renderStatic();

  return `<!doctype html>
    <html lang="en">
      <head>      
        ${helmet.title.toString()}
        ${helmet.meta.toString()}        
      </head>
      <body>
        <div id="root">${content.toString()}</div>
        <script>
          window.INITIAL_STATE = ${serialize(store.getState())}
        </script>
        <script src="bundle.js"></script>
      </body>
    </html>
  `;
};

App.js

import React from 'react';
import { renderRoutes } from 'react-router-config';
import { fetchHomeSliders } from './actions/home';
const App = ({ route }) => {
  return (
    <div>
      {renderRoutes(route.routes)}
    </div>
  );
};

export default {
  component: App,
  loadData: ({ dispatch }) => dispatch(fetchHomeSliders())
};

Routes.js

import React from 'react';
import App from './App';
import HomePage from './components/home';
import About from './components/about';

export default [
  {
    ...App,
    routes: [
      {
        ...HomePage,
        path: '/',
        exact: true
      }
      ,
      {
        ...About,
        path: '/about-us'
      }

    ]
  }
];

fetchHomeSliders API

 export const fetchHomeSliders = () => async (dispatch, getState, api) => {
      const request = await api.get(`https://example.com/api/contents/ABOUT`);  
      dispatch ({type: FETCH_HOME_SLIDERS, payload: request});
      console.log("request request",request)
      };

Answer 1

可能发生这种情况的原因是，在执行 view page source 时，SSR 网站中仅显示服务器呈现的页面。因此，您在客户端所做的任何操作，例如添加 html 元素或侦听器，都只会在 inspect element.The inspect 中看到元素是一种动态的，这意味着它会在您做任何类似的事情时更新自己到服务器和客户端 changes.So show/hide一个div/button，会显示在inspect元素中。而当您尝试 View page souce 时，会发生什么情况呢？服务器返回的任何 HTML 内容都会显示。

作为示例，您可以查看 https://preactjs.com/。如果您在其中执行 View page souce，则 html 内容非常少，不会包含大多数元素与 inspect element 相比。所以这里只有 html 的一部分由服务器发送，大部分事情发生在客户端。

对于你的情况，我认为你需要对 server.It 呈现的元素进行水合，以确保内容在服务器和客户端，不会覆盖它。

类似于

import React from 'react'
import {hydrate} from 'react-dom'
import {Provider} from 'react-redux'
import configureStore from './redux/configureStore'
import App from './components/app'
const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state)

//Here we are hydrating.
hydrate(
    <Provider store={store} >
        <App />
    </Provider>,
    document.querySelector('#app')
)

如果服务器正在返回，您还可以检查网络请求content.toString()

希望对您有所帮助。

React 服务器端呈现页面源未更新

React server side rendering page source is not updating

reactjs

redux

server-side-rendering