当我们用react或vue完成应用开发之【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net后，我们还会考虑SEO的问题，对于所有S转载请注明出处：www.tangshuang.net原创内容，盗版必究。PA应用而言，SEO都是非常痛苦的，但是未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。从产品市场的角度，SEO是必不可少的。传【原创内容，转载请注明出处】【本文受版权保护】统的做法是在SPA基础上新增一个与原来S转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。PA（代码层面）完全无关的博客系统，例如转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。挂一个wordpress，再在主站htm转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。l源代码中有指向该博客站的链接，通过博客【原创内容，转载请注明出处】【作者：唐霜】站来带动整站的SEO表现。但这种方案会使转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】得技术栈割裂，两个系统甚至无法做深度的融【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】合。相对的，比较理想的做法是，在原始SP【未经授权禁止转载】【原创内容，转载请注明出处】A的基础上开辟出类似博客的子目录，既能有本文版权归作者所有，未经授权不得转载。【本文受版权保护】大量内容的输出，也能够在同一套技术体系下【原创不易，请尊重版权】【原创不易，请尊重版权】进行迭代。另一种比较前卫的方案，是采用前著作权归作者所有，禁止商业用途转载。【本文受版权保护】端技术SSR或SSG来实现在服务端将原本本文作者：唐霜，转载请注明出处。【本文受版权保护】空无一物的SPA渲染为自带内容的html著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。这种方案在前端届获得了巨大推崇，并衍生【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】出一大堆SSR或SSG的方案。然而，在我未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。看来，SSR方案存在很多弊病，虽然nex【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nett.js等框架取得了巨大成功，但是不要忘著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】了，这些框架的目标是为了实现真正意义上的转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】“全栈”开发，而不是为了弥合SPA的不足【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，因此，不要把next.js等的成功，归本文版权归作者所有，未经授权不得转载。【本文受版权保护】结于SSR的成功。本文将从SSR/SSG原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的问题出发，并结合Vue应用的实际情况，【本文受版权保护】本文版权归作者所有，未经授权不得转载。提出一种基于nodejs来为SPA做SE【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】O的方案，希望能够帮助到遇到相同问题的朋著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】友。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】SSR/SSG的弊病【版权所有】唐霜 www.tangshuang.net
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【本文受版权保护】本文作者：唐霜，转载请注明出处。首先来聊一聊SSR和SSG。在早些年an本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netgularjs的时代，我们做SPA开发，【原创内容，转载请注明出处】【原创内容，转载请注明出处】并没有SEO的需求，这些应用大多用在企业著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】级或不对外公开的内部环境中。而随着rea本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ct和vue等框架的火爆，那些不用在封闭【本文首发于唐霜的博客】【版权所有，侵权必究】环境中的网站，也开始采用react和vu【未经授权禁止转载】原创内容，盗版必究。e来进行开发，原因其实是需要我们深思的，【版权所有，侵权必究】【本文受版权保护】一方面社区的蓬勃发展，让我们做技术选型时【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】有更多的考虑，例如组件库的盛行，这些由社【作者：唐霜】【关注微信公众号：wwwtangshuangnet】区提供的免费基础建设，使得它们在对比时，【版权所有，侵权必究】【转载请注明来源】具有优势；另一方面，随着求职jd上对这些【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。框架的要求，其他的很多技术在发展中被逐渐本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】淘汰，开发人员很多都只会react或vu【转载请注明来源】【版权所有】唐霜 www.tangshuang.nete框架，因此，即使在追求秒开、体验佳的C未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。端应用中，它们也被广泛应用（即使在我看来【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。不应该在这些场景下使用）。也正是这些情况未经授权，禁止复制转载。【原创不易，请尊重版权】的发展，使得前端界面的开发，越来越多基于未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netvue或react，但这会让企业在面临S转载请注明出处：www.tangshuang.net【未经授权禁止转载】EO需求的时候必然出现问题，因此，才出现未经授权，禁止复制转载。【版权所有，侵权必究】了SSR的方案。
【转载请注明来源】【版权所有，侵权必究】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】SSR简单讲就是在服务端通过识别组件内容转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net来组装出对SEO友好的html字符串，直【版权所有】唐霜 www.tangshuang.net【转载请注明来源】接输出给浏览器展示。与此同时，SSR细分著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。领域还探索出如何加快首屏渲染等细枝末节的著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。技术。从技术原理讲，SSR需要在服务端执转载请注明出处：www.tangshuang.net原创内容，盗版必究。行真正的渲染逻辑，它不是简单的字符串拼接未经授权，禁止复制转载。【本文首发于唐霜的博客】，而是照其生命周期启动了渲染程序，经过一著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】系列运行时的运行后，最终得到字符串。不过【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。衍生而来的问题非常多，例如前端应用往往依本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。赖浏览器特定接口，这些程序如何在服务端被未经授权，禁止复制转载。【作者：唐霜】执行？前端往往通过ajax拉取数据进行渲【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】染，服务端渲染时如何处理这些异步等待过程未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。？如何解决框架在服务端渲染时所消耗的性能【版权所有，侵权必究】转载请注明出处：www.tangshuang.net问题？
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】对于开发人员而言，最让人受不了的是，在客本文作者：唐霜，转载请注明出处。原创内容，盗版必究。户端跑的好好的，一开始做SSR改造，总会未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。遇到这样那样的问题，这种烦恼有的时候令人转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。炸毛。而且，当SSR服务端运行起来之后，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net如果公司的运维是另外一个团队，还很有可能本文版权归作者所有，未经授权不得转载。【作者：唐霜】因为这类服务不够标准而被运维阻挠或直接驳【原创不易，请尊重版权】【版权所有，侵权必究】回。几乎所有的大公司运维团队，都对nod本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netejs的运维感到头疼，上线后各种无法预料【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】的崩溃，从而带来的各种兜底兜底再兜底方案【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net，以及性能上的不如人意，导致整个团队在这【转载请注明来源】转载请注明出处：www.tangshuang.net件事上不停灭火又无可奈何。这种消耗对开发【版权所有，侵权必究】转载请注明出处：www.tangshuang.net本身的积极性打击也是存在的，我也是因此而本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。放弃了SSR方案。
【本文受版权保护】原创内容，盗版必究。转载请注明出处：www.tangshuang.net为了寻找折中方案，SSG被提出来，简单讲本文作者：唐霜，转载请注明出处。【本文受版权保护】，就是在SSR的基础上，把实时服务端渲染【转载请注明来源】【原创不易，请尊重版权】，通过技术调整，实现前置渲染，避免实时渲【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。染所带来的性能问题和稳定性问题。SSG在【原创不易，请尊重版权】未经授权，禁止复制转载。用户访问时，生成用于构建页面的素材，而这未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。些素材以静态文件的形式存储在磁盘上。生成【本文首发于唐霜的博客】【转载请注明来源】界面时，则是通过这些素材的拼接来完成。这【转载请注明来源】著作权归作者所有，禁止商业用途转载。种方案解决了SSR实时渲染所带来的问题，【版权所有，侵权必究】【作者：唐霜】而且由于以静态文件的形式存储，使得下次用【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。户访问时速度可以比首次访问成倍提升。看上【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】去SSG方案解决了我们的问题，但是当开发转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】人员准备上这套方案时，发现其难度和带来的未经授权，禁止复制转载。未经授权，禁止复制转载。问题并不比SSR少很多，因为它本质上是在【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netSSR基础上做的改进。对于开发体验而言，【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】SSR所存在的问题，SSG同样存在，同样【原创内容，转载请注明出处】未经授权，禁止复制转载。会令开发者抓狂。在同一段代码中，还要区分【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】服务端和客户端的思维割裂感，使得开发过程【原创不易，请尊重版权】【转载请注明来源】痛苦不已。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】有人可能会反对，因为next.js等框架【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。已经取得了成功，为什么你竟敢如此大胆，妄原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net加评论？全栈框架，或者类似astro这样【原创内容，转载请注明出处】未经授权，禁止复制转载。的融合框架，它们已经跳脱出前端开发的范畴【本文受版权保护】未经授权，禁止复制转载。，它们有自己的范式和硬性规定，你在使用它【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。们时，也会经常感到不爽。对于前端开发人员【原创不易，请尊重版权】【未经授权禁止转载】而言，最舒服的方式，我想还是SPA这种，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】完全在浏览器环境下运行的方式。既然如此，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。有没有什么方法，可以让我们完全用浏览器前著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】端开发的思维完成前期开发，不做任何修改的【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】情况下，再附加一套方案，实现可被接受的S转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】EO效果呢？
【作者：唐霜】【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。如何用nodejs为SPA做SEO原创内容，盗版必究。
转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】Vue社区的SSR和SSG并没有reac本文版权归作者所有，未经授权不得转载。【转载请注明来源】t社区那样火热，可选择方案没有很多，那么【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，我们就以vue应用的SEO来进行讲解，【作者：唐霜】【原创内容，转载请注明出处】从而可以让你更好的理解我是如何用简单的n【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。odejs方案实现vue应用的SEO的。【本文受版权保护】【原创不易，请尊重版权】这也就意味着，同样的路子，可以被用在其他【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net任何（包括但不限于react）框架上。
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net基本思路【原创不易，请尊重版权】
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。在开始之前，我们来思考，vue的SPA应【转载请注明来源】【原创内容，转载请注明出处】用是怎么工作的？在vite项目中，有一个【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。index.html，当完成build之【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。后，这个index.html会被作为模板转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，插入构建好的js, css入口链接。当【作者：唐霜】【原创不易，请尊重版权】我们将dist目录上传到服务器后，用户访转载请注明出处：www.tangshuang.net原创内容，盗版必究。问网站，拉取dist/index.htm【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。l，之后运行js和css。js中包含了v【本文受版权保护】本文版权归作者所有，未经授权不得转载。ue的启动程序，vue会在#root元素【版权所有，侵权必究】未经授权，禁止复制转载。中渲染对应路由的DOM树，用户即可看到对【作者：唐霜】本文版权归作者所有，未经授权不得转载。应的界面。
【未经授权禁止转载】未经授权，禁止复制转载。【本文首发于唐霜的博客】有意思的是，vue不像react一样，要【转载请注明来源】未经授权，禁止复制转载。求挂载的根节点内容必须是空的，我们可以把本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】用户看到的界面DOM树中的innerHT【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ML拿出来，并把根节点的部分拷贝出来，贴本文版权归作者所有，未经授权不得转载。【作者：唐霜】到dist目录下的index.html中本文版权归作者所有，未经授权不得转载。【作者：唐霜】，此时，你在打开dist/index.h【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。tml会发现看到了用户看到的界面一致的结【本文受版权保护】本文作者：唐霜，转载请注明出处。果。除了在js代码中对html, 【作者：唐霜】head等节点有细微操作，生产环境中，几乎所有的本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】变化就在根节点内部的DOM。因此，以SE【未经授权禁止转载】【原创内容，转载请注明出处】O为目的，我们只需要以dist/inde原创内容，盗版必究。原创内容，盗版必究。x.html为模板，在根节点内部插入每一【转载请注明来源】未经授权，禁止复制转载。个路由对应的内容即可。这样，爬虫每次访问本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】一个url，我们就返回该url完整的ht【本文受版权保护】【未经授权禁止转载】ml给它；而用户访问该url时，由于js原创内容，盗版必究。【本文受版权保护】会被执行，vue应用会被启动，覆盖根节点【作者：唐霜】原创内容，盗版必究。的内容（vue在这点上做的比react好【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】很多，hydrate心智负担很小），用户【版权所有】唐霜 www.tangshuang.net【作者：唐霜】几乎对改动无感，甚至觉得页面打开更快了。
这个思路和SSG非常相似，都是提前生成好本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】每一个url的完整html。只不过SSG本文版权归作者所有，未经授权不得转载。【本文受版权保护】对编程的侵入较大，代码中需要区分clie【转载请注明来源】【转载请注明来源】nt-side和server-side。【未经授权禁止转载】【原创内容，转载请注明出处】而本方案的精髓就在于，我们在nodejs未经授权，禁止复制转载。【未经授权禁止转载】层面，以index.html作为模板，根本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。据保存好的内容来填充内部内容，返回含有页【作者：唐霜】著作权归作者所有，禁止商业用途转载。面内容的html结果，从而使之具有和SS本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。R几乎一致的效果。而由于nodejs作为【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。中间层，是后置的，相当于在我们原有的代码本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。基础上穿了一层衣服。当我们脱掉这层衣服，【转载请注明来源】【原创不易，请尊重版权】拿出原始的代码，它又还原成原始的vue在转载请注明出处：www.tangshuang.net原创内容，盗版必究。浏览器跑的SPA代码。这对我们下文做高可【未经授权禁止转载】【转载请注明来源】用架构来说，几乎是完美的。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。具体实施著作权归作者所有，禁止商业用途转载。
本文作者：唐霜，转载请注明出处。【转载请注明来源】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。首先是对index.html做小修改【未经授权禁止转载】，具体如下：转载请注明出处：www.tangshuang.net
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。<style>[v-cloak] { display: none; }</style>
<div id="app" v-cloak><!--vue-app-content--></div>
我们在#app元素内添加了【原创内容，转载请注明出处】<!--vue-app-content-->注释，它的作用是在后来为nodejs提供【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。插入内容的位置。
另外，我们使用【原创不易，请尊重版权】v-cloak来解决页面闪动的问题。当我们在服务端进行本文作者：唐霜，转载请注明出处。【本文受版权保护】渲染时，由于html出来的速度比css文【作者：唐霜】未经授权，禁止复制转载。件加载的快，就会导致页面打开时样式没有生未经授权，禁止复制转载。【本文受版权保护】效，直到css文件完成加载之后页面才会恢【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。复正常，这个期间，就会出现页面闪动。这对【本文首发于唐霜的博客】【本文首发于唐霜的博客】于习惯了vue开发的同学来说并不常见，因本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】为js文件的加载往往慢的多。
接下来是设计一套保存html内容的策略。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。在vue代码中，需要做seo的页面内，增【未经授权禁止转载】【本文受版权保护】加一个上传html的逻辑。当然，这里需要【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】做一些策略，例如只有特定身份的人才能上传本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，上传前要做一些逻辑判断，如我们通过no【原创不易，请尊重版权】原创内容，盗版必究。dejs层在已经完成服务端渲染的页面上做本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】一些标记，vue代码中发现这些标记就不上【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net传，另外，还可以增加上传前比较预备上传的【转载请注明来源】【版权所有】唐霜 www.tangshuang.net内容和已经存在内容的hash等等。
未经授权，禁止复制转载。【本文受版权保护】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。总之，我们在vue代码层面，把#app的未经授权，禁止复制转载。【未经授权禁止转载】内容上传到服务端，为后面nodejs在服著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。务端渲染做准备。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】async function snapshot(key) {
// 如果该页面已经有seo的keywords了，那么就不再往下处理
if (document.querySelector('meta[name=keywords]')) {
return;
}
const app = document.querySelector('#app');
if (app) {
const innerHTML = app.innerHTML;
const fragment = document.createDocumentFragment();
const div = document.createElement('div');
div.innerHTML = innerHTML;
fragment.appendChild(div);
div.querySelectorAll('[no-snapshot]').forEach((el) => {
el.parentNode?.removeChild(el);
});
const text = div.innerHTML;
fragment.removeChild(div);
const hash = md5(text);
const [, data] = await asyncOf(getSnapshot(key));
// 当hash不同时，表示内容发生了变化，因此提供新的快照
if (data && data !== hash) {
await setSnapshot(key, text);
}
// 没有快照
else if (data === null) {
await setSnapshot(key, text);
}
}
}
在服务端，我们需要设计一个store（或本文作者：唐霜，转载请注明出处。【未经授权禁止转载】者文件）来存储由上述函数上传的快照内容。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。存储的key基于url做md5处理。下面本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】我们就会把这些保存好的内容块和前面的in【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。dex.html进行融合，实现服务端SE【版权所有】唐霜 www.tangshuang.net【本文受版权保护】O化输出。
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【作者：唐霜】接下来就是nodejs层面的修改。【原创内容，转载请注明出处】
本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【本文受版权保护】这里指如何让nodejs输出完整的htm本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。l内容，你还需要自己去做一些存储方面的设【作者：唐霜】【未经授权禁止转载】计。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】我们基于express架设了nodejs【本文首发于唐霜的博客】【原创内容，转载请注明出处】中间层，用以完成不同url路由的输出。
原创内容，盗版必究。【本文受版权保护】本文作者：唐霜，转载请注明出处。【转载请注明来源】app.get('/*', async (req, res, next) => {
const locale = getLang(req);
// 当无法判定语言时，返回原始vue的启动页面
if (!locale) {
next();
return;
}
const { path } = req;
const uri = `${path}?lang=${locale}`;
const key = md5(uri);
const snapshot = await getSnapshot(key);
// 只有当存在快照时，才进行SEO的处理，否则不处理
if (!snapshot) {
next();
return;
}
const index = getIndex();
// seo keywords, description，这个部分在上文没有讲到，阅读代码很容易理解
const i18n = new I18n({ locale });
const title = i18n.t('SITE_TITLE');
const subtitle = i18n.t('SITE_SUBTITLE');
const description = i18n.t('SITE_DESCRIPTION');
const keywords = i18n.t('SITE_KEYWORDS');
const seo = index.replace(/<title>.*?<\/title>/, `<title>${title} | ${subtitle}</title>`).replace('<!--site-meta-->', `<meta name="keywords" content="${keywords}" />\n <meta name="description" content="${description}" />`);
const html = seo.replace('<!--vue-app-content-->', snapshot);
res.set('Content-Type', 'text/html');
res.send(html);
});
将上面这条路由规则，放置在express【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】.static之前，那么当执行到上面的next()时，就会回落到原始的vue SPA入口。
最后是nginx配置优化。转载请注明出处：www.tangshuang.net
【作者：唐霜】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。我们原先可能只是将/api/反向代理到了【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netnodejs服务上，现在，我们需要把要做【本文受版权保护】转载请注明出处：www.tangshuang.netSEO的也反向代理到nodejs服务上，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。例如网站首页。
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。location = / {
...
}
location ~ ^/(api|blog)/ {
...
}
上面列举了几个，你还可以根据你自己的需求本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。来添加。
转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net高可用服务架构设计【原创内容，转载请注明出处】
【原创不易，请尊重版权】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】正如前文所说，nodejs的服务被广大运【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。维人员嫌弃，如何才能突围而出呢？我们要用未经授权，禁止复制转载。【本文受版权保护】云原生等把nodejs服务封装起来，让运本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net维干自己熟悉的活，而不用管具体nodej【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】s服务的内部业务逻辑。同时，我们要解决n本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】odejs服务挂掉后，如何保障应用还能继【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】续使用的问题，也就是我们要有兜底方案。
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。首先，我们要从不使用任何方案的原始前端部【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。署方案出发。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】
上面是我们原始的vue SPA应用部署后【关注微信公众号：wwwtangshuangnet】【本文受版权保护】的请求流程。如何在不影响原有可用性的基础【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】上进行改造呢？我的方案如下：
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。
这套方案的特色，就是原来前端的同学该怎么【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】发版本还是怎么发版本，完全不需要考虑新增【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。的逻辑。起主要渲染作用的nodejs程序【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，在开发层面反而是一条旁路，对主线开发没【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。有丝毫影响，也不会对用户侧的可用性产生任未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。何副作用，甚至性能问题都不需要考虑。相比本文作者：唐霜，转载请注明出处。【本文受版权保护】于SSR框架需要在服务端进行运行时的渲染【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】，本方案则完全是字符串替换如此简单的操作【本文受版权保护】【本文首发于唐霜的博客】，性能上属于是碾压级对比。另外，对比SS【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。R框架而言，这套方案还有一个好处，就是想本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。要做SEO的url才走nodejs渲染，本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】不想做的，可以直接回来走老的流程。相比S转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。SR或SSG，这套方案理解起来很简单，成【未经授权禁止转载】未经授权，禁止复制转载。本也低很多。
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】结语著作权归作者所有，禁止商业用途转载。
【作者：唐霜】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net对于读者朋友们而言，看到如此简单却行之有本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。效的方案，可能会好奇，难道它不存在什么缺【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。陷吗？我想，这要看具体的场景。对于需要S【未经授权禁止转载】本文作者：唐霜，转载请注明出处。EO的站点而言，往往是企业的门户、产品类【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。网站等，每一套技术方案都有自己的适用场景本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，你不可以在超出它本质目标的基础上，在其【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。他方面对它做太多的要求。而本文提出的方案【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，主打一个快速、高效、简单容易理解、成本原创内容，盗版必究。未经授权，禁止复制转载。低。我知道在海外，很多创业公司都是nod【版权所有，侵权必究】转载请注明出处：www.tangshuang.netejs全栈，但我们国内的很多企业，但凡有未经授权，禁止复制转载。【原创内容，转载请注明出处】自己的技术班子，往往都是前后端分离，因此【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，类似next.js这样的全栈框架，在国本文作者：唐霜，转载请注明出处。【未经授权禁止转载】内反而市场很小，起码对于更喜爱浏览器环境【作者：唐霜】本文作者：唐霜，转载请注明出处。的前端的同学，是不感冒的。我们国内的技术本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net和海外的技术存在差异，这是很正常的事，我【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。们应该着眼于问题，以较低的成本解决它，而【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】不是盲目的跟风用复杂的代码架构来创造更多【转载请注明来源】本文作者：唐霜，转载请注明出处。的风险点。
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net
