Components are not loaded for first request in node SSR

🐛 Bug Report

At the start of the node server i loop through all my react routes which are loadable components and get a needs property set to them

routes
    .map(route => {
      const match = matchPath(req.path, route)
      return match && route.component.needs && needs.push(route.component.needs)
    })

I do this to find all the fn calls that is required for SSR and dispatch API calls

for this route.component on the first-ever request when node server starts gives me:

{$$typeof: Symbol(react.forward_ref), render: ƒ, preload: ƒ, load: ƒ}
$$typeof: Symbol(react.forward_ref)
render: ƒ (props, ref)
arguments: (...)
caller: (...)
length: 2
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: loadable.esm.js?30a7:294
[[Scopes]]: Scopes[6]
preload: ƒ (props)
load: ƒ (props)
__proto__: Object

as the component which does not include my route component and the attached needs property Hoever on subsequest requests i get

Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
default:
$$typeof: Symbol(react.memo)
type: ƒ ConnectFunction(props)
compare: null
WrappedComponent: {$$typeof: Symbol(react.forward_ref), displayName: "WithTheme(Home)", render: ƒ, needs: ƒ, apply: ƒ, …}
displayName: "Connect(WithTheme(Home))"
needs: ({ store: { dispatch } }) => {…}
apply: ƒ apply()
bind: ƒ bind()
call: ƒ call()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
__proto__: Object
__esModule: true
Symbol(Symbol.toStringTag): "Module"
__proto__: Object

which clearly is a module and has the needs property

When using react-loadable i would have to use something like await route.component.load() to get the component, would i have to do the same for each request?

To Reproduce

https://github.com/raven619claw/starter-kit/tree/develop

run yarn and run the start command in file serverRenderer.js line 49 it would not return the module for the first request but from the next requests module is returned

Expected behavior

It should return the module in the first request as a sync require call in node

Link to repo

https://github.com/raven619claw/starter-kit/tree/develop

## System:
 - OS: macOS 10.15.2
 - CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
 - Memory: 78.06 MB / 8.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.14.1 - /usr/local/bin/node
 - Yarn: 1.15.2 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
## npmPackages:
 - @loadable/babel-plugin: ^5.11.0 => 5.11.0 
 - @loadable/component: ^5.11.0 => 5.11.0 
 - @loadable/server: ^5.11.0 => 5.11.0 
 - @loadable/webpack-plugin: ^5.7.1 => 5.7.1 

[theKashey]

I’m sorry, I didn’t understand this part.

I am referring to Render-as-You-Fetch pattern.

First now to render a page you have to 1) first load the component 2) then load the data for the component. You should try your best to do 1 and 2 simultaneously, and the only way to do it - define needs above splitting point. For example in Routes.

Yes, that’s breaking “component model”, but what is “component” and do you really need it? Probably the better user experience is the only thing which really matters.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.