question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SSR not loading synchronously and CSS never loads for SSR page

See original GitHub issue

@faceyspacey thanks again for the great work. I’m at a point where I’ve tried what I believe to be every avenue and just completely stuck.

I’m trying to upgrade to the babel-plugin-dual-import but it breaks SSR for react-universal-components only in my production config. I see 2 symptoms

  1. The SSR always comes back with the Loading... no matter which route I hit (or which view is universally dynamically included)
  2. The styles/css for that page are never loaded, even if I navigate away and back

If I navigate (using redux-first-router/redux-first-router-link) client-side to a view, the css loads just fine.

I’ve looked through the issues in your various repos and since I’m not the best at webpack configs, I think I’m at the point of randomly making changes which isn’t a great way to troubleshoot.

I’m using koa for the server, so I have to translate all of your examples. We have a hodgepodge mess of CSS at the moment b/c we’re using components that include their own global CSS, but that doesn’t seem to affect things in dev.

We’re using webpack server-side b/c I couldn’t get HMR working with just babel early on, however, the major difference between dev and production servers is that due to the hot module server middleware, in dev we are using the render middleware as the entrypoint whereas in production, the server itself is the entrypoint. Do you think this could be the cause?

Also 2 pieces of advice to improve the DX:

  1. The boilerplates need to be kept up with the “latest” developments as I’m not sure which one I should use as the example configuration.
  2. Convert all of this to a monorepo so that there is one place for issues and code. I like the different modularization of the system, but it’s very hard to investigate which issues are relevant.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:15 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
faceyspaceycommented, Jul 31, 2017

I’m going to close this, as we solved @aga5tya 's problems on chat. The main problem was that the webpack-node-externals package behaves funny. If you follow the precise directions for externals in the readme, it solves his issue. Perhaps that was yours issue too, @eudaimos.

Hit me on chat if you need anything. In a few hours the React Universal Component 2.0 article is going out with the new babel-plugin-universal-import which eliminates the ned to manually use resolveWeak. @eudaimos as for the monorepro idea, we’re a weak off from universal-render which will consolidate every single package under only one you have to use.

So things will just keep getting better and easier.

ps. the docs to all these packages were updated a few days ago.

1reaction
aga5tyacommented, Jul 28, 2017

I’m actually in travelling , and i’m sure its something to do with my configuration since it’s not replicable on the boilerplate. So i think u can go ahead with the article… Cheers 🍻 I’ll check again and hit u with repro asap.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SSR React Application using loadable library, throws “Cannot ...
I was running into the same issue and it turned out that the getPrototypeOf() was being called on the anonymous function (see top...
Read more >
Server-Side Rendering (SSR) - Vue.js
Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not...
Read more >
Server-side rendered styled-components with Nextjs
To enable server side rendering of the styles, we will need to do two things: hook into the renderPage method to parse the...
Read more >
Optimize Largest Contentful Paint - web.dev
Rendering of the entire page is blocked due to stylesheets or synchronous scripts in the <head> that are still loading. The LCP resource...
Read more >
The future of rendering in React - Prateek Surana
Problems with SSR. Since we are rendering the page on the server first with every request and have to wait for the data...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found