isomorphic-javascript

In an isomorphic application with Reactjs, you need to pass the identical initial state that was rendered on the server down to the client (which will then 'rehydrate' the app with event bindings and such). I've seen two approaches to passing this initial state down-- Setting a global variable to the window: <script> window.initialState = {{JSON.stringify(initialState)}} ; </script> Or passing it as a JSON object: <script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script> Both are easily retrievable from anywhere in the application. Are there any advantages

I have a React app that includes a form, which is rendered server side, prepopulated with the user's work in progress. The problem is that if the user edits a value in the form before the app loads, then the app is unaware of the change. When the user saves, the unchanged data that was rendered by the server is re-saved, and the user's new data is dropped, although it is still shown in the form. In short, there seems to be a disconnect between React and input values in the markup that it replaces when initially loading. I suppose I could put refs on every input and copy their values into the

In isomorphic react app I have myModule which should behave differently on node and browser environments. I would like configure this split point in package.json for myModule : package.json { "private": true, "name": "myModule", "main": "./myModule.server.js", "browser": "./myModule.client.js" } file structure ├── myModule │ ├── myModule.client.js │ ├── myModule.server.js │ └── package.json │ ├── browser.js └── server.js So when I use myModule in node I should get only myModule.server.js : server.js import myModule from './myModule'; myModule(); // invoke myModule.server.js On the browser side

I was wondering how to exactly implement authentication flow with React Router if my app is rendering server-side? The scenario: When the user first arrives at the app, we invoke an onEnter router method in order to check if any current user is present ( localStorage ), if they are we will redirect them to their dashboard, otherwise we redirect them to the landing page. Therefore when my app hits my protected routes onEnter , here's ideally what should happen: onEnter: () => { if (localStorage.getItem('authToken')) { // Authenticate and redirect user to intended path } else { // Redirect the

Is there a simple way to change document title and description (or other [:html [:head [:meta tags) from ClojureScript Reagent application? For example on every bidi route match change the title and description to match the new page content. Preferably this should work without using js/window so that the same code can be used in a browser as well as in server isomorphic pre-rendering (which I need for SEO). In the JavaScript/React world there are react-document-meta and react-side-effect which can probably be converted to Reagent components. But this way of handling side effects seems like a

As far as I know, Aurelia does not support server-side rendering as mentioned here . But the question is: is it possible to do this with some hacks/workarounds? The most obvious idea would be to use Phantom, Nightmare.js or whatever to simply render that page in Chrome on server and serve that to client, but this is very likely to cause big productivity issues. Thanks! UPD According to Rob Eisenberg's response on FDConf today (16 Apr 2016), server-side rendering will be implemented in 2016, there's one core team member working on that and there's a deadline for this feature. There is an open

In isomorphic rendered page image can be downloaded before main script.js file. So image can be already loaded before react register onLoad event - never trigger this event. script.js constructor(props) { super(props); this.handleImageLoaded = this.handleImageLoaded.bind(this); } handleImageLoaded() { console.log('image loaded'); } render() { return ( <img src='image.jpg' onLoad={this.handleImageLoaded} /> ); } Scenario 1 - image.jpg is bigger than script.js In this scenario everything is working fine. Event is registered before image is finally loaded so in console is image loaded message.

I'm using a very up-to-date (December 2017) stack of dependencies. As I try-out isomorphic react tests with Jest, the test suit keeps failing with the following error: * Test suite failed to run [BABEL] /__tests__/router.test.js: Plugin/Preset files are not allowed to export objects, only functions. Here are my dependencies: "dependencies": { "axios": "^0.17.1", "babel-polyfill": "^6.26.0", "cors": "^2.8.4", "express": "^4.16.2", "react": "^16.1.1", "react-dom": "^16.1.1", "react-router-dom": "^4.2.2" }, "devDependencies": { "@babel/core": "^7.0.0-beta.35", "babel-cli": "^6.26.0", "babel-core"