# 简介
项目例子https://github.com/gitlwz/react-ssr.git (opens new window)
# next.js
react-srr 我们主要围绕着next.js来做。
# 概念
- 「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;
- 「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;
- 「同构渲染」指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。
# 前端渲染的优势
- 局部刷新。无需每次都进行完整页面请求
- 懒加载。如在页面初始时只加载可视区域内的数据,滚动后 rp 加载其它数据,可以通过 react-lazyload 实现
- 富交互。使用 JS 实现各种酷炫效果
- 节约服务器成本。省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要服务器支持静态文件即可
- 天生的关注分离设计。服务器来访问数据库提供接口,JS 只关注数据获取和展现
- JS 一次学习,到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用
# 后端渲染的优势
- 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面(首屏性能)
- 有利于SEO
- 服务端渲染不用关心浏览器兼容性问题(随意浏览器发展,这个优点逐渐消失)
- 对于电量不给力的手机或平板,减少在客户端的电量消耗很重要