將React應用程序轉換為同構應用程序？

Question

我使用React和Redux開發了一個Web應用程序，然后用Webpack打包，它使用IIS托管，可能只是運行客戶端並調用Web API（.net是出於原因）; 也托管在IIS上。

如何進行跳轉並使此應用程序“同構”，以便React代碼同時運行客戶端和服務器端？

Answer 1

你需要一些東西：

1） 運行節點的一些方法 ：實際上，使用React發生在服務器端的唯一事情是renderToString調用，為您提供可以發送給客戶端的strinigfied HTML（它只是您的應用程序的靜態HTML呈現/ React）， 水合作用 （稍微了解一下）將數據導入組件和路由匹配 。

2） 路由器（如果你有路由） ：如果你的應用程序使用多個路由，你需要使用React-router告訴節點應該渲染哪些組件

3） 普及的一個很好的理由 ：普遍存在一些相對簡單的方面，並且存在一些相對復雜的方面。 匹配路線並不是那么難，而且基本上只是告訴你的服務器要發送什么。 通用JS w / React中更難，更復雜的部分是獲取數據以在初始渲染時向客戶端發送。 這通常涉及一些服務器端數據提取，因此您必須有一種方法來獲取數據並將其傳遞到您的應用程序以便正確呈現。 有很多方法可以做到這一點，但就整體復雜性而言，這肯定是一個重要的進步。

這就是我這樣做的方式，不需要任何服務器端數據獲取： 使用react，react-router和express進行服務器端渲染

也可以看看：

• https://ifelse.io/2015/08/27/server-side-rendering-with-react-and-react-router/
• http://jamesknelson.com/universal-react-youre-doing-it-wrong/

Answer 2

您需要Node.js來創建一個同構的Web應用程序。

這是因為同構應用程序需要適當的服務器端運行時才能在服務器上執行React Javascript代碼。 我不相信IIS支持完全解析Javascript - 只有Node具有此運行時。

如果您沒有使用Node，那么您應該在應用程序的某個階段引入它。 您可以將IIS用作反向代理：為IIS創建節點服務器以將請求轉發給，讓Node使用renderString將React呈現為靜態HTML，然后讓Node使用呈現的HTML響應來自IIS的請求。 IIS將充當所有傳入請求和響應的中間人。

反向代理為應用程序添加了一些小的延遲，但是，與往常一樣，過早優化是所有邪惡的根源。