andreiduca / cra-ssr-code-splitting Goto Github PK

It would be nice to get a section on what to consider for production use. The idea is pretty simple: having a proxy between REST API -> SSR server -> ReactJS client. I think, lots of people are looking for this, so would be highly appreciated.

not sure if this is called "SSR", because neither "Hi, I'm async." or "Redux: Hi, I'm from client!" are not rendered at server side. By looking at the page source (which is what a bot get normally), there is no SEO value at all. Is this because I opened it in a wrong way?
Thanks.

Great repo, would be really good to update the babel requirements for Babel 7 (things like @babel/register instead of babel-register etc.

Hi!

I am trying to add SSR to CRA and i have seen (also from your repo) that is possible only with the build folder. So there is no way to have SSR with livereload if you don't create a custom webpack file for it.

What do you think?

Hello, thank you for this example and for the article that you shared on Medium.

I am experiencing a weird behavior that is really driving me crazy crazy crazy. I wonder if you stumbled upon something similar yourself.

if you change the PageAnother.jsx to:

import React from 'react';
import moment from 'moment';

export default () => (
    <div>This is for another page. {JSON.stringify(moment())}</div>
);

(basically adding a dependency)

the SSR will break.

Actually, the SSR itself works just fine, but it fails to detect all the chunks that the app generates and uses. This end up in a re-rendering in the client.

If you look at the requested js files with the Chrome console, and compare it with the list of chuncks that are present in the html source, you'll notice that chunk 5.xxxxx.js is missing in the original HTML source.

This is what is causing the flickering.

Do you have any idea how to fix this?

Can this code be used as a boilerplate for building frontend react applications ?

Hi Andrie, I just read your post on medium recently about the SSR and Create-React-App without ejecting. It's awesome!

However, the following line of code confuses me:

<img src="./logo.svg" className="App-logo" alt="logo"/>

I think for the client-side-rendered react app, the image assets are imported and resolved by webpack loader:

import logo from './logo.svg';
// ...somewhere in the render method
<img src={logo} className="App-logo" alt="logo"/>

Accordingly, the original way does not fit your medium post. How would you resolve that kind of problem without adding extra webpack config on server-side or ejecting create-react-app?

Thanks a lot.

So far I managed to adapt this boilerplate code for my project. Now I need to support dynamic meta tags for some routes. These components receive the meta tags using an API call to the server. Actually meta tags are set and viewable via inspecting the browser. But Facebook sharing debugger only reads the static meta tags.

<Helmet>
         <title>{this.state.firstName+' '+this.state.lastName}</title>
         <meta name="og:description" content={this.state.description+" this is my profile"} />
         <meta property="og:image" content={"/images/share/home page share.jpeg"}
</Helmet>

state values are set by an API call inside the component. In the above example og:image is set as it is static. og:description only has static portion after scraped by facebook sharing debugger. Am I missing some step? data to be set meta tags are loaded in compnentWillMount life cycle.