Angular vs React SEO:基础知识

后端之巅
442 阅读11分钟

在很短的时间内，网络开发的世界发生了深刻的变化。

网络开发世界发生的最重要的发展之一是采用JavaScript作为建立网站的前端框架。今天流行的两个最受欢迎的JavaScript框架是Angular和React。

从功能上看，它们是相互对立的，具有广泛不同的功能和使用案例。Angular大而复杂，用于构建企业级应用。React则简单、精简、快速，是为网站制作UI元素而制作的。

Angular和React都非常不同，但它们都被雇主所需要，都被财富500强公司所使用。

哪一个更好呢？哪一个更容易建立应用程序和网站？哪一个更有需求？哪一个有更好的性能？哪一个更适合SEO？

我们将从Angular和React的相对性能、受欢迎程度以及对SEO的友好程度等方面进行比较。

Angular vs. React - 性能

Angular是更广泛使用的技术，被数百万的开发者所使用。它是一个开源的JavaScript框架，由谷歌建立和维护。

它以其开箱即用的功能，以及高效和强大而闻名。它在编程中使用真正的DOM，并采用模型、视图、控制器（MVC）结构进行操作，将一个应用程序分成三个部分，以便于测试。

Angular被福布斯、索尼、耐克和UpWork等顶级品牌使用。

同时，React是一种更通用的技术，由Facebook建立和维护。它旨在构建UI元素，但它也被用来在外部库和插件的帮助下构建完整的网站和应用程序。

React以其众多的用例和应用，以及易于学习和使用而闻名。它提供了一个快速的开发周期，并赋予网站高性能的能力。它被初创企业和基于在线的服务所使用，如Netflix、Airbnb、Uber和Instagram。

首先，我们将讨论它们在移动友好性、性能、DOM、数据绑定、学习曲线和社区接受度方面的比较。

移动友好性

Angular和React都可以用来构建移动应用程序。Angular使用Iconic 2以及它的本地脚本构建移动应用程序。React需要使用React native、next.js和React SketchApp来实现。

两种框架都可以用于开发移动应用程序，然而，就开发的简易性和应用程序的性能而言，React是更好的选择。Angular使用的组件使它在移动设备上需要额外的时间来加载。

这一点归于React。

功能性

Angular有更多开箱即用的功能--开发团队可以立即开始使用它，而不需要任何外部插件或库。

Angular的强项之一是它支持依赖性注入--这是一种将组件与类解耦的编程技术，意味着类之间不相互依赖。这在移动设备上创造了更好的性能。

与此同时，React需要多个插件和库才能真正发挥作用。其中一些包括。

  • Redux：一个状态容器，用于加速大型应用中React的工作。
  • Babel：一个反编译器，用于将旧的JSX转换成浏览器可以理解的JavaScript
  • React Router。React的标准URL编码库

Angular有更多的功能，是一个比React更独立的框架。

DOM vs. vDOM

网络开发的标准固定装置之一是使用文档对象模型（DOM）。DOM是一个用于HTML文档的编程接口。

Angular使用传统的、真正的DOM。这意味着它更新你的代码的整个树状结构，即使变化只发生在一个元素中。这使得应用程序更慢，效率更低。

与此同时，React使用虚拟DOM--它跟踪变化，只更新特定元素，而不改变树的任何其他部分。这被认为比使用真实的DOM更快。

数据绑定

数据绑定是在模型和视图之间同步数据的过程。有两种基本的数据绑定的实现方式：单向和双向。

Angular使用双向数据绑定来连接DOM值和模型数据。这使得工作更简单，但也对性能有负面影响--当应用程序处理大量的数据请求时，它就会变慢。

React使用单向数据绑定--不允许子元素在更新时影响父元素。这使得代码更稳定，更容易调试。

学习曲线

Angular是一个很难学习和实现的框架。不仅如此，它还在不断地被更新和补充，这就要求Angular开发者保持警惕，不断地融入Angular社区，以了解有什么变化。

Angular框架包含一个巨大的库，学习使其工作的必要概念需要更多的时间。

另一方面，React是一个简约的框架，对语言的新手来说更友好，更容易学习。

社区接受度

由于Angular 1.0的性能和稳定性不佳，Angular的名声很不好，直到今天还经常被开发者认为是不必要的复杂。然而，对它有利的是，谷歌不遗余力地对该框架进行不断改进，并提供长期支持。Angular还通过强大的文档来平衡其难度和学习曲线。

同时，React有更广泛的社区支持，在在线网络开发社区中通常更受欢迎。它也在不断变化，需要开发者不断地重新学习网络。

Angular vs. React - 哪一个更受欢迎？

Angular和React都在许多行业和世界上许多最广泛认可的品牌中广泛使用。但是，网络开发人员自己更喜欢使用哪一个呢？

值得指出的是，至少从2015年开始，"React "这个话题在谷歌上的趋势就已经超过了 "Angular"。

“React” historically has trended over “Angular” on Google since at least 2015.

然而，这是一个棘手的判断指标，因为 "React "这个词是一个通用的、常用的动作动词，也是一个名词。为了真正弄清楚这个问题，我们需要更深入地挖掘一下。

2020年由网络开发者社区论坛Stack Overflow主持的一项调查显示，在36291个回答中，React.JS被列为专业开发者中第二受欢迎的网络框架，仅次于JQuery（36.8%），超过Angular（26.5%）。

你应该使用Angular还是React来构建你的网站？

Angular和React是为了满足不同的需求。React是一个处理视图编码的库，而Angular是一个成熟的框架，使用模型-视图-控制器模型工作。

