最近在寫 koa 的時候想到,若是我部分代碼提供api,部分代碼支持ssr,那我應該如何寫呢?(不想拆成 2個服務的狀況下)並且最近寫的項目裏面也用過一些服務端渲染,如
nuxt
,本身也搭過next
的項目,確實開發體驗都很是友好,可是友好歸友好,具體又是如何實現的呢,諸位有沒有考慮過?javascript本着求真務實的折騰態度,選了
react
做爲研究對象(主要是vue
寫的有點多,噁心了),那下面就簡單就以最小成本寫一個react
的服務端渲染 democss
react 16
+ webpack3
+ koa2
html
看看它是如何實現服務端渲染的,here we go!前端
無非就是兩點vue
直接放文章不作贅述,前端後端分離,怎麼解決SEO優化的問題呢? - 知乎,
一句話介紹就是,如今咱們作的大可能是SPA網站,全部頁面啊數據啊都是ajax來的,搜索引擎的spider來收錄網頁的時候,發現全空?那麼你以爲你的網站收錄的權重跟效果是好仍是很差?java
而咱們對SEO優化,也是下面內容所描述的核心就是:node
下面是重點!react
讓服務器把有內容的HTML返回給咱們,事件的話瀏覽器再渲染一次來進行掛載
新建一個 ssr 項目,並在項目中初始化 npmwebpack
mkdir ssr && cd ssr npm init
下面的代碼咱們用到了 import
jsx
等語法,node環境是不支持的,因此須要配置babelgit
在當前項目中新建文件 server.js
跟index.js
,而後
babel的入口, index.js代碼以下
require('babel-core/register')() require('babel-polyfill') require('./server')
咱們項目的入口, server.js代碼以下
import Koa from 'koa' const app = new Koa() // response app.use((ctx) => { ctx.body = 'Hello Koa' }) app.listen(3000) console.log("系統啓動,端口:3000")
根目錄下新建一個.babelrc文件
內容是:
{ "presets": ["react", "env"] }
安裝上面所須要的依賴
npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev npm i koa --save
配置啓動腳本
package.json "scripts": { "dev": "nodemon index.js", }
到這裏你運行 npm run dev
打開localhost:3000
你就會看到 hello Koa
了
是否是很簡單就起了一個服務
cnpm install react react-dom --save
在根目錄下新建一個app文件夾,並在文件夾中個新建一個main.js
main.js代碼以下
import React from 'react' export default class Home extends React.Component { render () { return <div>hello world</div> } }
修改以前server.js
import Koa from 'koa' import React from 'react' import { renderToString } from 'react-dom/server' import App from './app/main' const app = new Koa() // response app.use(ctx => { let str = renderToString(<App />) ctx.body = str }) app.listen(3000) console.log('系統啓動,端口:8080')
這個時候再 npm run dev
你就會看到屏幕上出現hello world
再打開chrome 開發者工具查看咱們的請求:
咱們的最簡單的react組件變成str傳了進來
這裏咱們用到了一個方法:
renderToString – 其實就是將組件渲染成字符串
目前爲止,咱們都尚未給組件加上事件等交互行爲,下面那讓咱們來試一下
修改main.js的代碼
import React from 'react' export default class Home extends React.Component { render () { return <div onClick={() => window.alert(123)}>hello world</div> } }
再刷新一下咱們的頁面,,咦,是否是沒有什麼卵用
那是由於後端只能講組件渲染成一串html的字符串,事件綁定等事情都是須要在瀏覽器端執行的
那事件咱們改怎麼綁定上去呢?
那你確定就會猜到,既然服務器渲染出來的是一串html,掛載事件的方式是否是在瀏覽器從新渲染一次就行了呢
說幹就幹
在根目錄下面新建一個 webpack.config.js
下面是webpack.config.js的內容:
var path = require('path') var webpack = require('webpack') module.exports = { entry: { main: './app/index.js' }, output: { filename: '[name].js', path: path.join(__dirname, 'public'), publicPath: '/' }, resolve: { extensions: ['.js', '.jsx'] }, module: { loaders: [ {test: /\.jsx?$/, loaders: ['babel-loader'], } ] } }
上面的配置將entry設置成了app/index.js文件
那咱們就建立一個
下面是app/index.js的代碼:
import Demo from './main' import ReactDOM from 'react-dom' import React from 'react' ReactDOM.render(<Demo />, document.getElementById('root'))
由於瀏覽器渲染須要將根組件掛載到某個dom節點上,因此給咱們的react代碼設置一個入口
這個時候就有一個問題,就是,document對象node環境下並不存在,那怎麼解決的呢?
不存在?不存在那我就不用就行了,SSR核心就是讓請求的url裏面返回具體HTML內容,事件什麼的並不care,那麼我就把根組件直接renderToString
返回出來就行了唄
下面修改咱們的服務代碼,讓代碼支持服務器渲染
新增一點依賴
cnpm i --save koa-static koa-views ejs
修改server.js
的代碼
import Koa from 'koa' import React from 'react' import { renderToString } from 'react-dom/server' import views from 'koa-views' import path from 'path' import Demo from './app/main' const app = new Koa() // 將/public文件夾設置爲靜態路徑 app.use(require('koa-static')(__dirname + '/public')) // 將ejs設置爲咱們的模板引擎 app.use(views(path.resolve(__dirname, './views'), { map: { html: 'ejs' } })) // response app.use(async ctx => { let str = renderToString(<Demo />) await ctx.render('index', { root: str }) }) app.listen(3000) console.log('系統啓動,端口:8080')
下面新建咱們的渲染模板
新建一個views文件夾
裏面新建一個index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <base href="/client"> </head> <body> <div id="root"><%- root %></div> <script src="/main.js"></script> </body> </html>
這個 html
裏面能夠放一些變量,好比這個<%- root %>
,就是等下要放renderToString結果的地方/main.js
則是react構建出來的代碼
下面直接來測試一下咱們的代碼
1. 在 package.json裏面 新增: "scripts": { "dev": "nodemon index.js", "build": "webpack" }, 2. 運行 npm run build, 構建出咱們的react代碼 3. npm run dev
點擊一下代碼,是否是會 alert(123)
撒花,恭喜你,一個最簡單服務器渲染就已經完成
到這裏核心的思想就都已經講完了,總結來講就下面三點:
react
根組件 renderToString
渲染成字符串一塊兒返回前端render
一次原理就是這麼簡單
可是具體開發的時候還會有各類各樣的需求,好比:
須要 實時構建
須要支持熱更新
react-router
, redux
或者mobx
怎麼支持呢 => 須要完善的生態
.etc
這些問題都是用完 官方腳手架以後就回不去了的,因此更多的配置能夠參考下面的repo(是一個工具鏈完善的最小實現),歡迎提PR
GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works
目前你能夠在裏面找到 react + react-router + mobx + postcss + 熱更新
的配置,除了react-router
的配置有些差異,其餘都跟client端
差異不大
That’s all.
3-17 經過 Node.js API 啓動 Webpack · 深刻淺出 Webpack
Koa2 + React + Webpack熱加載部署方案 | Nekoの喵窩
webpack - koa服務端熱更新問題 - SegmentFault
轉 nodemon 基本配置與使用 - {前端開發} - 博客園
React 服務端渲染緩慢緣由淺析 - 某熊的全棧之路 - SegmentFault
ReactDOMServer - React