Nuxt - 如何在服务器端渲染后在客户端运行代码？

Posted 2023-05-08

【中文标题】Nuxt - 如何在服务器端渲染后在客户端运行代码？

【英文标题】：Nuxt - How can I run a code in client-side after server-side-rendering?

【发布时间】：2019-01-24 07:28:13

【问题描述】：

我创建了一个注入 noty (https://ned.im/noty/#/) 的插件，所以我可以在全局范围内使用它，它看起来像这样：

export default ( app , inject) => 

    const notify = function (options = ) 
        if (process.client) 
            new Noty(options).show();
        
    

    app.$notify = notify;
    inject('notify', notify);

此插件仅在客户端显示通知。在服务器端没有出现通知，因为它只能在浏览器中显示。 我有一个包含产品详细信息的页面，并且我正在以 asyncData 方法接收数据。当找不到产品时，我想显示一个带有正确消息的通知并将用户重定向到产品列表页面。当我在客户端更改路线时，一切都很棒。但是，在服务器端发生的第一个页面加载（例如，我在浏览器中手动更改了一个 url）时，不会出现通知，只有重定向有效。 我的问题是：在这种情况下如何显示通知？如何在 s-s-r 之后在浏览器中创建通知，或者我的问题的其他最佳解决方案是什么？

在客户端已经渲染后（在服务器端渲染之后）有什么方法可以运行一些代码？

【参考方案1】：

你可以只为那个插件禁用 s-s-r。

plugins: [
   ...,
    src: '~plugins/yourplugin.js', s-s-r: false 
]

【参考方案2】：

好的，我找到了一个模块：https://github.com/potato4d/nuxt-client-init-module

【参考方案3】：

不可能知道（我回答时 nuxt

https://github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837