小编Ste*_*isk的帖子

如何在 RemixJS 中跟踪页面浏览量?

我正在构建一个 Remix 应用程序,并希望根据用户正在查看的页面在我的数据库中记录一些用户分析。我还想逐个路由地执行此操作,而不仅仅是简单地使用原始 URL。

例如:我想知道“用户查看的 URL /emails/123”以及“用户查看的路由 /emails/$emailId”

这个问题可以概括为“我想为每个用户导航运行一段服务器代码”

对于我的跟踪,我假设用户在其浏览器中启用了 JavaScript。

我尝试过的解决方案:

在加载器中记录

这会是这样的:

export const loader: LoaderFunction = async ({ request, params }): Promise<LoaderData> => {
  myDb.recordPageVisit(request.url);
}
Run Code Online (Sandbox Code Playgroud)

这不起作用,因为每次页面访问都可以多次调用加载程序(例如,在运行操作后)

请求参数中可能隐藏了一些值,告诉我们这是初始页面加载还是稍后访问,但如果是这样,我找不到它,包括当我检查原始 HTTP 请求时。

必须将此代码放入每个加载器中也很烦人。

在节点代码中记录URL

我使用 @remix-run/node 作为我的基础混音服务器,所以我有设置节点中间件的逃生舱口,我认为这可能是一个很好的答案:

  const app = express();
  app.use((req, res, next) => {
    if (req.url.indexOf("_data") == -1) {
      myDb.recordPageVisit(req.url);
    }
    next();
  });
Run Code Online (Sandbox Code Playgroud)

我尝试忽略_data其中的路由,但这不起作用,因为重新混合非常高效,并且当用户导航时,它使用 ajax-y 调用仅获取 loaderData 而不是从服务器获取完整渲染的页面。我知道这是 Remix 的行为,但在我走这条路之前我不记得它:facepalm:

据我所知,无状态地跟踪唯一的页面浏览量(即纯粹基于当前的 URL)是不可能的 - 您还需要查看用户的上一页。

我想知道引用者是否允许它无状态地工作,但引用者似乎没有按照我希望的方式运行:在第一个加载器请求页面数据时,引用者标头已经设置为当前页面。因此,基于引用者,初始加载和突变后加载看起来是相同的。我不知道这在技术上是否是一个错误,但这肯定不是我期望的行为。

remix.run

4
推荐指数
1
解决办法
5886
查看次数

标签 统计

remix.run ×1