Next.js踩坑入門系列（四）— 中期填坑

luffyZh發表於2018-09-06
JS

Next.js踩坑入門系列

填坑

第一坑 - params形式路由

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

總結&&預告

這一篇文章有點水，但是我覺得還是挺有必要的，因為可能不光是我，很多人也都會遇到這個問題，如果不解決的話可能半路就放棄了，所以想在中間加上這一篇踩坑以及解決辦法~
程式碼地址

下一篇：引入狀態管理Redux+redux-saga

相關文章