使用 Angular Universal 实现服务器端渲染

简介: 使用 Angular Universal 实现服务器端渲染

原文链接:https://medium.com/geekculture/implement-server-side-rendering-using-angular-universal-b32ebd9b8b29image.png通常意义来讲,Angular 是一个开发 Single Page Application 的框架,在浏览器端执行。这意味着 Angular 应用在客户端渲染,而不是服务器端。image.png默认实现里,Angular 并不是 SEO 友好。image.png对于 Non SPA 应用,我们在 body 标签页下能看到完整的页面内容。但是像 Angular 这种 SPA 应用,我们只能看到 Root selector,该 selector 背后容纳了所有的渲染源代码。

例子:image.pngimage.png上面这个应用无法被网络爬虫爬取,因为 app-root selector 里什么也没有包含。


如何让一个 Angular 应用支持 SSR.


运行命令:ng add @nguniversal/express-engine


首先运行如下命令进行构建:


npm run build:ssr


生成了如下新的文件夹:image.pngbrowser 文件夹下面,全是为了浏览器端渲染而使用的资源:image.png而 server 文件夹里包含的资源,则是为了在服务器端运行 JavaScript 而准备的。


如何启动 Angular Universal 应用?


npm run serve:ssr


背后的原理,其实就是启动 nodejs 应用:

serve:ssr": “node dist/server/main.js”,image.png当服务端收到直接对前端路由URL的请求时,不是直接把index.html当做404页面发回去,而是在内存中启动一个Angular框架,执行出结果,然后把内存中生成的DOM内容发回去。


从原理上看,它只是拿v8引擎执行了一段JS代码而已。虽然渲染出了HTML,但并没有借助浏览器的渲染引擎(也就是说连PhantomJS们都不用)。



相关文章
|
1天前
|
搜索推荐 Java 索引
Java中的服务器端渲染(SSR)
Java中的服务器端渲染(SSR)
|
1天前
|
缓存 搜索推荐 Java
Java中的服务器端渲染(SSR)原理与实现
Java中的服务器端渲染(SSR)原理与实现
|
1天前
|
安全 前端开发 Java
Java中的服务器端渲染(SSR)技术深入剖析
Java中的服务器端渲染(SSR)技术深入剖析
|
26天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
24 0
|
1月前
|
JavaScript Serverless 网络架构
Next.js与SSR:构建高性能服务器渲染应用
创建Next.js项目使用`create-next-app`,每个页面自动支持SSR。动态路由如`pages/posts/[id]`,在`getStaticPaths`和`getServerSideProps`中获取数据。利用静态优化和预渲染提升性能,动态导入减少初始加载时间。使用`next/image`优化图片,自定义服务器增加控制,集成第三方库如Redux。优化SEO,利用i18n支持多语言,使用Serverless模式和Web Workers。项目支持TypeScript,创建`_error.js`处理错误,部署到Vercel并使用工具进行性能监控和优化。
160 4
|
2月前
|
JavaScript 搜索推荐 前端开发
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
|
2月前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
30 2
|
2月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。

热门文章

最新文章