這篇文章主要介紹如何優(yōu)化Next.js頁面渲染，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),太康網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:太康等地區(qū)。太康做網(wǎng)站價格咨詢:18982081108

第一個問題：宣稱前后臺同構(gòu)的Next.js為何會出現(xiàn)卡頓現(xiàn)象？

Next.js 中的特有生命周期hook 函數(shù) getInitialProps會在頁面渲染的時候判斷瀏覽器是否為首次渲染，如果是則是服務(wù)端渲染網(wǎng)頁，如果不是則是客戶端渲染。在頁面首次渲染的時候，會加載 commons.xxxxx.js 文件，這個文件中打包了react.js、next.js 以及相關(guān)的框架代碼也就是如果是客戶端渲染打包后的 commons.xxxxx.js 負(fù)載了整個前端的頁面邏輯，這個文件相對比較大一般會在180kb以上。如果僅從文件大小角度來說，這個文件并不算大,就算利用了next.js 的 preload機(jī)制把文件大小放到300kb以上，也還行。但是一旦這個文件阻塞了頁面的渲染，頁面的渲染要等到 commons.xxxxx.js 加載完畢之后才渲染，那問題就來了。

在next7中使用的打包工具是webpack4，這在打包和加載過程有一個比較蠢的機(jī)制（或許僅僅是我個人觀點(diǎn)），那就是但凡React DOM上綁定了style 這些DOM都不會在服務(wù)端渲染出來，而是打包抽離成一個小的js文件，在 commons.xxxxx.js 加載完畢之后，再加載這個js,將DOM和內(nèi)聯(lián)style渲染到HTML。這就在某種程度上導(dǎo)致了next.js首次渲染是SSR失效了，更為糟糕的是卡頓感十足。

可能有人會說，那就不要寫內(nèi)聯(lián)style不就好了。但是事實(shí)是在大量的后臺數(shù)據(jù)動態(tài)渲染頁面和用戶自定義頁面的情況下，不可能做到完全不寫內(nèi)聯(lián)樣式，而去傻乎乎地寫一堆className。

所以我們要解決一個問題那就是如何保證，內(nèi)聯(lián)style的react dom在首次渲染頁面的時候是服務(wù)器端直接輸出后扔給后臺，而不是讓 commons.xxxxx.js 卡卡卡卡卡，然后砰的一下蹦出來。

要解決上一個問題，首先要了解Next.js是如何渲染頁面的？

在Next.js的規(guī)則中，所有頁面級的代碼都是寫在pages文件夾中，比如/pages/home:

export default () => (
你瞅啥？這是home頁
)

而其框架內(nèi)置的Document組件中，已經(jīng)幫開發(fā)者配置好傳統(tǒng)的HTML文件的 , 這些標(biāo)簽作為靜態(tài)資源的外殼。Document組件中有一個 renderPage() 方法，如果代碼正常運(yùn)行，該方法就會將pages文件夾中的代碼和它外部同步渲染到瀏覽器中。如果開發(fā)者希望自定義Document組件只需添加 /pages/_document.js 文件即可。

renderPage()本質(zhì)是一個回調(diào)函數(shù)，它的作用只有一個那就是 執(zhí)行React源碼中渲染邏輯 同步加載到Next.js的Document組件中形成DOM節(jié)點(diǎn)。

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
 static getInitialProps ({ renderPage }) {
  // renderPage()位于next.js特有生命周期函數(shù)getInitialProps中。 
  return renderPage();
 }

 render () {  
  return (
   
    
     
    
    
     
     
    
   
  )
 }
}

服務(wù)端渲染樣式

為了能讓服務(wù)器端渲染樣式，我們首先得先做兩件事：

1. 在頁面首次加載的時候，也就是所謂的SSR.能讓 renderPage 方法在服務(wù)器端就能對React Dom進(jìn)行解析，讓HTML歸HTML，CSS歸CSS；

2. 能讓 Document 組件在頁面切換時，能及時更新 ,這樣不同的頁面就能加載自己所需的script,style。

解決方案的登場

隆重介紹神器 styled-components 出場， styled-components 在github上目前為止已經(jīng)超過1萬stars，它的設(shè)計(jì)初衷在于在服務(wù)端渲染的時候，同時渲染出一個ServerStyleSheet，然后把這個ServerStyleSheet送入React DOM樹中。它主要就做兩件事：

1. 把組件中 styles 抽離到