溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何優化Next.js頁面渲染，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
第一個問題：宣稱前后臺同構的Next.js為何會出現卡頓現象？
Next.js 中的特有生命周期hook 函數 getInitialProps會在頁面渲染的時候判斷瀏覽器是否為首次渲染，如果是則是服務端渲染網頁，如果不是則是客戶端渲染。在頁面首次渲染的時候，會加載 commons.xxxxx.js 文件，這個文件中打包了react.js、next.js 以及相關的框架代碼也就是如果是客戶端渲染打包后的 commons.xxxxx.js 負載了整個前端的頁面邏輯，這個文件相對比較大一般會在180kb以上。如果僅從文件大小角度來說，這個文件并不算大,就算利用了next.js 的 preload機制把文件大小放到300kb以上，也還行。但是一旦這個文件阻塞了頁面的渲染，頁面的渲染要等到 commons.xxxxx.js 加載完畢之后才渲染，那問題就來了。
在next7中使用的打包工具是webpack4，這在打包和加載過程有一個比較蠢的機制（或許僅僅是我個人觀點），那就是但凡React DOM上綁定了style 這些DOM都不會在服務端渲染出來，而是打包抽離成一個小的js文件，在 commons.xxxxx.js 加載完畢之后，再加載這個js,將DOM和內聯style渲染到HTML。這就在某種程度上導致了next.js首次渲染是SSR失效了，更為糟糕的是卡頓感十足。
可能有人會說，那就不要寫內聯style不就好了。但是事實是在大量的后臺數據動態渲染頁面和用戶自定義頁面的情況下，不可能做到完全不寫內聯樣式，而去傻乎乎地寫一堆className。
所以我們要解決一個問題那就是如何保證，內聯style的react dom在首次渲染頁面的時候是服務器端直接輸出后扔給后臺，而不是讓 commons.xxxxx.js 卡卡卡卡卡，然后砰的一下蹦出來。
要解決上一個問題，首先要了解Next.js是如何渲染頁面的？
在Next.js的規則中，所有頁面級的代碼都是寫在pages文件夾中，比如/pages/home:
export default () => (<div>你瞅啥？這是home頁</div>)
而其框架內置的Document組件中，已經幫開發者配置好傳統的HTML文件的 <head> , <body> 這些標簽作為靜態資源的外殼。Document組件中有一個 renderPage() 方法，如果代碼正常運行，該方法就會將pages文件夾中的代碼和它外部同步渲染到瀏覽器中。如果開發者希望自定義Document組件只需添加 /pages/_document.js 文件即可。
renderPage()本質是一個回調函數，它的作用只有一個那就是 執行React源碼中渲染邏輯 同步加載到Next.js的Document組件中形成DOM節點。
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
static getInitialProps ({ renderPage }) {
// renderPage()位于next.js特有生命周期函數getInitialProps中。
return renderPage();
}
render () {
return (
<html>
<Head>
<title>沒見過標題黨嗎？</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}服務端渲染樣式
為了能讓服務器端渲染樣式，我們首先得先做兩件事：
在頁面首次加載的時候，也就是所謂的SSR.能讓 renderPage 方法在服務器端就能對React Dom進行解析，讓HTML歸HTML，CSS歸CSS；
能讓 Document 組件在頁面切換時，能及時更新 <head> ,這樣不同的頁面就能加載自己所需的script,style。
解決方案的登場
隆重介紹神器 styled-components 出場， styled-components 在github上目前為止已經超過1萬stars，它的設計初衷在于在服務端渲染的時候，同時渲染出一個ServerStyleSheet，然后把這個ServerStyleSheet送入React DOM樹中。它主要就做兩件事：
把組件中 styles 抽離到 <style> 標簽中；
把 <style> 標簽放到 <head> 中
下面就是一段如何正確使用ServerStyleSheet的姿勢步驟：
import { ServerStyleSheet } from "styled-components";
static getInitialProps ({ renderPage }) {
const sheet = new ServerStyleSheet()
const transform = (App) => {
return sheet.collectStyles(<App />);
}
const styleTags = sheet.getStyleElement()
const page = renderPage(transform);
return { ...page, styleTags };
}
render(){
return(
<html lang="zh-Hans">
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="Kanseefoil"/>
<link rel="shortcut icon" href="/static/favicon.ico" rel="external nofollow" ></link>
{this.props.styleTags}
</Head>
</html>
);
}上面的代碼已經完美跟大家展示了如何將內聯style抽離出dom,然后通過 <link style> 的方法渲染樣式, 那么問題來了，如何在打包解析react dom時，給服務器一個"純潔、干凈、無暇"的DOM呢？
這個時候就需要使用 babel-plugin-styled-components 包，在babel中進行解析。
代碼如下：
{
"presets": [
"next/babel"
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
}以上是“如何優化Next.js頁面渲染”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
