Svelte build initial render to index.html file - SEO

After digging around for a while, I found out that Sapper allows you to export (render to html files instead of requiring a server).

You can do this by using the sapper export command. You can also easily switch to an express server if required.

This has the following benefits over a normal svelte compilation and over some other frameworks:

Better SEO
Possibly better accessibility
Faster page loads due to initial page render
JavaScript not required to view non-dynamic sections of your page
Component-scoped javascript still available at runtime
No runtime and virtual DOM - faster and smaller javascript bundle

I have recently started experimenting with Svelte and started by downloading the hello world example.
I then just started altering it for my needs.
It already has an index.html file set up in the public folder (it is set up to compile to the public folder instead of dist). Svelte / Rollup will not generate an index.html file, it is purely for compiling and bundling your JS / Svelte components.

The index.html file supplied is just basic:

<!doctype html>
<html>
<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='favicon.png'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='bundle.css'>
</head>

<body>
    <script src='bundle.js'></script>
</body>
</html>

The main.js looks like this:

import App from './App.svelte';

var app = new App({
  target: document.body
});

export default app;

Here is a link [source], [build] to my first svelte app if you’re interested.

As far as SEO is concerned, I hear all over the place for years that google can crawl JS now, but I am not convinced. A JS driven SPA will never have the SEO juice that a standard html page will.

That being said, I am currently working on an SPA with svelte that I want good SEO for. The interactive part is only a small part of the page, so I am adding the rest (text, images and stuff) directly to the index.html so search engines should have no problem crawling it. I just change the main.js to inject the app into a div (with the ID of app) rather than the body.
So the main.js looks like this:

import App from './App.svelte';

var app = new App({
  target: document.getElementById('app'),
});

export default app;

I have not yet done anything with Sapper so I can’t comment on that.

I hope my answer helps in some way.

Svelte build initial render to index.html file – SEO

Answers