Next.js项目实战踩坑指南(笔记)


Posted in Javascript onNovember 29, 2018

前言

github: https://github.com/code-coder/next-mobile-complete-app

已经用Next.js快两个月了,项目已经提测了,这里总结一下开发过程中,以及在部署的时候遇到一些棘手的问题。

疑难杂症

1. 移动端overflow:auto,ios滚动卡顿

解决方案: 主容器增加样式-webkit-overflow-scrolling: touch;

2. dev mode路由跳转后样式丢失

原因:dev下样式根据页面动态加载,浏览器缓存文件styles.chunk.css造成样式不更新。

解决方案: 利用版本号强制重载样式文件

示例1:

// 在Layout组件中
<Head>
  <title>{title}</title>
  {process.env.NODE_ENV !== 'production' && (<link rel="stylesheet" type="text/css" href={'/_next/static/css/styles.chunk.css?v=' + Router.route} />)}
</Head>

示例2:

// 在_app.js中
import Router from 'next/router';

Router.events.on('routeChangeComplete', () => {
 if (process.env.NODE_ENV !== 'production') {
  const els = document.querySelectorAll('link[href*="/_next/static/css/styles.chunk.css"]');
  const timestamp = new Date().valueOf();
  els[0].href = '/_next/static/css/styles.chunk.css?v=' + timestamp;
 }
});

3、Android 键盘弹起窗口会变小,有 flex 或者 position 是 absolute 或者 fixed 布局会变

这里直接把body.height设置为浏览器的窗口高度。

doc.body.style.height = docEl.clientHeight + 'px';

4、跨域及传递cookie的问题

第一步,登录成功后api服务器返回cookie。

跨域访问要接收cookie,解决办法也很简单只需要API服务器根据请求地址设置Access-Control-Allow-Origin的值为请求地址的ip就可以了(测试环境可以动态设置这个ip,生产可以设置指定的域名或者ip地址)。

第二步,浏览器自动缓存,再后续请求中携带此cookie。

fetch或axois请求都默认不带cookie,需要通过option配置打开。

- fetch要配置`{ credentials: 'include', mode: 'cors' }`

- axois要配置`axios.defaults.withCredentials=true;`

另外,还可以通过服务器代理走内网访问api。

以下为我们公司所采用的解决方案:

为了解决跨域以及部署不同服务器需要修改 api 地址的问题,我们使用 前端服务器代理 + dns 解析。整个流程如下图所示:

Next.js项目实战踩坑指南(笔记)

通过NODE_ENV环境变量来配置开发和生产的地址。

const isProd = process.env.NODE_ENV === 'production';
process.env.BACKEND_URL = isProd ? '/relative_url' : 'http://text.api.com';
process.env.BACKEND_URL_SERVER_SIDE = isProd ? 'http://bff.api.com' : 'https://prod.api.com';

module.exports = {
 'process.env.BACKEND_URL': process.env.BACKEND_URL, // 客户端渲染请求,是个相对地址,在前端服务器被代理到API服务器
 'process.env.BACKEND_URL_SERVER_SIDE': process.env.BACKEND_URL_SERVER_SIDE // 服务端渲染请求,是API服务器地址,仅供内网访问
};

5、服务端渲染时带 cookie 请求的问题

这里用到一个插件叫nookies。

在_app.js中全局解析cookies注入ctx:

static async getInitialProps({ Component, ctx }) {
  let pageProps = {};

  let cookies = {};
  if (ctx.isServer) {
   cookies = parseCookies(ctx);
  }
  if (Component.getInitialProps) {
   pageProps = await Component.getInitialProps({ ctx, cookies });
  }

  return { pageProps };
 }

然后就可以通过页面请求:

static async getInitialProps({ ctx }) {
  const { store, req, isServer, cookies } = ctx;
  store.dispatch(setNav({ navTitle: 'Home', isHome: true }));
  store.dispatch(getDataStart({ settings: { isServer, cookies } }));
 }

proxyFetch中就会根据isServer的值来分辨是服务端API请求还是客户端API请求。服务端请求会把cookies写入Fetch的header中。

const prefix = isServer ? process.env.BACKEND_URL_SERVER_SIDE : process.env.BACKEND_URL;
isServer && (this.headers['cookie'] = 'EGG_SESS=' + cookies['EGG_SESS'] + ';';)
// fetch核心
fetch(prefix + url, { headers: this.headers, ...this.init, ...options })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 #Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 #Javascript
js实现每日签到功能
Nov 29 #Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 #Javascript
javascript实现考勤日历功能
Nov 29 #Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 #Javascript
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python3.x实现发送邮件功能
2018/05/22 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python在协程中增加任务实例操作
2021/02/28 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
施工单位安全责任书
2014/07/24 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
Python超详细分步解析随机漫步
2022/03/17 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL