# 简介

项目例子https://github.com/gitlwz/react-ssr.git (opens new window)

# next.js

react-srr 我们主要围绕着next.js来做。

# 概念

  1. 「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;
  2. 「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;
  3. 「同构渲染」指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

# 前端渲染的优势

  1. 局部刷新。无需每次都进行完整页面请求
  2. 懒加载。如在页面初始时只加载可视区域内的数据,滚动后 rp 加载其它数据,可以通过 react-lazyload 实现
  3. 富交互。使用 JS 实现各种酷炫效果
  4. 节约服务器成本。省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要服务器支持静态文件即可
  5. 天生的关注分离设计。服务器来访问数据库提供接口,JS 只关注数据获取和展现
  6. JS 一次学习,到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

# 后端渲染的优势

  1. 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面(首屏性能)
  2. 有利于SEO
  3. 服务端渲染不用关心浏览器兼容性问题(随意浏览器发展,这个优点逐渐消失)
  4. 对于电量不给力的手机或平板,减少在客户端的电量消耗很重要