[英]How does Nuxt3 know which code to execute on the server-side vs client-side?
I am wanting to use Nuxt3.我想使用 Nuxt3。 From my understanding, it uses universal rendering, which is like a cross between CSR and SSR.
根据我的理解,它使用通用渲染,就像 CSR 和 SSR 之间的交叉。 I have a few questions, however, before I get started.
然而,在我开始之前,我有几个问题。
[assuming that you do have ssr: true
in your Nuxt config file] [假设你的 Nuxt 配置文件中确实有
ssr: true
]
Nuxt runs your app in an isomorphic way, meaning that most of the code should both run on the server and on the client. Nuxt 以同构方式运行您的应用程序,这意味着大部分代码应该同时在服务器和客户端上运行。
Here are all the various hooks available for Nuxt3, and an explanation as of where they are supposed to run (server, client or both).以下是 Nuxt3 可用的所有各种挂钩,以及它们应该在何处运行(服务器、客户端或两者)的解释。 This lifecycle for Nuxt2 may be useful because it's more visual overall.
Nuxt2 的这个生命周期可能会有用,因为它整体上更直观。
Note that some parts of Nuxt can be exclusive to the server ( server routes
) or client ( middleware
).请注意,Nuxt 的某些部分可以专用于服务器(
server routes
)或客户端( middleware
)。
Depending on how you use and implement your JWT, you may give some hints to Nuxt.根据你如何使用和实现你的 JWT,你可能会给 Nuxt 一些提示。 Assuming that you want to use it as a plugin , you could have:
假设您想将其用作插件,您可以:
/plugins/myPlugin.ts
to have it isomorphic /plugins/myPlugin.ts
让它同构/plugins/myPlugin.client.ts
to have it only on the client side (reciprocity for the server.ts
suffix) /plugins/myPlugin.client.ts
只在客户端有它( server.ts
后缀的互惠) It all depends if your package/implementation can be isomorphic or not.这完全取决于您的包/实现是否可以同构。 There is no need to have everything running on the server if there is no benefit.
如果没有好处,就没有必要让所有东西都在服务器上运行。
Please also note that some code can only run on the client (using window
) or on the server (using fs
).另请注意,某些代码只能在客户端(使用
window
)或服务器(使用fs
)上运行。
You can also of course use some dirty conditional like if (process.client) {...
into an isomorphic place (middleware, composable, etc).您当然也可以使用一些肮脏的条件,如
if (process.client) {...
进入同构位置(中间件、可组合等)。
Pinia would probably be used with it's Nuxt module , so you don't really need to worry about it running on the server or the client. Pinia 可能会与它的Nuxt 模块一起使用,所以你真的不需要担心它在服务器或客户端上运行。 I'm not sure if there are parts that could run on both btw.
我不确定是否有部分可以在两个 btw 上运行。
If there are such situations, don't worry: the core team of Vue have already done that work for you.如果出现这种情况,请不要担心:Vue 的核心团队已经为您完成了这项工作。
Too vague of a question, I'd say it depends.这个问题太模糊了,我会说这取决于。 You need to take that decision, based on how a given NPM package works and what you do want to achieve with it.
您需要根据给定的 NPM package 的工作方式以及您希望通过它实现的目标来做出该决定。
If it supports a server, that would probably be faster there rather than on the client.如果它支持服务器,那可能会比在客户端更快。
For things only available on the client, you can import it globally with a client side-only plugin, or import it into a local component + make a conditional (or use a lifecycle hook that is run only on the client).对于仅在客户端可用的东西,您可以使用仅客户端插件将其全局导入,或将其导入本地组件+设置条件(或使用仅在客户端运行的生命周期挂钩)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.