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

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

内容简介:上一篇在谈到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 踩坑入门系列(四)— 中期填坑》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

精通正则表达式

精通正则表达式

[美] Jeffrey E.F.Friedl / 余晟 / 电子工业出版社 / 2012-7 / 89.00元

《精通正则表达式(第3版)》内容简介:随着互联网的迅速发展,几乎所有工具软件和程序语言都支持的正则表达式也变得越来越强大和易于使用。《精通正则表达式(第3版)》是讲解正则表达式的经典之作。《精通正则表达式(第3版)》主要讲解了正则表达式的特性和流派、匹配原理、优化原则、实用诀窍以及调校措施,并详细介绍了正则表达式在Perl、Java、.NET、PHP中的用法。《精通正则表达式(第3版)》自第1版开......一起来看看 《精通正则表达式》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具