Question

我可以在不使用redux或任何商店容器的情况下为我的页面进行服务器端渲染，只需对路由器做出反应即可。我的初始页面从api中获取一些数据。我应该如何将其传递给服务器上的react组件。如果我在服务器上使用窗口变量，我会收到一个错误，说窗口是未定义的。任何帮助都会很好。

我不想使用，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>
   `
}

Answer 1

我创建了一个MongoDB documentation，其中使用EJS启用了SSR。

我使用EJS（嵌入式JS）在html中使用预加载的数据注入标记。

您可以点击server.js中的api并在html标记中将数据加载为preloadedData

     // 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)
               });
             }
           }
         )
     }

使用React路由器进行服务器端渲染

1 个答案: