2、同构 Web 应用架构入门

同构 Web 应用架构入门

在现代 Web 开发中，同构 Web 应用架构逐渐成为一种备受关注的技术方案。下面将详细介绍同构 Web 应用的相关知识。

1. 同构 Web 应用概述

同构应用是将服务器端渲染的 Web 应用与单页应用相结合的产物。以 All Things Westies 这个电商应用为例，它主要售卖西高地白梗犬相关的产品，如狗用品、带有西高地梗图案的袜子、杯子和衬衫等。

• 工作原理 ：用户首次访问该网站时，应用内容通过 Node.js 在服务器端渲染，然后发送到浏览器显示。用户在浏览页面时，后续页面由浏览器中的 JavaScript 使用单页应用技术渲染。该应用尽可能在服务器和浏览器之间复用代码，借助 JavaScript 能在浏览器和服务器（通过 Node.js）运行的特性，实现相同代码在两个环境中与 API 或数据源交互。
• 技术栈搭建 ：构建这样的应用需要整合多种知名技术，推荐利用开源库。
  • 视图层 ：使用 React 构建显示产品的 HTML 组件。
  • 数据管理 ：采用 Redux 实现单向数据流，这是 React 应用中当前社区标准的数据管理方式。
  • 构建工具 ：使用 webpack 编译浏览器端代码，并使 Node.js 包能在浏览器中运行。
  • 服务器端 ：使用 Express 构建 Node.j