原文链接:https://medium.com/geekculture/implement-server-side-rendering-using-angular-universal-b32ebd9b8b29通常意义来讲,Angular 是一个开发 Single Page Application 的框架,在浏览器端执行。这意味着 Angular 应用在客户端渲染,而不是服务器端。默认实现里,Angular 并不是 SEO 友好。对于 Non SPA 应用,我们在 body 标签页下能看到完整的页面内容。但是像 Angular 这种 SPA 应用,我们只能看到 Root selector,该 selector 背后容纳了所有的渲染源代码。
例子:上面这个应用无法被网络爬虫爬取,因为 app-root selector 里什么也没有包含。
如何让一个 Angular 应用支持 SSR.
运行命令:ng add @nguniversal/express-engine
首先运行如下命令进行构建:
npm run build:ssr
生成了如下新的文件夹:browser 文件夹下面,全是为了浏览器端渲染而使用的资源:而 server 文件夹里包含的资源,则是为了在服务器端运行 JavaScript 而准备的。
如何启动 Angular Universal 应用?
npm run serve:ssr
背后的原理,其实就是启动 nodejs 应用:
serve:ssr": “node dist/server/main.js”,当服务端收到直接对前端路由URL的请求时,不是直接把index.html当做404页面发回去,而是在内存中启动一个Angular框架,执行出结果,然后把内存中生成的DOM内容发回去。
从原理上看,它只是拿v8引擎执行了一段JS代码而已。虽然渲染出了HTML,但并没有借助浏览器的渲染引擎(也就是说连PhantomJS们都不用)。