製作React圖片庫的策略搜索引擎優化

我寫了一個React圖片庫或幻燈片。我需要讓搜索引擎可以索引替代文本，但因爲我的服務器在PHP中，所以React.renderToString的使用受到限制。製作React圖片庫的策略搜索引擎優化

服務器在PHP + MySQL。 PHP使用Smarty，一個體面的PHP模板引擎來呈現HTML。其餘的PHP框架是我自己的。 Smarty模板具有此單笨拙行：

<script> 
    var GalleryData = {$gallery}; 
</script>

其由PHP的控制器功能呈現如下：

return array(
     'gallery'  => json_encode($gallery), 
    );

（$gallery是MySQL查詢的結果表）。

而且我的.js：

React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0));

不是最優雅的設置，但考慮到我的服務器是在PHP中似乎有沒有多大的更好的方法來做到這一點

（？）

我在第一槍時做了一個超級快速修復 - 我從Firebug複製了呈現的HTML，並手動將它插入到數據庫中的新表中。然後，我簡單地從PHP中呈現這些代碼，我們很樂意繼續瀏覽器。

有一個複雜因素，那是因爲React組件只在第一次渲染時插入到DOM中（據我瞭解），並且由於該庫一次只顯示一個圖像幻燈片，所以我必須手動在保存HTML代碼之前，點擊一次所有幻燈片。

但是，現在可以通過CMS編輯替代文本，因此我需要自動執行此過程，或想出一個更好的解決方案。

在Node.js中重寫服務器是不成問題的。

我的第一個猜測是我需要安裝Node，並編寫一個腳本來創建相同的React組件。由於輸入數據（包括ALT文字）必須來自MySQL的，我有幾個選擇：

從注連接到MySQL數據庫，並複製查詢
在PHP創建響應URL一側僅返回JSON（把SQL查詢到一個共同的功能）
獲取整個頁面的節點，但提取GalleryData將是一個爛攤子

然後我必須確保所有組件都被渲染到DOM，所以我可以通過手動調用nextSlide（）方法來編寫腳本有很多次，因爲有幻燈片（少一個）。

最後，我將把渲染的DOM再次保存到數據庫（所以Node腳本畢竟需要MySQL連接 - 也許第一個選項是最好的）。

對於這樣的基本要求，整個過程看起來非常複雜。我錯過了什麼嗎？

我對Node完全陌生，在瀏覽器之外構建DOM的整個想法對我來說基本上是新的。我不介意將Node引入到我的架構中，但它只會支持在前端使用React。

請注意，該網站每月大約有15,000次綜合瀏覽量，因此不需要大規模的可擴展性 - 我不使用任何頁面緩存，因爲這種流量根本不需要。

我可能需要像這樣靜態渲染一些React組件，但維護一個小的技術開銷（例如，在Node中維護一組並行SQL查詢）不會是一個大問題。

任何人都可以在這裏指導我嗎？

來源

2015-02-23 cachvico

你確定React是否適合你的需求？只有在客戶端請求新數據時纔可以使用React。 – WiredPrairie 2015-02-23 23:14:10

vs Backbone，或者vs nothing/jQuery？我的React圖片庫是我編寫的代碼中更優雅的代碼之一--React的好處（或者Javascript方面的任何等效的應用程序框架），很容易看到。也許Backbone會更容易插入？但不知何故，我懷疑總體上並不容易。 – cachvico 2015-02-23 23:23:33

試圖用JavaScript框架來適應基於PHP的系統可能不是最好的選擇......無論您選擇哪一個。 – WiredPrairie 2015-02-24 00:58:31

我想你應該嘗試使用PHP在服務器端渲染React組件。這是一個PHP lib要做到這一點。

但是，是的，你基本上需要使用PHP代碼中的V8js。然而，這是一種實驗性的，你可能需要使用其他的。（這種「其他方式」可能會使用Node/Express來渲染你的組件Here is some thoughts on how to do it。）

來源

2015-02-23 22:50:11

製作React圖片庫的策略搜索引擎優化

回答

相關問題