Universal Reactjs with Nashorn and Tomcat

Question

私の現在のプロジェクトでは、universal reactjsウェブサイトを作成しようとしています。現在のサーバーアーキテクチャでは、Tomcatアプリケーションサーバーのみを使用するように制限されています。 nodejsサーバーのインストールはオプションではありません。

POCとして、サーバ上でレンダリングする反応ルータとの反応を含むサンプルリポジトリ（https://github.com/pgrimard/spring-boot-react）を使用します。この例を実行すると、次のエラーが発生します。

org.springframework.scripting.support.StandardScriptEvalException: TypeError: 0 ,> u.createServerRenderContext is not a function in <eval> at line number 1 

このエラーは、反応ルータのコンテキストを設定するときにserver.jsファイルで発生します。 Tomcatのコンテナ内でより大きな反応のアプリケーションを経験した人は誰ですか？SSRを使用していますか？それとも他の解決策がありますか？

ありがとうございます！

Answer 1

のこのバージョンには存在しないように私は、ミス・オブジェクトを削除しました。 https://medium.com/@jimmy_shen/use-nashorn-engine-to-do-server-side-rendering-with-react-eba835e33d77または使用Nashorn Engine进行React Server-Side Rendering

キーは、XmlHttpRequestとWebAPIに関するNashornのpolyfillです。 nashorn-polyfillとなります。

Demoをご覧ください。このアプリはReact、Apollo、React-Router v4のスタックを持っています。

Answer 2

同じ問題が発生しました。

は私がノードに新しいんだけど、あなたはreact-router v4 documentationだけでなく、node_modulesフォルダをチェックすると、ファイルclient.jsに呼ばれるもののよう、ServerRouterクラスの言及はありません。

おそらく、作成のcreateServerRenderContext関数も存在しません。少なくともこのモジュールにはない。

StaticRouterで置き換えてみてください。

EDIT：

import React from 'react'; 
import ReactDOMServer from 'react-dom/server'; 
import {StaticRouter} from 'react-router'; 
import {createStore, applyMiddleware} from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import {Provider} from 'react-redux'; 
import serialize from 'serialize-javascript'; 
import reducer from './reducers'; 
import App from 'components/App'; 

window.render = (template, model) => { 
     const context = {}; 
     const req = JSON.parse(model.get('req')); 
     const initialState = JSON.parse(model.get('initialState')); 

     const store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware)); 

     const markup = ReactDOMServer.renderToString(
     <Provider store={store}> 
      <StaticRouter location={req.location} context={context}> 
      <App/> 
      </StaticRouter> 
     </Provider> 
    ); 

     return template 
     .replace('SERVER_RENDERED_HTML', markup) 
     .replace('SERVER_RENDERED_STATE', serialize(initialState, {isJSON:true})); 
}; 

クライアント：それは次にReactRouter 4ベータ

npm install --save react-router-dom@next 
npm install --save react-router@next 

の最新バージョンをインストールすることで動作するように管理され

server.jsファイルを変更します.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter} from 'react-router-dom'; 
import {createStore, applyMiddleware} from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import {Provider} from 'react-redux'; 
import reducer from './reducers'; 
import App from 'components/App'; 

const store = createStore(reducer, window.__PRELOADED_STATE__, applyMiddleware(thunkMiddleware)); 

const markup = (
    <Provider store={store}> 
    <BrowserRouter> 
     <App/> 
    </BrowserRouter> 
    </Provider> 
); 

ReactDOM.render(markup, document.getElementById('app')); 

そして最後にApp.js

import React from 'react'; 
import {Route, Link} from 'react-router-dom'; 
import Home from 'components/Home'; 
import Child from 'components/Child'; 
import 'styles/main.css'; 

export default function App() { 
    return (
    <div> 
     <h1>Hello Server Side Rendering!!</h1> 

     <ul> 
     <li><Link to="/">{'Home'}</Link></li> 
     <li><Link to="/child">{'Child'}</Link></li> 
     </ul> 

     <Route exactly path="/" component={Home}/> 
     <Route path="/child" component={Child}/> 

    </div> 
); 
} 

それは私がSSRに反応行うためにnashorn使用についての記事を掲載反応し、ルータを