我一直在使用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();