Universal Reactjs с Nashorn и Tomcat

Question

Для моего текущего проекта я пытаюсь создать универсальный веб-сайт 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

я опубликовал статью об использовании Насхорн, чтобы реагируют SSR. 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 сделают это.

И вы можете зарегистрироваться Demo. Приложение имеет стек React, Apollo, React-Router v4.

Answer 2

Я столкнулся с тем же вопросом.

Я новичок в узел, но если проверить папку node_modules, а также react-router v4 documentation, нет никакого упоминания о классе ServerRouter, как один называется в client.js файл.

Возможно, создается функция createServerRenderContext. По крайней мере, не в этом модуле.

Попробуйте заменить это на StaticRouter возможно.

EDIT:

Успел сделать его работу, установив последнюю версию ReactRouter 4 беты

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

Затем измените файл server.js:

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})); 
}; 

клиент .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> 
); 
} 

Я удалил объект мисс, так как не существует в этой версии среагировать-маршрутизатор