安利一下next， react實(shí)現(xiàn)ssr超級(jí)好用的東西哈哈哈哈哈哈。
用它的理由
雖然react有提供renderToString和renderToStaticMarkup（第一個(gè)是生成完整的HTML， 第二個(gè)不包含額外的額外的data屬性）
理論上只需要node搞下就可以了， 如果配合express、koa等框架就好了。
但是也是需要一些配置， 而next.js 就是零配置。
關(guān)于redux等方案， next.js也有例子
設(shè)置head tag， ajaxData 等都很方便
關(guān)于本博客
會(huì)出現(xiàn)最佳實(shí)踐
在寫(xiě)這個(gè)的時(shí)候，我是一步一步運(yùn)行， 以保證每一個(gè)細(xì)節(jié)都不會(huì)露。
如果出現(xiàn)錯(cuò)誤， 那么就是next可能更新了， 或者npm跟nodejs的版本不對(duì)， 下面是next的github網(wǎng)址
以文字直播的形式寫(xiě)的
USE
mkdir一個(gè)工作區(qū)
mkdir mysyNext
cd mysyNext
install
npm install --save next react react-dom
初始化package.json
npm init -y
在package.json script里面添加這三條命令（dev、build、start）
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
在根目錄下新建pages文件
mkdir pages
新建首頁(yè)
cd pages
vim index.js
i // 寫(xiě)入內(nèi)容
export default () => <div>Welcome to next.js!</div>
:wq // 退出
執(zhí)行
// 在執(zhí)行的時(shí)候， 請(qǐng)保證3000端口沒(méi)被占用
// 如果端口已經(jīng)存在， 要執(zhí)行自定義端口， npm run dev -- -p <your port here>.
npm run dev
-----·
mmp, 遇到了一個(gè)錯(cuò)誤（沒(méi)遇到錯(cuò)誤的不管他）， next不存在， 原來(lái)剛剛install的時(shí)候不是在工作區(qū)（mysyNext）, 這時(shí)候把文件給我拷回去, cd回退到工作區(qū)的上一級(jí)
mv node_modules ./mysyNext/
然后把上一級(jí)的package.json里的dependencies拷貝添加到工作區(qū)的package.json里， 拷貝如下
"dependencies": {
"next": "^6.0.3",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"redux": "^4.0.0"
}
-----·
再執(zhí)行下。 這時(shí)候， 工作區(qū)域偷偷出現(xiàn)了.next的文件， 接著執(zhí)行完成。
打開(kāi)http://localhost:3000
這時(shí)候工作區(qū)長(zhǎng)這樣
參考鏈接
https://github.com/zeit/next.js
https://redux.js.org/recipes/server-rendering
https://github.com/zeit/next.js/tree/master/examples/with-redux
