mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
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:
parent
fbdd79981d
commit
ce5610a420
4 changed files with 9 additions and 8 deletions
|
@ -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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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 => {
|
|
@ -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}>
|
||||
|
|
Loading…
Add table
Reference in a new issue