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

@ -5,6 +5,8 @@
"url": "https://github.com/facebook/Docusaurus.git"
},
"scripts": {
"lint:v1": "cd v1 && yarn lint",
"lint:v2": "cd v2 && yarn lint",
"precommit": "lint-staged",
"prettier": "prettier --config .prettierrc --write \"**/*.js\"",
"prettier:diff": "prettier --config .prettierrc --list-different \"**/*.js\"",
@ -17,7 +19,7 @@
},
"lint-staged": {
"linters": {
"{v1,v2}/**/*.js": ["yarn lint --fix", "yarn prettier", "git add"]
"{v1,v2}/**/*.js": ["yarn lint:v1 --fix", "yarn lint:v2 --fix", "yarn prettier", "git add"]
}
}
}

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}>