每次网路搜寻关键字SSR、MPA、SPA，都会有看没有懂的感觉，看完过没多久马上就忘了，藉由这次机会，一次把观念整理起来，之後还可以复习一下，一举两得！

Server Side Render（服务器端渲染）

早期还没有前後端分离的概念，大部分都是由後端负责渲染画面。

• Model：资料保存
• Controller：控制器，数据处理
• View：展示数据

浏览器发出请求给Server，Server再丢给控制器处理，存取资料後再丢给View产生一份完整的HTML档案，最後显示在画面上。

Single Page Application(单页式应用)

意思就是整个画面只有一个HTML档案再执行，Vue使用元件系统，加上AJAX非同步概念，做到只有某区块会更新画面，浏览器不用重新载入（不用换页），提高使用者的体验。

使用SPA做的网页，点选右键->检视原始码，会出现一堆JavaScript档案：

由上图看出来Vue是用JvaScript载入後台的数据，并且动态产生元件，而SEO只能抓取HTML内容，导致无法抓到该有的数据，爬虫会找不到东西，导致SEO搜寻流量变得很差。

优点：

• 前後端分工
• 使用者体验佳
• 组件化开发，程序逻辑较好管理

缺点：

• 不利於SEO

小补充：AJAX不是单一技术的名词，而是综合性的浏览器端网页开发技术，非同步请求(Asynchronous request)就是其中一项技术，概念如下图：

客户端client对服务器端server送出request请求 之後，不需要等待结果，可以持续处理其他事件。

Multiple Page Application(多页式应用)

MPA多页式的网页架构，点选其他页面都需要重新加载页面（不同网址），内容通常包含复杂的结构，使用者体验较差。

优点：

• 利於SEO

缺点：

• 切换到不同页面时，都需重新载入资料。
• 使用者体验较差。
• 复杂的开发，不好维护。

下一篇来学习，SPA是如何解决SEO的问题，还有MVC的一些概念。

参考资料：
huli
跟着小明一起搞懂技术名词
AJAX