Day-4: SSR 与 SPA

SSR — Server Side Rendering 服务器渲染

服务器端渲染 — 在服务器(Server)上将客户端或通用应用程序渲染为 HTML。

SPA —single-page application 单页应用

SPA导致SEO（搜寻引擎最佳化）变差，会先渲染网页内容，
後续的操作会交给 JavaScript， ~~虽然使用者一样能够享受SPA带来的爽度！不用换页的好处~~
不过在第一次的载入中，会较慢，在开发的时候也需要搭配後端技术，来解除这个缺点！

利用AJAX 非同步的特性跟後端同步资料，
将不同的资料动态输向同一个页面，达到网页操作不换页，
来与使用者互动，而非传统从服务器重新载入新页面，

这时候你肯定会问！为什麽要用这种方式呢？来！听我娓娓道来…

这种方法是为了避免页面之间的切换打断使用者的体验，
着手使用起来更像一个桌面应用程序。

在单页应用中，除了第一次是全页下载，之後都是部分更新！！！
（你没看错，就是如此机灵！！不过，因为第一次看SPA网站的时候，
下载的东西会比较多，所以速度会比较慢，但後面几次互动都会很快，因为请求的资料变少了！
所有的code（HTML、JavaScript和CSS）都会通过单个的页面载入，
或回应使用者操作时将动态装载适当的资源且加入到页面里！
页面在过程中的任何时间都不会重新载入，也不会将控制转移至其他页面上，
都会在这页面解决。

举个例子，大家应该都用过gmail吧!!!!
相信在收发现间过程中，都能感受到使用上的顺畅，
~~是的，就是通到大肠的那个顺畅感 ! 顺拉！（碰杯！！！~~
当你在撰写信件，或者收信时，都不会感受到画面的跳动，
~~就是那不注意的一小下！那令眼睛毁花的一小下，真的粉北送！！~~
而没有那一小下，就是所谓单页应用的特色！
当你在页面按另一封邮件的时候，SPA网页只会换掉邮件内容，
并把这封邮件变为已读的icon，网页中其他的东西都没有动过，
这有传输资料就很少，因为他不是整页换掉，速度就会快很多，用起来就是爽！

~~BUT ，没错！就是那个把特！~~
如果将SPA这个做法用到部落格，就会出现问题罗！
还记得上面提到的，他第一次下载是一个没有实际内容的框架，
这个就会被爬虫读取，所以…对网站的搜寻器来讲，
这一页的网页就是一个框架的空壳，
爬虫也不一定会等Javascript抓回实际内容过程，
也就是说你的网页在搜寻结果上是没有办法出现，
自然你的搜寻流量就打水漂拉～就算真的有读取，
也不能保证能100%读取，
对SEO（搜寻引擎最佳化）非常不友好啊～

所以该选择什麽呢？小朋友才做选择拉（拍肩）

SPA的优点：

速度快

能够离线使用

SPA的缺点：

使用者操作太快，前端就不能保证每次都能得到正确的 Server 资料
（例子：点进商品 A → 快速按上一页 → 快速点进商品B → 画面显示商品 A 资料）

内容由 JavaScript 动态产生，浏览器载入并且执行 JavaScript、等 Response 回传後才会看到画面，因此SEO表现较差。

程序新手，我是麻瓜，每天一点一滴学习，虽然跑不快！
但认真！感谢您的收看！
明天见～嘻