Next.js 踩坑入门系列(四)— 中期填坑

Next.js 踩坑入门系列(四)— 中期填坑

技术杂谈小彩虹2021-10-14 9:22:0870A+A-

Next.js 踩坑入门系列

填坑

第一坑 - params形式路由

上一篇在谈到params路由和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哈哈

总结&&预告

这一篇文章有点水,但是我觉得还是挺有必要的,因为可能不光是我,很多人也都会遇到这个问题,如果不解决的话可能半路就放弃了,所以想在中间加上这一篇踩坑以及解决办法~
代码地址

下一篇:引入状态管理Redux+redux-saga

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们