Closed BlackFenix2 closed 6 years ago
to comment, i might be doing something wrong with my getLoadableState method.
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { getLoadableState } from 'loadable-components/server'
import App from './App'
const app = (
<StaticRouter>
<App />
</StaticRouter>
)
// Traversing React tree to load all modules
getLoadableState(app).then(() => {
const html = renderToString(<YourApp />) // what is "<YourApp /> in this context? could be what i am missing.
})
It is difficult to help you with this portion of code, but I will try.
Is getLoadableState(app)
resolved? Is the then
called? If yes your setup is right.
The problem could be that a loadable-components is not present in the React Tree, so it is undetectable for getLoadableState(app)
do you see what I mean?
NVM, i figured out the issue. i forgot to declare external on my webpack server config:
// /
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const outputPath = path.resolve('wwwroot', 'server');
const config = {
// node specific settings
// target: 'node',
externals: nodeExternals(), // <- this is what i forgot
// find starting js file
entry: {
server: './ClientApp/server.jsx'
// serverTest: './ClientApp/serverTest.jsx'
},
// add file extensions to shorthand ES6 imports
resolve: {
extensions: ['json', '.js', '.jsx', '.css']
},
// bundled code output
output: {
path: path.resolve(__dirname, outputPath),
publicPath: '/',
filename: '[name].js',
libraryTarget: 'commonjs2'
},
module: {
loaders: [
// Check JS and JSX files before building
{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
// check each loader for matching files
oneOf: [
// default loader for js and jsx with inline babel config
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env', 'react'],
plugins: [
'babel-plugin-transform-runtime',
'babel-plugin-dynamic-import-node',
'babel-plugin-transform-object-rest-spread',
'babel-plugin-transform-class-properties',
'transform-es2015-modules-commonjs'
],
// Don't read from .babelrc
babelrc: false
}
},
// default css loader
// {
// test: /\.css$/,
// loader: ExtractTextPlugin.extract({
// use: 'css-loader',
// fallback: 'style-loader'
// })
// },
// fallback loader if other loaders excluded
// URL loader falls back to file-loader
{
loader: 'url-loader',
exclude: [/\.(js|jsx|mjs|css)$/, /\.html$/, /\.json$/],
options: {
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
// load css into separate .css file
// new ExtractTextPlugin({
// filename: 'server.css',
// allChunks: true
// })
]
};
module.exports = config;
now my Async Server-side rendering works perfectly now! sorry to bother!
Nice!
I am attempting to configure Server-side rendering for my Asp.Net core SPA application. the method getLoadableState does not wait for the async components to finish loading. I always get the loading component rendered:
if i do this for each async component, my SSR works:
i have tried the followind posts, but i am still getting issues with Async SSR: https://marmelab.com/blog/2017/10/17/code-splitting.html https://medium.com/smooth-code/introducing-loadable-components-%EF%B8%8F-646dd3ab0aa6 (sorry, your intro blogpost)
i have the full server code below, this is being called by an 'asp-prerender-module' taghelper on .Net Core. I am working off the ReactRedux SPA Template without Typescript.