Index page flashing before a dynamic route is rendered

[kemalcany]

Hi!

An old issue that was resolved few months ago came back.

The index page is flashing very quickly before a dynamic page is rendered

You can see it here:

https://vitesse.netlify.app/hi/something

More info: https://github.com/antfu/vitesse/issues/159

[userquin]

It is not back, this page is dynamic and so excluded by default from ssg, I wrote about it on discussions a few months ago.

I am checking how to solve this problem.

See https://github.com/antfu/vitesse/discussions/169

[thuongtruong1009]

Hi @kemalcany ! Because the content of your landing page is full of content, it will flicker and load the page very quickly. However, when your project has a large number of components, you will find it slows down before the components are rendered.

[userquin]

@kemalcany @thuongtruong1009 You can check this repo https://github.com/userquin/test-pwa-ts-4.5.5, I have included there a sw router for dynamic pages at first level and some server logic to use it on development (also modified the netlifly configuration but not yet tested). On this repo there is no flash on the dynamic route /hi/:name.

The repo contains the pwa plugin package for some internal tests I'm doing, I have also upload the tar.gz but the repo should also work with the npm version: just run pnpm install && pnpm remove -D vite-plugin-pwa && pnpm i -D vite-plugin-pwa (to include the local version of my tests again just run pnpm add -D ./vite-plugin-pwa-0.11.13.tgz from root folder).

The changes are on this commit https://github.com/userquin/test-pwa-ts-4.5.5/commit/6b6368df91908746d1518eaf07809bb8d854707b:

• included server.ts to allow work with dynamic routes: changed the preview-https to start it via esno
• added nuxt style for routes
• included dynamic routes on ssg
• added src/sw.ts: the sw router only at one level, if more levels on dynamic routes you should add the logic
• added some logic to the pinia store to avoid adding _name on initial load
• added netlify configuration to allow serve html pages instead only index.html for any route: https://github.com/userquin/test-pwa-ts-4.5.5/commit/6b6368df91908746d1518eaf07809bb8d854707b#diff-ab8f79b68b7adff7a07db953bf453f3c5aa6ade98d2b1b67d8432b36392489edR10, https://github.com/userquin/test-pwa-ts-4.5.5/commit/6b6368df91908746d1518eaf07809bb8d854707b#diff-ab8f79b68b7adff7a07db953bf453f3c5aa6ade98d2b1b67d8432b36392489edR15
• added also some headers for security

I'll try to add the app to netlify when I have time.

EDIT: I also change the pwa plugin options to use injectManifest strategy, there is no way to make it work with generateSW strategy: https://github.com/GoogleChrome/workbox/issues/2917#issuecomment-1046073177

[userquin]

You can test it here: https://optimistic-cray-38ef22.netlify.app/