附件下載：next-ssr.zip
create-react-app搭建的項(xiàng)目恕刘，已經(jīng)開發(fā)完成了照雁，想改成服務(wù)端渲染矮湘，看了很多關(guān)于react服務(wù)端渲染的文章拴孤，對(duì)于怎么實(shí)現(xiàn)還是云里霧里的豆挽。先體驗(yàn)一下用Next.js實(shí)現(xiàn)服務(wù)端渲染吧。
客戶端渲染和服務(wù)端渲染的區(qū)別
1. 客戶端渲染（csr）
頁面第一次訪問時(shí)加載所有資源含蓉，由js解析生成dom
打開頁面 -> 右鍵 -> 顯示頁面源代碼频敛，可以看到只有一個(gè)id為root的空div，內(nèi)容由js控制渲染馅扣。
客戶端渲染頁面源代碼
優(yōu)點(diǎn)：
- 資源一次性加載斟赚，后續(xù)頁面加載快，體驗(yàn)好
- 減輕服務(wù)器壓力岂嗓，與服務(wù)器只有ajax交互
缺點(diǎn):
- 首次加載慢汁展，經(jīng)常被吐槽
- 不利于SEO，搜索引擎抓取到的就上面圖片的內(nèi)容（可以使用Rendora解決）
2. 服務(wù)端渲染（ssr）
服務(wù)器生成完整的html厌殉，前端直接展示
優(yōu)點(diǎn)：
- 客戶端只負(fù)責(zé)渲染html食绿，首次加載快
- 對(duì)搜索引擎友好，利于SEO優(yōu)化
- 頁面渲染時(shí)與接口的交互在服務(wù)端完成公罕，減少http請(qǐng)求提升速度（onClick等事件發(fā)的請(qǐng)求還在是客戶端）
缺點(diǎn):
- 增加服務(wù)器壓力
上手Next.js
- 新建文件夾 next-ssr
- 初始化工程器紧，進(jìn)入next-ssr目錄執(zhí)行
npm init命令后一路回車 - 安裝依賴
npm i next react react-dom axios --save --registry=https://registry.npm.taobao.org - 修改package.json文件的scripts為
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next build && next export"
},
- 新建目錄和文件 pages/index.js
import React, { Component } from 'react'
import axios from 'axios'
export class index extends Component {
static async getInitialProps() {
const res = await axios.post('http://www.yocoder.cn:8080/test')
console.log(res)
return { data: JSON.stringify(res.data) }
}
render() {
return (
<div>
<h2>React服務(wù)端渲染 Next.js 實(shí)例</h2>
測(cè)試接口返回?cái)?shù)據(jù)：{this.props.data}
</div>
)
}
}
export default index
-
npm run dev啟動(dòng)服務(wù)查看
啟動(dòng)服務(wù)
體驗(yàn)感受
Next.js用起來真的很簡(jiǎn)單，開箱即用楼眷，即使之前沒接觸過铲汪，也可以快速的開發(fā)部署React服務(wù)端渲染」蘖基于文件系統(tǒng)的路由掌腰，不需要額外的配置，根據(jù)文件路徑訪問张吉，清晰簡(jiǎn)潔齿梁。
適合從零開始的項(xiàng)目，老項(xiàng)目想改造還是很費(fèi)力的肮蛹。至于我的訴求“create-react-app搭建的項(xiàng)目勺择，已經(jīng)開發(fā)完成了，想改成服務(wù)端渲染”伦忠，改造成本更少的方式還有待探索省核。
其他
更詳細(xì)的文檔請(qǐng)查看：https://nextjs.frontendx.cn/docs
