Page reload during development

[darkship]

Hello,

While running deno task dev, after doing a few changes in the code I noticed that the page has a long loading (loading icon in Chromium tab header) until the browser shows an ERR_EMPTY_RESPONSE error.

When I use firefox, it does the same. Sometimes I don't get the ERR_EMPTY_RESPONSE error because of a "too many Location API calls" in the console and it stops reloading.

Chromium: Version 119.0.6045.159 (Official Build) Firefox: 120.0b9 Fresh: 1.5.4

[darkship]

https://github.com/denoland/fresh/assets/3523710/2c0ee5bb-1a91-43e6-8e36-8e3a6ffe2748

I was able to reproduce the effect with a new project (https://github.com/darkship/fresh-reload-bug) based on fresh 1.6

All I had to do is to add a handler in index.ts:

export const handler: Handlers<{}> = {
  async GET(_req, ctx) {
    await new Promise(resolve => { setTimeout(resolve, 100)})
    return ctx.render({});
  },
};

When the delay is 50ms, it works fine for me. Somewhere between 70-100 it starts to get nuts and it reloads like crazy.

[darkship]

@marvinhagemeister I added a repo and a video

[marvinhagemeister]

@darkship Awesome, I can reproduce the issue with the reproduction you shared! That should make fixing this issue a lot easier!

[marvinhagemeister]

@darkship It looks like https://github.com/denoland/fresh/pull/2154 might have already resolved it. It ensures that we properly disconnect the WS connection before reloading the page and that's something I ran into earlier today.

You can try the fix out by updating the $fresh/ import inside deno.json. Does that resolve the issue on your end too?

  {
    "imports": {
-     "$fresh/": "https://deno.land/x/[email protected]/",
+     "$fresh/": "https://raw.githubusercontent.com/denoland/fresh/498aa8c46370d2bd06e9ad84ad4a1e24cbc8727c/",
    }
  }

[darkship]

It doesn't reload like crazy anymore but if I set the timeout to 200 and I do some changes, it just never reloads after a few changes

[darkship]

@marvinhagemeister Would it make more sense to store the "revision" into the sessionStorage ? it would survive the tab/window reload + each tab/window would have their own revision storage

[marvinhagemeister]

Not sure if that would make a difference. The way it works at the moment is that the browser tries to establish a WS connection with the server. Once successful, the server will immediately respond back with the newest revision. If that's the first time the browser connected to the server (like after a page reload), it just updates the local revision reference.

If the connection is closed becaus the server restarts, then the browser re-connects, sees that the revision from the server is newer than the one it has and triggers a page reload.