搜尋
首頁web前端js教程詳細講解有關實作react伺服器渲染問題

這篇文章主要介紹了從零開始最小實現react伺服器渲染詳解,現在分享給大家,也給大家做個參考。

前言

最近在寫 koa 的時候想到,如果我部分程式碼提供api,部分程式碼支援ssr,那我該如何寫呢? (不想拆成2個服務的情況下)
而且最近寫的項目裡面也用過一些服務端渲染,如nuxt,自己也搭過next的項目,確實開發體驗都非常友好,但是友好歸友好,具體又是如何實現的呢,各位有沒有考慮過?

本著求真務實的折騰態度,選了react作為研究對象(主要是vue寫的有點多,噁心了),那下面就簡單就以最小成本寫一個react的服務端渲染demo

用到的技術堆疊

react 16 webpack3 koa2

看看它是如何實現服務端渲染的,here we go!

為什麼要用服務端渲染

優點

無非就是兩點

  1. #SEO 友善

  2. 加快首屏渲染,減少白屏時間

那麼問題來了什麼是SEO

一句話介紹就是,現在我們做的大多是SPA網站,所有頁面啊資料啊都是ajax來的,搜尋引擎的spider來收錄網頁的時候,發現全空?那你覺得你的網站收錄的權重跟效果好還是不好?

而我們對SEO優化,也是下面內容所描述的核心就是:

下面是重點!

讓伺服器把有內容的HTML傳回給我們,事件的話瀏覽器再渲染一次來進行掛載

建置koa 環境

新建一個ssr 項目,並在專案中初始化npm

mkdir ssr && cd ssr
npm init

下面的程式碼我們用到了import jsx 等語法,node環境是不支援的,所以需要設定babel

#在目前專案中新建檔案app.js跟index.js,然後

babel的入口, index.js程式碼如下

require('babel-core/register')()

require('babel-polyfill')
require('./app')

我們專案的入口,app.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了

是不是很簡單就起了一個服務

安裝React

cnpm install react react-dom --save

在根目錄下新建一個app資料夾,並在資料夾中新建一個main.js

main.js程式碼如下

import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p>hello world</p>
 }
}

修改之前server.js

import Koa from &#39;koa&#39;
import React from &#39;react&#39;
import { renderToString } from &#39;react-dom/server&#39;
import App from &#39;./app/main&#39;

const app = new Koa()

// response
app.use(ctx => {
 let str = renderToString(<App />)

 ctx.body = str
})

app.listen(3000)

console.log(&#39;系统启动,端口:8080&#39;)

這個時候再npm run dev

你就會看到螢幕上出現hello world

再開啟chrome 開發者工具查看我們的請求:

我們的最簡單的react元件變成str傳了進來

這裡我們用到了一個方法:

renderToString – 其實就是將元件渲染成字串

目前為止,我們都還沒有給元件加上事件等互動行為,下面那讓我們來試試

修改main .js的程式碼

import React from &#39;react&#39;

export default class Home extends React.Component {
 render () {
  return <p onClick={() => window.alert(123)}>hello world</p>
 }
}

再刷新一下我們的頁面,,咦,是不是沒有什麼卵用

那是因為後端只能講元件渲染成一串html的字串,事件綁定等事情都是需要在瀏覽器端執行的

那事件我們改怎麼綁定上去呢?

那你一定會猜到,既然伺服器渲染出來的是一串html,掛載事件的方式是不是在瀏覽器重新渲染一次就好了呢

說乾就乾

配製webpack

在根目錄下方新建一個webpack.config.js

下面是webpack.config.js的內容:

var path = require(&#39;path&#39;)
var webpack = require(&#39;webpack&#39;)

module.exports = {
 entry: {
  main: &#39;./app/index.js&#39;
 },
 output: {
  filename: &#39;[name].js&#39;,
  path: path.join(__dirname, &#39;public&#39;),
  publicPath: &#39;/&#39;
 },
 resolve: {
  extensions: [&#39;.js&#39;, &#39;.jsx&#39;]
 },
 module: {
  loaders: [
   {test: /\.jsx?$/,
    loaders: [&#39;babel-loader&#39;],
   }
  ]
 }
}

上面的設定將entry設定變成app/index.js檔案

那我們就建立一個

下面是app/index.js的程式碼:

import Demo from &#39;./main&#39;
import ReactDOM from &#39;react-dom&#39;
import React from &#39;react&#39;
ReactDOM.render(<Demo />, document.getElementById(&#39;root&#39;))

因為瀏覽器渲染需要將根元件掛載到某個dom節點上,所以給我們的react程式碼設定一個入口

這個時候就有一個問題,就是,document物件node環境下並不存在,那怎麼解決的呢?

不存在?不存在那我就不用就好了,SSR核心就是讓請求的url裡面返回具體HTML內容,事件什麼的並不care,那麼我就把根組件直接renderToString

返回出來就好了唄

下面修改我們的服務程式碼,讓程式碼支援伺服器渲染

新增一點依賴

cnpm i --save koa-static koa-views ejs

  1. koa-static:處理靜態檔案的中間件

  2. koa-views: 配置模板的中間件

  3. #ejs:一個模板引擎

修改server.js的程式碼

import Koa from &#39;koa&#39;
import React from &#39;react&#39;
import { renderToString } from &#39;react-dom/server&#39;
import views from &#39;koa-views&#39;
import path from &#39;path&#39;

import Demo from &#39;./app/main&#39;
const app = new Koa()
// 将/public文件夹设置为静态路径
app.use(require(&#39;koa-static&#39;)(__dirname + &#39;/public&#39;))
// 将ejs设置为我们的模板引擎
app.use(views(path.resolve(__dirname, &#39;./views&#39;), { map: { html: &#39;ejs&#39; } }))

// response
app.use(async ctx => {
 let str = renderToString(<Demo />)
 await ctx.render(&#39;index&#39;, {
  root: str
 })
})

app.listen(3000)

console.log(&#39;系统启动,端口:8080&#39;)

下面新建我們的渲染範本

新建一個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" rel="external nofollow" >
</head>
<body>
  <p id="root"><%- root %></p>
  <script src="/main.js"></script>
</body>
</html>

這個html 裡面可以放一些變量,像是這個,就是等下要放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)

 tada 撒花,恭喜你,一个最简单服务器渲染就已经完成

到这里核心的思想就都已经讲完了,总结来说就下面三点:

  1. 起一个node服务

  2. 把react 根组件 renderToString渲染成字符串一起返回前端

  3. 前端再重新render一次

原理就是这么简单

但是具体开发的时候还会有各种各样的需求,比如:

  1. 不可能我每次改完代码都重新构建看效果吧 => 需要 实时构建

  2. create-react-app 都是热更新,你还要刷新是不是太蠢了 => 需要支持热更新

  3. 其他一些配套的周边,如: 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端差别不大

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中如何实现页面跳转后返回原页面初始位置

使用vue-router如何设置每个页面的title方法

如何解决Vue.js显示数据的时,页面闪现

以上是詳細講解有關實作react伺服器渲染問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具