Отправка серверной части с помощью React router

Могу ли я сделать рендеринг на стороне сервера для моей страницы без использования сокращений или любого контейнера магазина и просто отрегулировать маршрутизатор. Моя начальная страница извлекает некоторые данные из api. Как мне передать это на реагирующий компонент на сервере. Если я использую переменную окна на сервере, я получаю сообщение об ошибке, поскольку окно не определено. Любая помощь будет хорошей.Отправка серверной части с помощью React router

Я не хочу использовать, redux. Я попытался получить исходное состояние данных, как передать это компонентам на стороне сервера. Использование оконной переменной не помогает, поскольку окно не определено на сервере.

clientRouter.get('/', (req, res) => { 
    match({routes : routes, location: req.url}, (err, redirect, props) => { 
    if (err) { 
     res.status(500).send(err.message) 
    } else if (redirect) { 
     res.redirect(redirect.pathname + redirect.search) 
    } else if (props) { 

     let todos = [{id: 1, title: "Hey loo"}, {id: 2, title: "Meoww"}]; 
     props.todos = todos 
     **** how do i pass the todos state down to the components**** 
     const appHtml = renderToString(<RouterContext {...props}/>); 
     res.send(renderPage(appHtml, todos)) 
     // if we got props then we matched a route and can render 
    } else { 
     // no errors, no redirect, we just didn't match anything 
     res.status(404).send('Not Found') 
    } 
    }) 
})

выше не работает

function renderPage(appHtml, state) { 
    let initialState = JSON.stringify(state); 
    return ` 

    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Judo Heroes - A Universal JavaScript demo application with React</title> 
    <link rel="stylesheet" href="./../build/${cssSrc}"> 
    </head> 
    <body> 
    <div id="main">${appHtml}</div> 
    <script>window.INIT_STATE = ${initialState}</script> 
    <script src=./../build/${jsSrc}></script> 
    </body> 
</html> 
    ` 
}

источник

2017-01-06 Nitish Phanse

Я создал boilerplate, в котором SSR включена с помощью EJS.

Я использовал EJS (Embedded JS) для инъекции разметки в html с предварительно загруженными данными.

Вы можете нажать АФИ в server.js и загружать данные как preloadedData в вашей HTML-разметки

 // universal routing and rendering 
    app.get('*', (req, res) => { 
     // if the current route matched we have renderProps 
     match(
     { routes, location: req.url }, 
     (err, redirectLocation, renderProps) => { 

       // in case of error display the error message 
      if (err) { 
       return res.status(500).send(err.message); 
      } 
      // in case of redirect propagate the redirect to the browser 
      if (redirectLocation) { 
       return res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
      } 
      // generate the React markup for the current route 
      let markup = ""; 
      if (renderProps) { 
      let preloadedData = []; 
       fetch("http://example.com").then(function (data) { 
       preloadedData = [data.data]; 
       renderSSRPage(res, preloadedData, renderProps); 
       }.bind(this)).catch(function (err) { 
       preloadedData = [{ error: true }]; 
       renderSSRPage(res, preloadedData, renderProps); 
       console.warn('Error in server.js ', err) 
       }); 
       res.render('index', { 
       markup, 
       preloadedData: JSON.stringify(preloadedData) 
       }); 
      } 
      } 
     ) 
    }

источник

2017-01-06 10:46:31 John

я решил переехать в магазин. Также почему вам нужен шаблонный движок. Вы можете напрямую использовать renderToString? –

renderToString используется только тогда, когда у вас нет динамических данных на вашей странице. И renderToString сделает вашу разметку на стороне клиента, но вы не можете загружать элементы, основанные на данных api с вашего сервера backend – John

, почему бы и нет, сделать api-вызов, получить данные, а затем создать экземпляр вашего хранилища и объекта состояния на сервере, передать его в качестве исходного состояния клиенту, все, что вам нужно, будет renderToString. Я сделал это на рабочем продукте в производстве .. :) –

Отправка серверной части с помощью React router

ответ

Смежные вопросы