Блог

Главная - Вопросы по программированию - Реагировать на ssr — содержимое из серверной части, не отображаемое в источнике страницы просмотра

Реагировать на ssr — содержимое из серверной части, не отображаемое в источнике страницы просмотра

#reactjs #server-side-rendering

Вопрос:

я использую эту оценку для визуализации реакции на сервере, хотя сначала все работает, когда я обновляю страницу, прокси-сервер на порт 5000 перестает работать, и веб-сайт пытается вместо этого получить данные с порта 3000. кроме того, данные, поступающие из серверной части, не отображаются в источнике страницы просмотра.

server/server.js:

 import path from 'path'
import fs from 'fs'
import express from 'express'
import React from 'react'
import { StaticRouter } from 'react-router'
import ReactDOMServer from 'react-dom/server'
import { Provider } from 'react-redux'
import store from '../src/store'
import App from '../src/App'
import { createProxyMiddleware } from 'http-proxy-middleware'

const PORT = 3000
const app = express()

app.use('/api/products', createProxyMiddleware({ target: 'http://198.51.100.255:5000' }))
app.use('/api/categories', createProxyMiddleware({ target: 'http://198.51.100.255:5000' }))

const router = express.Router()

const serverRenderer = (req, res, next) => {
  const context = {}

  fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
    if (err) {
      console.error(err)
      return res.status(500).send('An error occurred')
    }
    return res.send(
      data.replace(
        '<div id="root"></div>',
        `<div id="root">
        ${ReactDOMServer.renderToString(
          <Provider store={store}>
            <StaticRouter location={req.url} context={context}>
              <App />
            </StaticRouter>
          </Provider>
        )}
        </div>`
      )
    )
  })
}

router.use('^/


server/index.js:

 require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

src/index.js:

 import React from 'react';
import { Provider } from 'react-redux'
import { hydrate } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import store from './store'
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();


, serverRenderer)

router.use(
express.static(path.resolve(__dirname, '..', 'build'))
)

app.use(router)

app.listen(PORT, () => {
console.log(`SSR running on port ${PORT}`)
})

server/index.js:







src/index.js:


















	Метки: ,