Блог

Главная - Вопросы по программированию - Как интегрировать AMP в рендеринг на стороне сервера react (Razzle)?

Как интегрировать AMP в рендеринг на стороне сервера react (Razzle)?

#react-redux #server-side-rendering #amp-html #razzle

#react-redux #Рендеринг на стороне сервера #amp-html #razzle

Вопрос:

Я использую razzle для рендеринга на стороне сервера с react redux. Теперь мне нужно интегрировать AMP в эту настройку. Я нашел несколько примеров с NextJS. Должен ли я добавить amp.js в основном HTML или там должны быть отдельные 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>`

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 amp;amp; 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();

Комментарии:

1. нашли способ сделать это?

2. @karma еще нет.