Skip to content

Commit

Permalink
Disable Next.js scroll restoration
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Sep 9, 2022
1 parent ee96afd commit 99f2933
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 1 deletion.
1 change: 0 additions & 1 deletion beta/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const nextConfig = {
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
experimental: {
plugins: true,
scrollRestoration: true,
legacyBrowsers: false,
browsersListForSwc: true,
},
Expand Down
80 changes: 80 additions & 0 deletions beta/patches/next+12.1.7-canary.11.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
diff --git a/node_modules/next/dist/client/index.js b/node_modules/next/dist/client/index.js
index 8541301..e020783 100644
--- a/node_modules/next/dist/client/index.js
+++ b/node_modules/next/dist/client/index.js
@@ -471,7 +471,11 @@ function renderError(renderErrorProps) {
let reactRoot = null;
// On initial render a hydrate should always happen
let shouldHydrate = true;
-function renderReactElement(domEl, fn) {
+function renderReactElement(domEl, fn
+// ~~~~~~~~~ MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+, REACT_DOCS_IS_POPSTATE // Added this argument
+// ~~~~~~~~~ /MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+) {
// mark start of hydrate/render
if (_utils.ST) {
performance.mark('beforeRender');
@@ -484,10 +488,16 @@ function renderReactElement(domEl, fn) {
// TODO: Remove shouldHydrate variable when React 18 is stable as it can depend on `reactRoot` existing
shouldHydrate = false;
} else {
- const startTransition = _react.default.startTransition;
- startTransition(()=>{
+ // ~~~~~~~~~ MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ if (REACT_DOCS_IS_POPSTATE) { // Added this branch
reactRoot.render(reactEl);
- });
+ } else { // The else block contents is the original code
+ const startTransition = _react.default.startTransition;
+ startTransition(()=>{
+ reactRoot.render(reactEl);
+ });
+ }
+ // ~~~~~~~~~ /MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
} else {
// The check for `.hydrate` is there to support React alternatives like preact
@@ -796,7 +806,11 @@ function doRender(input) {
});
}
if (input.scroll) {
- window.scrollTo(input.scroll.x, input.scroll.y);
+ // ~~~~~~~~~ MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ if (!input.scroll.REACT_DOCS_IS_POPSTATE) { // Added this condition
+ window.scrollTo(input.scroll.x, input.scroll.y);
+ }
+ // ~~~~~~~~~ /MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
}
function onRootCommit() {
@@ -815,6 +829,9 @@ function doRender(input) {
onRootCommit
]
}, process.env.__NEXT_STRICT_MODE ? /*#__PURE__*/ _react.default.createElement(_react.default.StrictMode, null, elem) : elem)
+ // ~~~~~~~~~ MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ , input.scroll && input.scroll.REACT_DOCS_IS_POPSTATE // Added this argument
+ // ~~~~~~~~~ /MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
);
return renderPromise;
}
diff --git a/node_modules/next/dist/shared/lib/router/router.js b/node_modules/next/dist/shared/lib/router/router.js
index 572e21b..538091f 100644
--- a/node_modules/next/dist/shared/lib/router/router.js
+++ b/node_modules/next/dist/shared/lib/router/router.js
@@ -416,6 +416,15 @@ class Router {
}
}
}
+ // ~~~~~~~~~ MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ // I don't want Next.js to do anythnig on scroll for Back/Forward buttons.
+ // Instead I want to let the browser take care of it with auto scroll restoration.
+ // Unfortunately, Next.js still tries to scroll to top on Back, so let's not do that.
+ forcedScroll = {
+ REACT_DOCS_IS_POPSTATE: true
+ };
+ // ~~~~~~~~~ /MANUAL EDIT FOR REACT DOCS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
this._key = key;
const { pathname } = (0, _parseRelativeUrl).parseRelativeUrl(url);
// Make sure we don't re-render on initial load,

0 comments on commit 99f2933

Please sign in to comment.