Источник страницы рендеринга React на стороне сервера не обновляется - PullRequest
Новая
       19

Источник страницы рендеринга React на стороне сервера не обновляется

0 голосов
/ 12 октября 2018

Я работаю с серверным рендерингом для содержимого страницы моего React Js App.showing, и маршруты работают нормально. Но когда я нажимаю «источник страницы», он не показывает весь контент внутри html.also, когда я перехожу на другую страницуи нажмите «источник страницы», он не обновляет старый 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)
      };

1 Ответ

0 голосов
/ 12 октября 2018

Причина, по которой это может происходить, заключается в том, что при выполнении view page source на веб-сайте SSR отображается только страница, отображаемая сервером.Поэтому все, что вы делаете на клиенте, например добавление html-элемента или прослушивателя, будет видно только в элементе inspect. Элемент inspect является своего рода динамическим, что означает, что он обновляет себя как на сервере, так и на стороне клиента. Так что, когда вы что-то делаетекак и показать / скрыть div / кнопку, это будет показано в элементе проверки.Принимая во внимание, что при попытке 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()

Надеюсь, это поможет.

...