search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
12.01k stars 2.5k forks source link

<noscript> on server side rendering #1324

Closed mauricioklein closed 1 year ago

mauricioklein commented 7 years ago

Hello!

I'm facing a strange behavior: All my routes is working fine in dev mode, and everything is being rendered as expected.

However, when I run production mode and disable JavaScript from browser, the HTML component is rendered correctly, however the <body> renders the component as a <noscript> tag, and nothing is displayed.

After some research, I found this can be a problem with react-router, meaning that the route didn't match, which is not the case, because on dev mode it works well.

Any idea what could be the problem? How can I debug this error?

Thanks in advance for any support!

PS: my server.js and routes.js files are available on this gist. The only customization on server.js was to remove the mocked API related code, unnecessary for us.

mauricioklein commented 7 years ago

By the way, I've made the most simple test possible:

A dummy component:

import React from 'react';

const HelloWorld = () => (
  <h1>Hello World!</h1>
);

export default HelloWorld;

and a single route:

<Route path="/" component={HelloWorld} />

Acessing / with JS enabled in browser, I got the correct hello world message. However, disabling JS on browser, I still get a blank page, with <noscript> on page body.

So, it seems the problem is related to how server side is dealing with routes definition.

mauricioklein commented 7 years ago

@erikras Could you please take a look at this? Would be so kind have an opinion from your part. Thanks :+1:

mauricioklein commented 7 years ago

Another discovery: With both JS enable and disabled, the server renders the element as a <noscript> element. However, with JS enabled, client is able to interpret it and render correctly. Without JS, nothing is shown.

TravnikovDev commented 7 years ago

Yeah, i stuck at that moment too

TravnikovDev commented 7 years ago

Change version of "redux-async-connect" to "1.0.0-rc3" helped me

hoseinz3 commented 7 years ago

@TPABHuKOB thanks for your beautiful answer

bertho-zero commented 7 years ago

You can also use https://www.npmjs.com/package/redux-connect that is up to date.

janziemba commented 7 years ago

@TPABHuKOB Thank you!