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

栏目: Html · 发布时间: 5年前

内容简介:上一篇在谈到parms路由和query路由的时候,留了一个坑,在这里还是来解决一下~事实证明,就是我想的那样,可以使用custom server然后重新匹配路由渲染的页面就可以了。不过这样会出现一个小问题,就是在网速过慢的时候重新匹配的页面没渲染出来之前,控制台会出现报错,重新渲染之后消失。这就类似于302,刚开始是404页面,然后被重定向到另一个,哈哈~可以看一下控制台,会出现一个报错,但是这样确实会成功使用params的路由。而且我发现一个问题,第一次进新页面的时候Next.js渲染会特别的慢,不知道

上一篇在谈到parms路由和query路由的时候,留了一个坑,在这里还是来解决一下~事实证明,就是我想的那样,可以使用custom server然后重新匹配路由渲染的页面就可以了。不过这样会出现一个小问题,就是在网速过慢的时候重新匹配的页面没渲染出来之前,控制台会出现报错,重新渲染之后消失。这就类似于302,刚开始是404页面,然后被重定向到另一个,哈哈~

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

可以看一下控制台,会出现一个报错,但是这样确实会成功使用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模式
Next.js 踩坑入门系列(四)— 中期填坑
  • antd-less模式
Next.js 踩坑入门系列(四)— 中期填坑

可以看出来,同样是到新页面去渲染一个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"
  },
复制代码

打包完之后也是正常访问,下面是打包完以后的访问效果。

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

可以看到,无论是首次加载页面,还是第一次进入其他页面,速度都是挺快的~所以我原谅了开发时的慢速度了,还是接着学吧,O(∩_∩)O哈哈~


以上所述就是小编给大家介绍的《Next.js 踩坑入门系列(四)— 中期填坑》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS3专业网页开发指南

CSS3专业网页开发指南

Peter Gasston / 李景媛、吴晓嘉 / 人民邮电出版社 / 2014-3-1 / 45.00元

《CSS3专业网页开发指南》是英国著名Web前端开发工程师Peter Gasston对CSS3高级技术的全面介绍。书中既有CSS3的发展历史、基本语法等入门知识介绍,也涵盖了媒体查询、选择器、伪类与伪元素、网页字体、文本排版、图形处理、动画、布局等CSS3前端开发必不可少的知识,还介绍了CSS3的未来发展方向。全书共分为17章,作者在每一章的讲解中都结合了大量的实例,同时也不忘介绍每一项技术的发展......一起来看看 《CSS3专业网页开发指南》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具