Add option to disable client-side rendering

sveltejs · Feb 2, 2021 · 1e22df1 · 1e22df1
1 parent 6b7ad47
commit 1e22df1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/packages/kit/src/api/build/index.js b/packages/kit/src/api/build/index.js
@@ -340,6 +340,7 @@ export async function build(config) {
 					amp: ${config.amp},
 					only_prerender,
 					app_dir: ${s(config.appDir)},
+					rendering: this.config.rendering,
 					host: ${s(config.host)},
 					host_header: ${s(config.hostHeader)},
 					get_stack: error => error.stack,

diff --git a/packages/kit/src/api/dev/index.js b/packages/kit/src/api/dev/index.js
@@ -246,6 +246,7 @@ class Watcher extends EventEmitter {
 						only_prerender: false,
 						start_global: this.config.startGlobal,
 						app_dir: this.config.appDir,
+						rendering: this.config.rendering,
 						host: this.config.host,
 						host_header: this.config.hostHeader,
 						get_stack: (error) =>

diff --git a/packages/kit/src/api/load_config/index.spec.js b/packages/kit/src/api/load_config/index.spec.js
@@ -27,6 +27,9 @@ test('fills in defaults', () => {
 			force: false,
 			pages: ['*']
 		},
+		rendering: {
+			client: true
+		},
 		target: null,
 		startGlobal: null
 	});
@@ -85,6 +88,9 @@ test('fills in partial blanks', () => {
 			force: false,
 			pages: ['*']
 		},
+		rendering: {
+			client: true
+		},
 		startGlobal: null,
 		target: null
 	});

diff --git a/packages/kit/src/api/load_config/options.js b/packages/kit/src/api/load_config/options.js
@@ -64,6 +64,12 @@ export default {
 		}
 	},
 
+	rendering: {
+		default: {
+			client: expect_boolean(true)
+		}
+	},
+
 	// used for testing
 	startGlobal: expect_string(null),
 

diff --git a/packages/kit/src/renderer/page.js b/packages/kit/src/renderer/page.js
@@ -267,12 +267,14 @@ async function get_response({ request, options, $session, route, status = 200, e
 				...css_deps.map((dep) => `<link rel="stylesheet" href="${dep}">`)
 		  ].join('\n\t\t\t');
 
-	const init = options.amp
-		? `
+	let init = '';
+	if (options.amp) {
+		init = `
 		<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
 		<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
-		<script async src="https://cdn.ampproject.org/v0.js"></script>`
-		: `
+		<script async src="https://cdn.ampproject.org/v0.js"></script>`;
+	} else if (options.rendering.client) {
+		init = `
 		<script type="module">
 			import { start } from '${options.paths.assets}/${options.app_dir}/${options.entry}';
 			${options.start_global ? `window.${options.start_global} = () => ` : ''}start({
@@ -284,12 +286,14 @@ async function get_response({ request, options, $session, route, status = 200, e
 				session: ${serialized_session}
 			});
 		</script>`;
+	}
 
 	const head = [rendered.head, links, init].join('\n\n');
 
-	const body = options.amp
-		? rendered.html
-		: `${rendered.html}
+	const body =
+		options.amp || !options.rendering.client
+			? rendered.html
+			: `${rendered.html}
 
 			${serialized_data
 				.map(({ url, payload }) => `<script type="svelte-data" url="${url}">${payload}</script>`)