Vercel是一个用于静态站点和无服务器功能的云平台。Next.js是由Vercel基于React框架。
Next.js的优点
- 代码自动分割
- 基于页面的路由方案，预加载页面
- 基于Webpack的开发环境，支持热模块替换
- 既能感受到单页应用的好处，又能兼顾到SEO
SPA的优点是：良好的交互体验，内容改变的时候不需要重新加载整个页面；良好的前后端工作分离模式，可以共用一套后端程序；减轻服务器压力，后端不再考虑展示逻辑和页面合成。
SPA的缺点是：不利于SEO，首屏加载慢。SEO可以使用SSR和页面预渲染优化；首屏加载可以使用CDN、预加载、异步加载组件、服务端渲染优化。
Next.js基于React改进，既保留了SPA的优点，也可以做服务端渲染。
- 标签和标签比较
Link组件实现客户端的路由切换，使用<Link prefetch>使链接和预加载在后台同时运行。Link是一个高阶组件，在Link组件上设置props无效，只接受href和类似的props。如果想要向其添加props，则需要对下级组件进行添加。 -
1、Vue鼓励你去写近似常规HTML的模板，写起来很接近HTML元素，只是多了一些属性。React推荐使用JS的语法扩展JSX写。
2、React中使用
setState()更新状态，在Vue中，数据由data属性在Vue对象中进行管理。 -
从打包体积和打包速度两方面：
1、优化Loader；HappyPack将Loader的同步执行转为并行；DLLPlugin将特定的类库提前打包然后引入，减少打包次数；压缩代码。
2、按需加载，首页加载文件越小越好，将每个页面单独打包成一个文件；Scope Hoisting分析模块之间的关系，尽可能的把打包出来的模块合并到一个函数中；Tree shaking删除项目中未被引用的代码。
-
- 身份验证：为开发者分配AccessKey和SecretKey，用于接口加密。
- 防止篡改：使用参数签名，参数加SecretKey使用MD5加密得到Sign，请求携带AccessKey+Sign。
- 重放攻击：使用timestamp+nonce，时间戳验证请求是否有效，nonce值唯一的随机字符串，为每条请求提供唯一标识符。
- Token机制：用户登陆成功后，服务器返回一个Token，用户每次发送请求都携带Token，服务端校验Token的合法性。
- 过载保护：对接口访问频率做限制。
- ...
本文使用 mdnice 排版
