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 相关文章推荐
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
vue 实现上传组件
May 31 Vue.js
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
Laravel 队列使用的实现
2019/01/08 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
详解将Django部署到Centos7全攻略
2018/09/26 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
大四本科生的自我评价
2013/12/30 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python