Nuxt 3 笔记：服务端 vs 客户端 #20

cssmagic · 2024-03-17T14:13:18Z

组件

<template>
	<ClientOnly fallback-tag="span" fallback="Loading comments...">
		<Comment />
	</ClientOnly>
</template>

这个组件在服务端渲染时得到：

<span>Loading comments...</span>

也可以通过 #fallback 插槽来声明服务端占位内容。

以下变量在 Nuxt 3 文档中似乎没有提及。

console.log('process.server ===', process.server)
console.log('process.client ===', process.client)

以上代码在着陆状态下，在服务端输出一次：

true === true
false === false

把 process. 改成 process\. 则可以让服务端输出正确的信息。或许这两个变量的原理是 Nuxt 通过对源码做了字面替换来实现的。

在浏览器端输出一次：

process.server === false
process.client === true

在 SPA 状态下，在浏览器端输出一次（输出结果同上）。

由于 SSR 阶段不会执行 onMounted 等生命周期钩子，我们可以把客户端代码写入其中。

在页面、组件、插件中，用来获取当前请求：

const event = useRequestEvent()

const url = event.node.req.url

在客户端只能得到 undefined。

// 获取所有请求头：
const headers = useRequestHeaders()
// 获取指定请求头：
const headers = useRequestHeaders(['cookie'])

在客户端只能得到空对象。