Stack Overflow
Stack Overflow

Questions tagged [isomorphic-javascript]

Isomorphic web sites can be run on both the server and in the browser. They grant code reuse, SEO, and page load speed boosts while still having an interface written in JS. Node.js is most often used for the server JavaScript engine.

There are several benefits to using Isomorphic JavaScript:

  • Faster page load
  • Search Engine Optimization - since the view is generated on the server, web crawlers no longer need to run JavaScript in order to render the page and index it
359 questions
76
votes
7 answers

React 16: Warning: Expected server HTML to contain a matching

I'm getting the following error using SSR Warning: Expected server HTML to contain a matching
in
. The issue is on the client when checking the browser width on component mount, and then setting the state of a component to render a mobile…
Ivan M
  • 867
  • 1
  • 6
  • 8
63
votes
4 answers

React renderToString() Performance and Caching React Components

I've noticed that the reactDOM.renderToString() method starts to slow down significantly when rendering a large component tree on the server. Background A bit of background. The system is a fully isomorphic stack. The highest level App component…
Jon
  • 5,945
  • 4
  • 21
  • 31
43
votes
4 answers

React + Flux and Server-side rendering? (Isomorphic React + Flux)

What is the general practice of setting the initial state of the app with isomorphic applications? Without Flux I would simple use something like: var props = { }; // initial state var html = React.renderToString(MyComponent(props); Then render…
Sahat Yalkabov
  • 32,654
  • 43
  • 110
  • 175
41
votes
5 answers

Image onLoad event in isomorphic/universal react - register event after image is loaded

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…
Everettss
  • 15,475
  • 9
  • 72
  • 98
35
votes
8 answers

Dynamically load a stylesheet with React

I'm building a CMS system for managing marketing landing pages. On the "Edit Landing Page" view, I want to be able to load the associated stylesheet for whichever landing page the user is editing. How could I do something like this with React? My…
neezer
  • 19,720
  • 33
  • 121
  • 220
34
votes
7 answers

Warning: React attempted to reuse markup in a container but the checksum was invalid

I'm trying to get an isomorphic Node.js, Express, Webpack, React app working. I'm getting the following error. Any suggestions on how to fix it? Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally…
HelpMeStackOverflowMyOnlyHope
  • 4,852
  • 10
  • 32
  • 49
29
votes
1 answer

Facebook React.js: how do you render stateful components on the server?

I think I'm conceptually missing something with server-side rendering using React.js Assume I want to create a page to display items from a server-side DB, with an input field to filter them. I want a page: that responds to a URL like…
phtrivier
  • 13,047
  • 6
  • 48
  • 79
23
votes
3 answers

Making RESTful API call from React.js

I am doing a POC for isomorphic JavaScript application to render HTML from the server side. The POC is working with simple HTML, but I want to make an API call and get the JSON response and send to the render function. I tried various ways but it is…
kobe
  • 15,671
  • 15
  • 64
  • 91
19
votes
3 answers

How to best import "server-only" code in Next.js?

In the getServerSideProps function of my index page, I'd like to use a function foo, imported from another local file, which is dependent on a certain Node library. Said library can't be run in the browser, as it depends on "server-only" modules…
Sam Bokai
  • 538
  • 1
  • 5
  • 13
18
votes
3 answers

Jest Test Babel Error: Plugin/Preset files are not allowed to export objects

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…
edlee
  • 665
  • 1
  • 7
  • 20
18
votes
5 answers

react-router: Not found (404) for dynamic content?

How can react-router properly handle 404 pages for dynamic content in a Universal app? Let's say I want to display a user page with a route like '/user/:userId'. I would have a config like this:
Tom Esterez
  • 21,567
  • 8
  • 39
  • 44
18
votes
4 answers

Different main entry point in package.json for node and browser

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":…
Everettss
  • 15,475
  • 9
  • 72
  • 98
18
votes
2 answers

Server-side rendering + responsive design + inline styles -> which breakpoint to use?

I have a responsive web application built with ReactJS for which I want one day to support server-side rendering. According to the viewport size, the application layout/behavior changes. But all these changes can not only be done with plain CSS…
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
17
votes
2 answers

Webpack conditional require

I'm writing an isomorphic Key Value Store with webpack. This is currently my approach to load the libraries, which obviously doesn't work, because webpack wants to resolve both require. Whats' the right approach? var db = null; if (typeof window…
vardump
  • 658
  • 1
  • 10
  • 17
16
votes
1 answer

What is an isomorphic application?

I have been reading multiple different articles about what Isomorphic application is, why this type of architecture is better and so forth. But I still have a bit of uncertainty as to what is meant by such term. How would you define what "Isomorphic…
Eduard
  • 8,437
  • 10
  • 42
  • 64
1
2 3
…
23 24