Skip to content

Commit b369aa1

Browse files
gaearongaearon
committed
Enable streaming SSR
1 parent 9dd3d54 commit b369aa1

File tree

4 files changed

+155
-160
lines changed

4 files changed

+155
-160
lines changed

‎beta/next.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ module.exports = {
1010
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
1111
experimental: {
1212
plugins: true,
13-
// TODO: this doesn't work because https://github.com/vercel/next.js/issues/30714
14-
// concurrentFeatures: true,
13+
concurrentFeatures: true,
1514
scrollRestoration: true,
1615
},
1716
async redirects() {

‎beta/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@
3434
"debounce": "^1.2.1",
3535
"github-slugger": "^1.3.0",
3636
"hex2rgba": "^0.0.1",
37-
"next": "^12.0.3-canary.2",
37+
"next": "^12.0.3-canary.10",
3838
"parse-numeric-range": "^1.2.0",
39-
"react": "18.0.0-alpha-930c9e7ee-20211015",
39+
"react": "18.0.0-alpha-ee069065d-20211105",
4040
"react-collapsed": "3.1.0",
41-
"react-dom": "18.0.0-alpha-930c9e7ee-20211015",
41+
"react-dom": "18.0.0-alpha-ee069065d-20211105",
4242
"scroll-into-view-if-needed": "^2.2.25"
4343
},
4444
"devDependencies": {

‎beta/src/pages/_document.tsx

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,60 @@
33
*/
44

55
import * as React from 'react';
6-
import Document, {Html, Head, Main, NextScript} from 'next/document';
7-
8-
class MyDocument extends Document {
9-
render() {
10-
// @todo specify language in HTML?
11-
return (
12-
<Html lang="en">
13-
<Head />
14-
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
15-
<script
16-
dangerouslySetInnerHTML={{
17-
__html: `
18-
(function () {
19-
function setTheme(newTheme) {
20-
window.__theme = newTheme;
21-
if (newTheme === 'dark') {
22-
document.documentElement.classList.add('dark');
23-
} else if (newTheme === 'light') {
24-
document.documentElement.classList.remove('dark');
25-
}
6+
import {Html, Head, Main, NextScript} from 'next/document';
7+
8+
export default function Document() {
9+
// @todo specify language in HTML?
10+
return (
11+
<Html lang="en">
12+
<Head />
13+
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
14+
<script
15+
dangerouslySetInnerHTML={{
16+
__html: `
17+
(function () {
18+
function setTheme(newTheme) {
19+
window.__theme = newTheme;
20+
if (newTheme === 'dark') {
21+
document.documentElement.classList.add('dark');
22+
} else if (newTheme === 'light') {
23+
document.documentElement.classList.remove('dark');
2624
}
25+
}
26+
27+
var preferredTheme;
28+
try {
29+
preferredTheme = localStorage.getItem('theme');
30+
} catch (err) { }
2731
28-
var preferredTheme;
32+
window.__setPreferredTheme = function(newTheme) {
33+
preferredTheme = newTheme;
34+
setTheme(newTheme);
2935
try {
30-
preferredTheme = localStorage.getItem('theme');
36+
localStorage.setItem('theme', newTheme);
3137
} catch (err) { }
38+
};
3239
33-
window.__setPreferredTheme = function(newTheme) {
34-
preferredTheme = newTheme;
35-
setTheme(newTheme);
36-
try {
37-
localStorage.setItem('theme', newTheme);
38-
} catch (err) { }
39-
};
40+
var initialTheme = preferredTheme;
41+
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
4042
41-
var initialTheme = preferredTheme;
42-
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
43+
if (!initialTheme) {
44+
initialTheme = darkQuery.matches ? 'dark' : 'light';
45+
}
46+
setTheme(initialTheme);
4347
44-
if (!initialTheme) {
45-
initialTheme = darkQuery.matches ? 'dark' : 'light';
48+
darkQuery.addListener(function (e) {
49+
if (!preferredTheme) {
50+
setTheme(e.matches ? 'dark' : 'light');
4651
}
47-
setTheme(initialTheme);
48-
49-
darkQuery.addListener(function (e) {
50-
if (!preferredTheme) {
51-
setTheme(e.matches ? 'dark' : 'light');
52-
}
53-
});
54-
})();
55-
`,
56-
}}
57-
/>
58-
<Main />
59-
<NextScript />
60-
</body>
61-
</Html>
62-
);
63-
}
52+
});
53+
})();
54+
`,
55+
}}
56+
/>
57+
<Main />
58+
<NextScript />
59+
</body>
60+
</Html>
61+
);
6462
}
65-
66-
export default MyDocument;

0 commit comments

Comments
 (0)