Question

我正在为我的React Js App使用服务器端渲染。显示页面内容和路由工作正常。但是当我点击``页面源代码''时，它并没有显示html内的所有内容。当我导航到另一个页面时并点击“页面源代码”，它不是更新的旧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元素中可见。元素是一种动态的含义，它可以将自身更新为服务器以及客户端更改。因此，无论何时执行类似的操作显示/隐藏div /按钮，它将显示在inspect元素中。而当您尝试View page souce时会发生什么事情，它击中了服务器，服务器返回的任何HTML内容都将显示。

例如，您可以检查https://preactjs.com/。如果您在其中执行View page souce，则html内容会少得多，并且不会包含与inspect element相比，大多数元素都是如此。因此，这里只有html的一部分是由服务器发送的，而大多数情况是在客户端。

对于您的情况，我认为您需要对服务器渲染的元素进行水化处理，以确保内容相同服务器和客户端，并且不会覆盖它。

类似

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服务器端渲染页面源未更新

1 个答案: