search

erikras / react-redux-universal-hot-example

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

How to test server side rendering? #1272

Closed mauricioklein closed 1 year ago

mauricioklein commented 8 years ago

First of all, congratulations for the great work done here :+1:

Sorry, this is a very basic question, but I really would appreciate some clarification here: How do I make sure both client and server side rendering are working properly. I mean, I always test manually using dev mode (npm run dev) and prod mode (npm run start), but to ensure that server rendering is in fact being realized? Should I lift the webpack server in prod mode and access the URL using a browser with JS disabled?

Also, when I start the system in dev mode (npm run dev) I got the following error message in console:

Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

Is this message normal, since I'm running dev mode?

Thanks for any hint about this questions, and have a great week!

larchanka commented 8 years ago

@mauricioklein Just disable javascript in your browser

bertho-zero commented 8 years ago

You can also do CTRL + U

mauricioklein commented 7 years ago

@bertho-zero About your suggestion (Ctrl + U), what am I supposed to get in order to ensure that the rendering is being made on server side?

I've just ran Ctrl - U and got a HTML content.

No HTML body is visible (I mean, no div structure, etc), just a script section setting window.__data, with a content that I guess is the Redux store state.

Also, I'm not getting the console message: Server-side React render was discarded. Make sure that your initial render does not contain any client-side code. And the page content is being displayed correctly.

Does this mean that the page is being rendered on server?

Thanks in advance for your support!

mauricioklein commented 7 years ago

OK, it seems that the server side is being called, but the only content being rendered is a <noscript>. I've researched an it seems to be something related to react-router, but the route is correct (since it's working on dev mode).

Any ideas?

Thanks!

bertho-zero commented 7 years ago

With Ctrl + U you should have an 'empty' body (one div) if SSR is disabled and you have the following message: Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.

If SSR is enabled you have the complete HTML.

When you run Ctrl + U your browser makes a new request to server again and you have the source generated by the server-side.

mauricioklein commented 7 years ago

Thanks @bertho-zero for your response! It seems that, for some reason, my component is not being rendered, so I'm getting a <noscript> tag on body. I've submitted an issue to ask for help about it. You can check it here. On this issue, I've provided further information and have linked a gist with my server.js and routes.js. If you could take a look at it, it would be so kind from your part.

Thanks in advance for all the support given so far!

mauricioklein commented 7 years ago

By the way, this is the HTML I'm getting with Ctrl + U (formatted, for better readability):

<!doctype html>
<html lang="en-us" data-reactid=".xwhqdpwetc" data-react-checksum="-1857125750">
   <head data-reactid=".xwhqdpwetc.0">
      <title data-react-helmet="true" data-reactid=".xwhqdpwetc.0.1:$"></title>
      <link rel="shortcut icon" href="/favicon.ico" data-reactid=".xwhqdpwetc.0.5"/>
      <meta name="viewport" content="width=device-width, initial-scale=1" data-reactid=".xwhqdpwetc.0.6"/>
      <link href="/dist/main-c71d1f78e0de357c06ed.css" media="screen, projection" rel="stylesheet" type="text/css" charset="UTF-8" data-reactid=".xwhqdpwetc.0.7:$0"/>
      <link href="http://localhost:3000/vendor/video-js-5.11.6/video-js.min.css" rel="stylesheet" data-reactid=".xwhqdpwetc.0.8"/>
   </head>
   <body data-reactid=".xwhqdpwetc.1">
      <div id="content" data-reactid=".xwhqdpwetc.1.0">
         <noscript data-reactid=".11s5t1uybcw" data-react-checksum="-1240592045"></noscript>
      </div>
      <script charset="UTF-8" data-reactid=".xwhqdpwetc.1.1">window.__data={"routing":{"locationBeforeTransitions":{"pathname":"\u002Flernen\u002Faaa\u002F592","search":"","hash":"","state":null,"action":"POP","key":"hd20k6","query":{},"$searchBase":{"search":"","searchBase":""}}},"reduxAsyncConnect":{"loaded":false},"form":{},"evolutions":{"list":[],"loading":false},"excursus":{"elements":[],"loading":false},"lexicon":{"keywords":{"loading":false},"keywordsList":{"list":[],"loading":false},"learnUnits":{},"letters":[],"modal":{"videoOverlayVisible":false,"scriptOverlayVisible":false,"imageOverlayVisible":false,"learnUnit":null}},"learnstage":{"currentAnswer":null,"currentLearnUnit":{"currentLearnUnit":null,"loading":false},"nextSuiteElement":null,"questions":{},"questionsStatus":null,"tabs":{"active":"video"}},"parents":{},"users":{"userProgress":{"total":0,"finished":0,"percentage":0},"userNotifications":[],"userProfile":null},"settings":{"showPerformanceFeedback":false,"hideSidebarWhilePlayingVideo":false},"sidebars":{"learnstage":{"visible":true},"notifications":{"visible":true}},"coursebuilder":{"catalog":{"entries":[],"loading":false},"lectureDetails":{"lectures":[],"loading":false}},"currentRepetition":{"parent":null,"question":null},"toggleables":{"lexiconModal":{"visible":false}}};</script><script src="/dist/main-c71d1f78e0de357c06ed.js" charset="UTF-8" data-reactid=".xwhqdpwetc.1.2"></script><script src="http://localhost:3000/vendor/jquery-2.0.3/jquery.min.js" data-reactid=".xwhqdpwetc.1.3"></script><script src="http://localhost:3000/vendor/video-js-5.11.6/video.min.js" data-reactid=".xwhqdpwetc.1.4"></script><script src="http://localhost:3000/vendor/videojs-markers-0.5.0/videojs-markers.min.js" data-reactid=".xwhqdpwetc.1.5"></script>
   </body>
</html>
mauricioklein commented 7 years ago

@bertho-zero One simple question, if you allow me: I've cloned this project again and just tried to perform a server side rendering on a new page. So, I've created a new container page, just rendering a <h1> tag, added to index.js and mapped it in routes.

The question is: If I map this new component to root:

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

The server side rendering doesn't work.

However, mapping to an inner route:

<Route path="/" component={App}>
  <Route path="hello" component={MyComponent}/>
</Route>

The server side works well.

Can you explain why this?

Thanks!

timothy2005 commented 3 years ago

@mauricioklein Just disable javascript in your browser

Cool method!