在纯 VueJS 应用程序中，我们有一个<div id="app"></div>容器，VueJS 放置所有需要渲染的内容。
因此，如果我们在浏览器中打开源代码，我们将看不到任何渲染的内容。
因此，如果我们使用 SSR 的 Nuxt 功能，则在第一次初始加载时，所有组件都会呈现在服务器上，我们会看到一些 HTML 内容。
但是，当我们浏览该网站时，当它在“水疗模式”（使用<nuxt-link>）下工作时，会发生什么。当我单击链接时，该网站未完全重新加载。我在 chrome 开发工具中看不到任何请求，除了 XHR，也没有其他。即使我们从后端获得了完全渲染的内容，它也会通过 javascript 插入，就像在这种<div id="app"></div>"情况下一样，因为我们不会重新加载页面。
但我可以在源代码中看到一切都符合 SEO 需要：导航到其他一些路线后，所有 html 都出现在源代码中。但这是怎么发生的呢？
我试图确保我的菜单项安装在 DOM 中以用于 SEO 目的。我正在使用 MUI Select 组件作为下拉导航，并传入keepMountedprops，这些 props 最终通过 传播到 Popper 组件上MenuProps。
我可以看到菜单项 HTML (ul > li) 安装在我的检查器中，但当我检查源或 CURL 时它们不存在。
const TopicSelect = ({
classes,
width,
selectClassName,
topicData,
selectedValue,
onChange,
}) => {
const isMobile = isWidthDown('xs', width)
return (
<FormControl data-testid="TopicSelect-formControl" variant="filled">
<InputLabel className={classes.label} htmlFor="topic-select-input">
Filter by topic
</InputLabel>
<Select
data-testid="TopicSelect-select"
className={classnames(classes.select, selectClassName)}
onChange={onChange}
value={selectedValue}
autoWidth
native={isWidthDown('xs', width) ? true : false}
input={
<FilledInput
name="topic"
id="topic-select-input"
className={classes.filledInput}
disableUnderline
/>
}
MenuProps={{
style: {
zIndex: …我正在开发一个使用 SSR 构建的 React 应用程序，用于 SEO 目的。NextJS 的 SSR 如何工作？这些请求必须是从某个地方发出的；如果不是浏览器，那么在哪里？谢谢你！
我正在开发将 SSR 与 Angular Universal 集成的 Angular 应用程序。在这个项目中，我们使用一些步进器的插件（bs-stepper）。问题是这个插件有一个多窗口引用，如下所示：
var matches = window.Element.prototype.matches;
我需要一种方法来验证它是否是浏览器，尝试了“检测”和“导航器”等多个选项。
我可以使用 Svelte 生成“初始”HTML 文件吗？
我正在使用 Django、Webpack 和 Tailwindcss。我想在我的前端中使用 Svelte，但我不想放弃仅使用服务器端渲染（Django 模板）带来的速度。如果我最初展示的是一个引导 HTML 页面，它引入了 bundle.js，并且 Svelte 在客户端构建了 DOM，那么浏览器仅在加载 JS 文件后才开始下载图像。
与最初呈现的 HTML 已包含图像链接相比，浏览器开始与 JS 一起下载它们，从而加快感知页面加载速度。
我不想使用 Sapper 作为我的应用程序服务器，我想继续使用 Django。
我正在尝试找到一种方法来模拟Next.js's getInitialProps。
我目前正在使用 cypress 运行 E2E 测试，但无法找到一种方法来模拟服务器端获取，而不需要启动模拟服务器来进行获取。我很好奇是否有人找到了更好的方法？
谢谢你！
我有一个 Gatsby 网站，并且正在实施 GDPR 同意横幅。我想将状态存储在本地存储中，其中包含与用户是否接受 GDPR 条款相关的“true”或“false”字符串。
例如，用户第一次访问该网站。在本地存储中，有一个“GDPR_Accepted”键设置为“false”。如果用户不接受主页上的 GDPR 条款，则横幅将继续显示在用户访问的每个页面上。当用户单击接受时，GDPR_Accepted 值设置为“true”，并且我的 React 组件中的三元运算符应用隐藏横幅的 CSS 类。
因为我使用的是本地存储，所以即使用户离开页面并稍后返回（假设他们没有清除浏览历史记录），“true”值也应该持续存在。问题出在盖茨比身上。Gatsby 使用服务器端渲染，当用户接受 GDPR 条款并离开网站并返回时，GDPR 值将重置为“false”。当设置为“true”时，Gatsby 无法保留之前的本地存储数据。
如何在 Gatsby 项目中将数据保存在本地存储中？仅使用 React 状态来存储用户是否接受 GDPR 条款是否更有意义？
我们假设有以下页面：
export default ({ SSRtasks }) => {
const [ tasks, setTasks ] = useState(SSRtasks)
const { data: freshTasks, mutate } = useSwr('/api/tasks')
useEffect(() => freshTasks && setTasks(freshTasks), [ freshTasks ])
return (
<ul>{tasks.map(task => <li>{task}</li>)}</ul>
)
}
export const getServerSideProps = async ({ req, res }) => {
const SSRtasks = Task.find({ owner: id })
return { props: { SSRtasks } }
}
知道任务在不断更新，就性能而言，这是正确的吗？
我找不到任何关于此的文档。（或者至少，理解）
我正在构建一个 Next.js 无头应用程序，通过对 Umbraco 后端的 API 调用来获取数据。我使用getServerSideProps加载每个页面的数据，然后将其作为“数据”传递到功能组件和页面中。
我遇到的问题是，我对网站的页眉/页脚部分有单独的端点，并且在所有页面之间共享。因此，每页调用 3 次（页眉、数据、页脚）是一种耻辱，而且是不好的做法。
为了获取页眉/页脚一次，然后将其保留在多个页面中，同时保持 SSR，可以做什么？（重要的）。我尝试过使用cookie，但它们无法保存这么多数据。下面是一些代码：
页面获取数据：
export async function getServerSideProps({ locale }) {
const footer = await Fetcher(footerEndPoint, locale);
return {
props: {
locale: locale,
footer: footer
}
}
}
布局
const Layout = (props) => {
const { children, footer } = props;
return (
<>
<Header />
<main>
{children}
</main>
<Footer footer={footer} />
</>
);
};
export default Layout;
我有一个包含 SSR、Vue-Cli、Vuex 和 Typescript 的 Vue3 项目。
在路由器页面中，我需要将数据提交到 Vuex Store。在 .vue 文件中，我只需使用在 vuex.d.ts 中输入的 this.$store ，例如：
this.$store.commit("setFoo", "Bar")
但是我该如何从没有 this 或 vue 实例的 ts 文件 (router/index.ts) 中做到这一点。
我尝试导入商店索引文件并提交：
import store from "@/store/index"
store.commit("setFoo", "Bar")
但我收到一个错误
类型 '() => Store<{ foo: string; 上不存在属性 'commit' }>'.ts(2339)
商店文件（因为我正在运行 SSR，所以商店不能是单例）：
import Vuex from "vuex"
export default function () {
return new Vuex.Store({
state: () => ({
foo: "foo",
}),
mutations: {
setFoo(state, payload) {
state.foo = payload
},
},
})
}
更新了 vuex 4 …