CODEWITHSUNDEEP
react-reduxserver-side-renderingamp-htmlrazzle
code_Knight
code_Knight

Reputation: 281

How to integrate AMP in react Server Side Rendering(Razzle)?

I have been using razzle for Server side Rendering with react+redux. Now, i need to integrate AMP in this setup. I found few examples with nextJS. Should i add amp.js in the main HTML or there should be separate server.js for rendering AMP pages and How. how to handle the amp routes with respect to existing routes.

Here is my server.js

  const markup = renderToString(
     sheets.collect(
       <Provider store={store}>
        <ThemeProvider theme={theme}>
          <StaticRouter location={req.url} context={context}>
            <App />
          </StaticRouter>
        </ThemeProvider>
      </Provider>
  ));


const css = sheets.toString();
      const finalState = store.getState();
      const html = `<!doctype html>
          <html lang="">
          <head>
              ${assets.client.css
                ? `<link rel="stylesheet" href="${assets.client.css}">`
                : ''}
                ${css ? `<style id='jss-ssr'>${css}</style>` : ''}
                ${process.env.NODE_ENV === 'production'
                  ? `<script src="${assets.client.js}" defer></script>`
                  : `<script src="${assets.client.js}" defer crossorigin></script>`}
          </head>
          <body>
              <div id="root">${markup}</div>
              <script>
                window.__PRELOADED_STATE__ = ${serialize(finalState)}
              </script>
          </body>
      </html>`

Client.js

hydrate(
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
    </Provider> ,
  document.getElementById('root'),
    () => {
      const jssStyles = document.getElementById('jss-ssr');
      if (jssStyles && jssStyles.parentNode)
        jssStyles.parentNode.removeChild(jssStyles);  
    }
);

if (module.hot) {
  module.hot.accept('../common/containers/App', () => {
    hydrate(
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </ThemeProvider>
      </Provider>,
      document.getElementById('root')
    );
  });
}

serviceWorker.register();

Upvotes: 3

Views: 138

Answers (0)

Related Questions