时间戳

首页 > 解决方案 > 如何在反应服务器端渲染（Razzle）中集成 AMP？

react-redux - 如何在反应服务器端渲染（Razzle）中集成 AMP？

问题描述

我一直在使用razzle通过 react+redux 进行服务器端渲染。现在，我需要在此设置中集成 AMP。我发现了几个nextJS的例子。我应该在主 HTML 中添加 amp.js 还是应该有单独的 server.js 用于呈现 AMP 页面和如何。如何处理amp与现有路线相关的路线。

这是我的 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>`

客户端.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();

标签： react-reduxserver-side-renderingamp-htmlrazzle

解决方案

推荐阅读