Angular在受欢迎程度上落后于React，但正在稳步获得立足点，特别是在企业界。它非常适合于大型团队和项目，具有标准化和长期支持。

Angular有更多开箱即用的功能。它不需要额外的库或插件就能工作，你可以马上开始用它构建你的网络应用。如果你需要建立一个最小可行的产品并立即开始开发，它是很好的。Angular确实也有一些SEO限制，需要第三方插件来克服。

同时，React更加简单和轻量级。它需要更少的时间来开始做一个项目，它的开发周期也更快。React可以说是这两个框架中对SEO最友好的，因为它的页面速度性能增强，而且它的虚拟DOM工作环境。权衡之下，React需要一个较长的初始设置过程，因为它本身的功能不全，需要插件和库才能发挥作用。

这一切都取决于你项目的要求和你团队的需要。

如何为Angular启用SSR

Angular默认为客户端渲染，并需要一个名为Angular Universal的库来在服务器上而不是浏览器上渲染JavaScript内容。这使它能够将静态的HTML应用页面交给搜索引擎机器人进行无缝抓取和索引。它的渲染速度也更快，让用户更快地与网页互动，增强用户体验。

1.创建你的网络应用程序

首先，检查以确保你有最新的Angular CLI--9或更高版本。

ng -version

如果你的CLI版本小于9，你可以把它升级到最新版本。

npm i -g @angular/cli

然后，启动你的网络应用。

cd angular-SSR-Demo

npm start

2.安装Angular Universal

为了创建你的服务器端应用模块，运行app.server.module.ts，然后运行以下命令。

ng add @nguniversal/express-engine

从你的应用程序目录中打开终端，并运行以下命令。

$ ng add @nguniversal/express-engine -clientProject {{你的项目的名称}}。

3.为SSR配置你的Angular应用，并测试以确保其正常运行

从@nguniversal运行Angular Universal，并在你的项目中添加一个Express服务器。

"@angular/platform-server"。"~10.0.9",

"@nguniversal/express-engine":"^10.0.0-rc.1"。

"express":"^4.15.2",

npm run dev:ssr

有了这些，你现在可以通过模拟不同类型的网络来测试，以确保它的工作。

  1. 打开Chrome开发工具，转到网络选项卡。
  2. 在菜单栏的最右边找到 "网络节流 "下拉菜单。
  3. 试试其中一个 "3G "的速度。

该应用程序在所有网络类型上都应该表现良好。

为React启用SSR

接下来，我们将讨论如何为React启用服务器端渲染。

1.选择一个框架

首先，选择一个与React结合使用的框架。你的选择是Next.JS或Razzle。

2.创建你的React应用程序

运行以下命令。

npm init -yes

然后，安装所有你需要的依赖项。

npm install

3.创建服务器

这是启用SSR的代码。

import React from 'react';import { renderToString } from 'react-dom/server';import { Provider } from 'react-redux'; import configureStore from './redux/configureStore'; import App from './components/app';

module.exports = function render(initialState) {// Model the initial stateconst
store = configureStore(initialState); let content = renderToString(

为客户端配置应用程序

我们创建纯客户端的应用程序，如下所示。

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state);
hydrate(
  <Provider store={store} ><App /></Provider>,
  document.querySelector('#app')
);

然后确保服务器上的内容与客户端上的内容相同。

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state);
hydrate(
  <Provider store={store} ><App /></Provider>,
  document.querySelector('#app')
);

最后。

npm run build && npm run start

Angular的SEO问题

Angular是一个强大的框架，能够制作强大的应用程序，但它也不是没有缺点的。下面是你在使用Angular时可能遇到的一些SEO问题。

  • 真实的DOM。Angular在一个真实的DOM环境中渲染JavaScript。谷歌在查看JavaScript中执行的内容之前，会先查看最初的HTML解析。
  • 深度链接。在Angular网络应用中创建的深度链接很难被索引。有一些方法可以做到这一点，但它们是困难和耗时的。
  • 不一致的URLs。对新内容的请求是用异步JavaScript和AJAX调用填充的。事实上，没有加载新的页面，URL栏中的地址与屏幕上的内容不匹配。

React的SEO问题

React是最流行的JavaScript框架，基于React的应用程序带有一些别致的性能增强，从SEO的角度来看是很好的。然而，在使用React时，你可以期待以下一些问题。

  • 延迟时间长。谷歌对大多数网页的索引采用两波索引系统：抓取和索引。对于用React构建的SPA，这个过程会比较慢，而且比较复杂。
  • 有限的抓取预算。JavaScript页面需要更长的时间来让谷歌机器人获取和解析。如果谷歌需要太长的时间来渲染你的页面，它就会直接离开而不索引你的内容。
  • 缺少动态SEO标签。当涉及到React SPA时，很有可能你的SEO元标签，如你的标题标签和元描述不会被正确设置，不会通过索引过程。

结论

Angular和React是互联网上使用最广泛的两个Web开发框架。它们各有各的优点和缺点，在为搜索引擎优化方面，它们都有自己独特的局限性。

两者之间的比较表明。

  • Angular有更多的开箱即用的功能，是为更强大、更复杂的网络应用而准备的。
  • React的进入门槛较低，并且具有对SEO有利的性能优势。
  • 使用Angular Universal来为SSR配置你的Angular网络应用，并为React使用Next.JS或Razzle。

主题。

Web开发, Angular, React, Seo, Web开发

avatar
文章
阅读
粉丝