SSR 接下来.js不提供纯 HTML，但 JS

Question

我正在为web应用程序使用"next": "^12.2.3"、"react": "^18.2.0"和"typescript": "^4.7.4"。

如果我在next.js中使用SSR模式，我只看到纯HTML中的元标记，但javascript对象包装了所有其他内容。这对于搜索引擎来说是不可读的/seo友好的(

如果我使用next export，我可以看到纯HTML(可从任何搜索引擎读取(

所以，或多或少，这里的问题是：如果有任何方法可以拥有SSR，甚至SSG或增量SSG，并且客户端/浏览器中的源代码是纯HTML？

---

import React, { useEffect } from 'react';
import Router from 'next/router';
import { useStore } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import { ApolloProvider } from '@apollo/client';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import initializeApollo from '@/graphql';
import { wrapper } from '../src/store';
import { setClientState } from '../src/store/redux-models/common/actions';
import theme from '../src/theme/theme';
import createEmotionCache from '../src/createEmotionCache';
import '../styles/globals.css';
import EnvValidation from '/src/utils/env-validator';
if (typeof window === 'undefined') {
EnvValidation();
}
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
if (typeof process.env.NEXT_PUBLIC_API_MOCKING !== 'undefined') {
if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
// eslint-disable-next-line global-require
require('@/mocks');
}
}
function MyApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}) {
const store = useStore();
useEffect(() => {
store.dispatch(setClientState());
}, []);
Router.events.on('routeChangeStart', () => {
NProgress.start();
});
Router.events.on('routeChangeComplete', () => {
NProgress.done();
});
return (
<PersistGate persistor={store.__persistor}>
<CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<ApolloProvider client={initializeApollo()}>
<Component {...pageProps} />
</ApolloProvider>
</ThemeProvider>
</CacheProvider>
</PersistGate>
);
}
export default wrapper.withRedux(MyApp);

Answer 1

next dev和next build都不生成SPA捆绑包，都生成SSR的HTML、<h1>...</h1>等等。您看到的唯一运行时脚本是水合逻辑。