SPA的一个传统缺陷是，由于所有的内容都是在客户端渲染的，所以许多社会共享预览不能工作，一些搜索引擎也不能正确索引你的网站。
在这篇文章中，让我们通过使用VueUse/head包和Netlify PreRendering，为一个由Vue.js 3驱动的SPA补救这种情况。
创建项目
首先，我将使用Vite创建项目。如果你已经有了一个项目，你可以跳到下一节。
npm init [email protected]
Vite会提示我几个简单的问题。我是这样回答的。
✔ Project name: … vue-use-head-and-netlify-prerendering
✔ Select a framework: › vue
✔ Select a variant: › vue
一旦Vite完成了设置，我们就可以安装依赖项并开始了。
$ cd vue-use-head-and-netlify-prerendering
$ npm install
$ npm run dev
VueUse/head用于标题、描述和元数据
为了给我们的页面添加标题和元标签等标题标签，我们将使用VueUse/head包。要安装它，你可以运行。
npm install @vueuse/head
然后在main.js ，我们需要注册这个插件。
import {createHead} from '@vueuse/head'
//...
createApp(App)
.use(createHead())
.mount('#app')
VueUse/head提供了两种设置头部标签的方法。
- 在设置方法中使用组合API。
- 或在模板中
让我们把我们的放在模板中，只是因为它感觉和在正常的HTML中写这些是一样的。
接下来，我们可以在App.vue的脚本标签中导入<Head> 组件。
<script setup>
//...
import { Head } from '@vueuse/head'
</script>
有了这个组件，我们现在可以在模板中使用它来定义一个标题标签。
<Head>
<title>Hello Title</title>
</Head>
如果你现在在浏览器中访问你的页面，你就可以看到你的标题标签生效了。棒极了
让我们为我们的页面提供一些更多的元数据，以优化它的搜索引擎和社会共享预览。
<Head>
<title>Hello Title</title>
<meta name="description" content="This page is awesome">
<!-- Social -->
<meta property="og:title" content="Hello Title">
<meta property="og:description" content="This page is awesome">
<meta property="og:image" content="https://picsum.photos/1200/675">
<!-- Twitter -->
<meta name="twitter:title" content="Hello Title">
<meta name="twitter:description" content="This page is awesome">
<meta name="twitter:image" content="https://picsum.photos/1200/675">
<meta name="twitter:card" content="summary_large_image">
</Head>
在这一点上，如果你使用Placid的Chrome浏览器扩展Social Share Preview，你会看到这个美丽的预览，你的页面在社交媒体上分享的样子（在Firefox上也可用）。
我们所有的头部元标签仍然在客户端呈现，但使其与Netlify合作的基础工作已经完成。
部署到Netlify并启用预渲染功能
接下来，让我们把我们的网站部署到Netlify。为了节省时间，我将在本地建立这个项目。
npm run build
然后我会把dist 目录拖到Netlify的仪表板Sites 页面。
当然，你也可以通过git repo来设置这个项目，它和其他Netlify网站一样，只要你推送到git，它就会自动部署，等等。
此时访问该网站并使用社会共享扩展将显示我们在本地得到的同样漂亮的预览。
然而，不要被愚弄了，这只是读取那些客户端的值。例如，在Twitter上分享我们的页面，不会给我们带来预期的结果。
为了验证这一点，我们可以访问Twitter卡片验证器并输入该网站的网址。结果是 "没有找到卡片"。
为了解决这个问题，我们可以在Netlify的仪表板上打开Pronendering，在下面的位置。Site Settings > Build and Deploy > Prerendering
请注意，在这篇文章中，Netlify的Pronendering还处于测试阶段。
现在，当我们再次通过Twitter卡片验证器运行该网址时，我们可以看到Twitter正确地找到了页面的元标签来创建卡片。
(我确实需要运行 "预览卡片 "几次才能让图片显示出来，但我猜这与我为社交图片使用的占位符图片服务有关。这不是我以前遇到的问题）。
为了更好地了解发生了什么，你可以看一下我们网站的一个典型请求的页面来源。当搜索关键词meta时，你会看到只有在项目根部的静态index.html文件中定义的标签。
换句话说，所有客户端渲染的东西都不在那里，这是可以预期的。
如果你提供一个名为escaped_fragment= 的查询参数，你可以看到我们所有的SEO和社会特定元标签。
这个特殊的查询参数是Netlify提供给我们的一个快速和简单的方法来测试和调试预渲染。在现实生活中，当Twitter或其他社交网络发出请求时，Netlify会根据User-Agent header的值来启用预渲染。
需要考虑的问题
总而言之，就我所知，这种方法并没有什么大的缺点。当然，爬虫提出的请求将需要更长的时间来响应，但这就是真的。你的普通终端用户总是得到常规的SPA。我想，对像谷歌这样的爬虫来说，稍长的响应时间有可能对你的页面排名产生一点负面影响。
另外，你显然需要用Netlify的主机来工作，但也有其他的第三方解决方案，如Plerender.io和Plerender.cloud，提供类似的功能和替代的主机。
也许最重要的事情是，在写这篇文章的时候，Netlify的功能仍处于测试阶段。
结论
总之，有了Netlify Prerendering，我们就能为客户提供一个由Vue.js 3渲染的应用程序，该应用程序对SEO和社会友好，几乎没有额外的工作。
