How to add more dynamic metadata

ajeetvarma commented 6 years ago

How to add more dynamic meta data like meta keywords, description, og-title, etc individually on each page separately on server side rendering ..

Thanks in Advance ..

ajeetvarma commented 6 years ago

After a little bit R & D i did like this ..

In src/config.js I pass the Helmet after importing from react-helmet .

const reactConfig = { next: pageRender(pageConfig), appData, Helmet };

And in node_module/react-redux-saga-server-side-render-helper/lib/helper.js

i made few changes :

       function reactRender(config) {

             return function (req, res, route, data) {
             var preloadedState = route && route.getPreloadedState ? route.getPreloadedState(data) : {};
             var store = (0, _store.configureStore)(_extends({ preloadedState: preloadedState }, config.appData));
              var context = {};

             var html = _server2.default.renderToString(_react2.default.createElement(
        _reactRedux.Provider, { store: store }, _react2.default.createElement(
            _reactRouter.StaticRouter,
            {
                   location: req.url,
                   context: context
            },
                 _react2.default.createElement(config.appData.App, null)
            )
        ));

           const helmet = config.Helmet.renderStatic();

         var finalState = store.getState();

          res.send(config.next(html, finalState, route, helmet));
      };
 }

Basically i called helmet componet as per react-helmet documentaion ..

At last i just rendered helmet components in pageRender methos ..

 function pageRender(config) {
         return function (html, preloadedState, route, helmet) { return '\n            <!doctype html '+helmet.htmlAttributes.toString()+'>\n            <html>\n              <head>'+helmet.title.toString() + '\n' + helmet.meta.toString() + '\n' + helmet.link.toString() +'\n                <title>' + config.getPageTitle(route) + '</title>\n                <link href="/main.css" rel="stylesheet">\n              </head>\n              <body '+ helmet.bodyAttributes.toString() +'>\n                <div id="root">' + html + '</div>\n                <script>\n                  // WARNING: See the following for security issues around embedding JSON in HTML:\n                  // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations\n                  window.__PRELOADED_STATE__ = ' + JSON.stringify(preloadedState).replace(/</g, '\\u003c') + '\n                </script>\n                <script src="/client.bundle.js"></script>\n              </body>\n            </html>\n            ';
         };
    }

I know it is not good practice to change in node_modules component directly but if any one can give some better solution i will be very much great full to that . But any way this little trick has given a solution for my requirement . I am closing this issue ..

Thanks a lot ....

gzoreslav commented 6 years ago

Hi @ajeetvarma , react-redux-saga-server-side-render-helper lib will be moved back to the project. Because for now it is difficult to add meta to server/client html

gzoreslav / react-redux-saga-universal-application

How to add more dynamic metadata #21