refactor(v2): better page preloading (#976)

* refactor: use native preloadReady for prerender on client

* refactor: rename 'prerender' to 'preload' for correctness
This commit is contained in:
Endilie Yacop Sucipto 2018-09-22 00:42:06 +08:00 committed by GitHub
parent fbdd79981d
commit ce5610a420
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 8 deletions

View file

@ -1,14 +1,13 @@
import React from 'react';
import Loadable from 'react-loadable';
import {BrowserRouter} from 'react-router-dom';
import ReactDOM from 'react-dom';
import App from './App';
import prerender from './prerender';
import routes from '@generated/routes'; // eslint-disable-line
// Client side render (e.g: running in browser) to become single-page application (SPA)
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
prerender(routes, window.location.pathname).then(() => {
if (typeof document !== 'undefined') {
Loadable.preloadReady().then(() => {
ReactDOM.render(
<BrowserRouter>
<App />

View file

@ -4,7 +4,7 @@ import {matchRoutes} from 'react-router-config';
* This helps us to make sure all the async component for that particular route
* is loaded before rendering. This is to avoid loading screens on first page load
*/
export default function prerender(routeConfig, providedLocation) {
export default function preload(routeConfig, providedLocation) {
const matches = matchRoutes(routeConfig, providedLocation);
return Promise.all(
matches.map(match => {

View file

@ -4,13 +4,13 @@ import ReactDOMServer from 'react-dom/server';
import Helmet from 'react-helmet';
import App from './App';
import prerender from './prerender';
import preload from './preload';
import routes from '@generated/routes'; // eslint-disable-line
import webpackClientStats from '@build/client.stats.json'; //eslint-disable-line
// Renderer for static-site-generator-webpack-plugin (async rendering via promises)
export default function render(locals) {
return prerender(routes, locals.path).then(() => {
return preload(routes, locals.path).then(() => {
const context = {};
const appHtml = ReactDOMServer.renderToString(
<StaticRouter location={locals.path} context={context}>