SvelteKit 路线在重新加载时出现 500 错误

Question

我从事 SvelteKit 项目已经有一段时间了。总是存在这样的问题：如果我重新加载主页以外的路由，则会收到 500 错误。我是网络开发新手。

因此，我查找了我能想到的所有搜索词，比如“SvelteKit 在重新加载时中断”。最终，我遇到了这个 [GitHub 线程][1]，这是我见过的最接近表达类似问题的人。

我发现重新加载不一定是罪魁祸首。如果我通过输入网址手动导航到特定页面，我会收到相同的错误。我也未能找到讨论此问题的线程。

这发生在纸面上是有道理的。在有人使用路由器导航到这些页面之前，这些页面并不存在。路由器安装页面，所有关联组件中的

onMount

函数在客户端现场构建页面。我就明白这么多了。目前这个应用程序是纯粹的客户端，依赖于 localStorage 等客户端对象，因此像

load

这样的服务器功能对我没有帮助，因为它们无法访问 localStorage。

对我来说最后一根稻草是当我意识到如果我导航进出同一条路线时，将会有一些数据通过历史对象保留在后台，这会慢慢破坏页面的行为。

我的问题是：我到底如何才能让 SvelteKit 重新加载这些页面而不发脾气？

Answer 1

为了清楚起见，以下是调查结果的摘要：

问题：重新加载分页符 SvelteKit。

1. 页面依赖服务器数据。
   • 使用

     +page.server.js

     旁边的

     +page.svelte

     文件来实现

     load

     功能。 在 learn.svelte.dev 上加载页面数据的教程
2. 页面依赖于客户数据。
   • 在使用浏览器数据的代码之前添加

     if (browser)

     。这可能涉及

     window

     、

     localStorage

     等。我不确定在哪里可以找到这些属性的完整列表，但是

     localStorage

     是窗口的属性，因此这两个属性同时丢失是有道理的。

当在这里输入我的问题时，StackOverflow 向我显示了类似的错误：

• 如何解决我的 sveltekit 网站在重新加载时抛出 500 个错误的问题？ 这个示例给出了模棱两可的答案“我把它放在 Netlify 上，现在它可以工作了。”我的项目目前并未托管在云服务上，但它最终旨在实现此类目标。
• 修复 sveltekit 上重新加载时的 500 内部错误这提供了对未定义 localStorage 的建议修复。我至少能够创建一个优雅失败的加载函数，但它永远不会成功，因为它位于服务器端文件中，试图从 localStorage 加载数据。

我之前没有看到这些帖子，因为它们没有出现在我的搜索中，只有当我输入这个问题并输入标题以获得 StackOverflow 的推荐时。感谢 StackOverflow！

在执行了大量

if (browser)

调用之后，我实际上得到了 one 的路线来正确重新加载。对每条路线都执行此操作应该非常耗时。但我想这就是我目前的指示。它有一个非常笨拙的重新加载序列，实际上看起来非常有希望忘记 SvelteKit 决定保留的任何数据，尽管我还没有针对损坏问题对此进行测试。

问题仍然是我不知道发生了什么。这对我的项目来说不是问题，看起来

if (browser)

语句是正确的方法。我仍然会发布这个帖子，因为我认为它比现有的帖子更清晰。

问题仍然是，当 SvelteKit 遇到足够多的 if 语句时，它如何理解自动重新加载页面。很酷，但很奇怪。