内容简介:上一篇在谈到parms路由和query路由的时候,留了一个坑,在这里还是来解决一下~事实证明,就是我想的那样,可以使用custom server然后重新匹配路由渲染的页面就可以了。不过这样会出现一个小问题,就是在网速过慢的时候重新匹配的页面没渲染出来之前,控制台会出现报错,重新渲染之后消失。这就类似于302,刚开始是404页面,然后被重定向到另一个,哈哈~可以看一下控制台,会出现一个报错,但是这样确实会成功使用params的路由。而且我发现一个问题,第一次进新页面的时候Next.js渲染会特别的慢,不知道
上一篇在谈到parms路由和query路由的时候,留了一个坑,在这里还是来解决一下~事实证明,就是我想的那样,可以使用custom server然后重新匹配路由渲染的页面就可以了。不过这样会出现一个小问题,就是在网速过慢的时候重新匹配的页面没渲染出来之前,控制台会出现报错,重新渲染之后消失。这就类似于302,刚开始是404页面,然后被重定向到另一个,哈哈~
可以看一下控制台,会出现一个报错,但是这样确实会成功使用params的路由。而且我发现一个问题,第一次进新页面的时候Next.js渲染会特别的慢,不知道是不是一个bug,还是我哪里写的有问题,再多研究研究~
报错问题
好吧,去官网github查了一圈,也有人跟我一样提了相同的issue,最后我看了一下发现,原来写法出问题了,虽然可以正常执行,但是会在正确页面出现之前404以下。处女座的我不能忍受还是改回来吧~
// 路由应该这么写 <Link href={`/user/userDetail?username=${text}`} as={`/user/userDetail/${text}`}> <a>{text}</a> </Link> // server.js server.get('/user/userDetail', (req, res) => { return app.render(req, res, `/user/userDetail/${req.query.username}`); }); 复制代码
上面那样就可以了,具体代码在下方~
第二坑 - 开发模式下首次加载antd不出样式
最后,我还是把antd的css形式换成了less形式,一方面是因为确实配置主题色以及其他覆盖样式还是有需求的,另一方面是重点了,在开发模式下,next.js打开新页面的pending time实在过长,这个过长的pending time导致第一次antd的样式加载不出来。而换成less的模式虽然也很慢,但是样式却不会发生改变,所以还是切换到less了。
- antd-css模式
- antd-less模式
可以看出来,同样是到新页面去渲染一个table组件,虽然第一次加载时间都很长,但是less的形式是可以加载出来css的。哈哈。所以还是使用less吧,开发模式下,所有页面的第二次加在都没有问题,速度也很快。
next.js的生产环境还是比较快的,开发环境打开第一次新页面确实有点慢,基本都要10s左右...
生产模式
上面截图也看到了,Next.js在开发模式下页面第一次的pending时间是非常长的,基本都要达到10s左右,当然也可能是我写的代码有问题?不过我去官方demo下面随便用了一个,也是很慢的。
不禁我就思考了,如果上线项目第一次加载也这么慢,怎么可以呢?正在我考虑要不要半途而废的时候,我尝试了一下用生产模式打包一下,如果打包完生产环境首次加载也特别慢,那么不扯淡呢吗?拜拜了您嘞~
因为我用的custom-server,所以scripts变成了下面这样:
"scripts": { "dev": "node server.js", "build": "next build", "start": "set NODE_ENV=production && node server.js" }, 复制代码
打包完之后也是正常访问,下面是打包完以后的访问效果。
可以看到,无论是首次加载页面,还是第一次进入其他页面,速度都是挺快的~所以我原谅了开发时的慢速度了,还是接着学吧,O(∩_∩)O哈哈~
以上所述就是小编给大家介绍的《Next.js 踩坑入门系列(四)— 中期填坑》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 美共和党全国委员会确认在今年中期选举期间遭到网络攻击
- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UNIX 时间戳转换
UNIX 时间戳转换
HEX HSV 转换工具
HEX HSV 互换工具