Nuxt.js 中的组件可以与 Next.js 类似的客户端渲染和服务器渲染混合使用吗?

     2023-03-17     138

关键词:

【中文标题】Nuxt.js 中的组件可以与 Next.js 类似的客户端渲染和服务器渲染混合使用吗?【英文标题】:Can you mix up Client rendering and Server rendering for components in Nuxt.js similar to Next.js? 【发布时间】:2021-08-27 07:47:41 【问题描述】:

在 Next.js 中,您可以在同一页面上拥有一个静态端渲染或服务器端渲染的组件和另一个客户端渲染的组件。你能在 Nuxt.js 中做同样的事情吗?好像找不到合适的答案。

【问题讨论】:

看来问题是指一种混合模式,您可以同时为网站设置 SSG 和 s-s-r。 nextjs.org/docs/advanced-features/automatic-static-optimization。 Nuxt 没有混合模式 IIRC。它是 SSG 或 s-s-r。 @Kunukn 真的很好。我们需要看看 OP 在这里是什么意思,但是据我所知,Nuxt 中也没有 SSG + s-s-r 组合。不确定 Nuxt Nitro 是否会这样做,它更适用于边缘渲染(据我所知,无服务器上的 s-s-r)。 嗨@vjori,你在找什么的最新消息? @kissu Nuxt.js 中 Next.js 的等效功能。在 Next.js 中,您可以在一个页面中混合使用 4 种渲染模式。我想知道 Nuxt.js 是否为我们更喜欢 Vue.js 而不是 React.js 支持这个功能。 你能用 4 种模式的更多细节更新你的问题吗?另外,它们可以同时使用吗? 【参考方案1】:

默认情况下,您的组件会在以下两种情况下呈现:服务器 + 客户端(当然,如果您的应用不仅仅是 SPA)。 仅对于客户端渲染,您可以使用 <client-only> 作为包装器,如下所述:https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component

没有<server-only> 这样的东西,但您可以通过以下方式防止水合:https://github.com/maoberlehner/vue-lazy-hydration

【讨论】:

使用 Next Js Link 时更新 React 类组件

】使用NextJsLink时更新React类组件【英文标题】:UpdateaReactclasscomponentwhenNextJsLinkused【发布时间】:2021-11-0120:49:38【问题描述】:原帖我有一个用于Next/JS动态路径的React类组件。在初始加载时一切都很好。但是有一个边缘用例,如... 查看详情

Next.js 与 SCSS 拆分为每个组件的文件

...手,经常使用create-react-app(已退出)。通过create-react-app中的配置,我能够使用SCSS,而不是使用CSS模块方法,而是使用拆分的SCSS文件。例如:ComponentA.js 查看详情

我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据

】我想为vue.js(nuxt.js)中的每个组件加载和填充数据【英文标题】:Iwanttoloadandpopulatethedataforeachcomponentinvue.js(nuxt.js)【发布时间】:2017-11-2807:56:44【问题描述】:我按如下方式启动项目。vueinitnuxt/express我的目录是...components|-slider.vu... 查看详情

Nuxt.js 中的“文档未定义”

】Nuxt.js中的“文档未定义”【英文标题】:"documentisnotdefined"inNuxt.js【发布时间】:2018-02-1323:03:02【问题描述】:我正在尝试在Vue组件中使用Choices.js。组件编译成功,但随后触发错误:[vue-router]无法解析异步组件默认值... 查看详情

将 Material UI Link 组件与 Next.JS Link 组件一起使用

】将MaterialUILink组件与Next.JSLink组件一起使用【英文标题】:UsingtheMaterialUILinkcomponentwiththeNext.JSLinkComponent【发布时间】:2021-05-1910:25:45【问题描述】:我正在使用带有Next.js的Material-UI。我想使用Material-UILinkcomponent,以便我可以访... 查看详情

nuxt部署上线

...60;  .nuxt        static(可以不传)        nuxt.config.js        package.json上传到服务器对应的文件夹下运行npminstall安装package里的依赖运行npms... 查看详情

警告:带有样式组件的 Next.JS 站点中的 Prop `className` 不匹配

】警告:带有样式组件的Next.JS站点中的Prop`className`不匹配【英文标题】:Warning:Prop`className`didnotmatchinNext.JSsitewithStyledComponents【发布时间】:2021-11-1601:24:54【问题描述】:我在StackOverflow上搜索过类似问题,但答案要么是旧版本,... 查看详情

警告:带有样式组件的 Next.JS 站点中的 Prop `className` 不匹配

】警告:带有样式组件的Next.JS站点中的Prop`className`不匹配【英文标题】:Warning:Prop`className`didnotmatchinNext.JSsitewithStyledComponents【发布时间】:2021-03-3018:14:41【问题描述】:我在StackOverflow上搜索过类似的问题,但答案要么是旧版本... 查看详情

如果在 className 中使用变量,则 React/Next.js 中的 Tailwind 不会为 text-*xl 类生成 css

】如果在className中使用变量,则React/Next.js中的Tailwind不会为text-*xl类生成css【英文标题】:TailwindinReact/Next.jsdoesn\'tgeneratecssfortext-*xlclassesifvariableisusedinclassName【发布时间】:2021-11-0706:01:02【问题描述】:我想使用Tailwind创建ReactTit... 查看详情

将动态尾风类添加到反应组件(Next.JS + Tailwind + TS)

】将动态尾风类添加到反应组件(Next.JS+Tailwind+TS)【英文标题】:Adddynamictailwindclasstoareactcomponent(Next.JS+Tailwind+TS)【发布时间】:2022-01-0216:03:06【问题描述】:我在尝试将动态顺风类分配给反应组件时遇到以下菜鸟问题。我在tail... 查看详情

我可以将 React Bootstrap 与 Next.js 一起使用吗?

...没有抛出任何错误,它只是没有注册我的任何react-bootstrap组件。也许有一些我在 查看详情

如何从 Next.js 中的服务器获取 HOC 中的数据?

】如何从Next.js中的服务器获取HOC中的数据?【英文标题】:HowtofetchdatainHOCfromserverinNext.js?【发布时间】:2020-07-0319:04:03【问题描述】:我使用Next.js9.3.1创建了新应用。在带有s-s-r的旧应用程序中,我可以在HOC组件中(不在页面中... 查看详情

使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数

】使用Nuxt.js从页面组件的asyncData()方法调用mixin函数【英文标题】:CallmixinfunctionfromasyncData()methodofthepagecomponentwithNuxt.js【发布时间】:2019-08-0816:17:38【问题描述】:我可以用Nuxt.js从页面组件的asyncData()方法调用mixin函数吗?我的... 查看详情

从 Nuxt.js 与 PhpStorm 中的节点模块解析 SCSS 中的 @import .css

】从Nuxt.js与PhpStorm中的节点模块解析SCSS中的@import.css【英文标题】:Resolving@import.cssinSCSSfromnodemodulesinNuxt.jsvsPhpStorm【发布时间】:2020-12-0917:04:57【问题描述】:假设我想从我的主要app.scss中的节点模块导入一些样式表:@import\'~boo... 查看详情

如何管理来自 API 的大量路由及其与 Nuxt 路由器模块的组件关联

】如何管理来自API的大量路由及其与Nuxt路由器模块的组件关联【英文标题】:HowtomanagebunchofroutesfromAPIandtheircomponentassociationwithNuxtroutermodule【发布时间】:2020-10-0608:13:28【问题描述】:您好,亲爱的Nuxt/Vue/Node社区,我在我的Nuxt.j... 查看详情

将图像作为道具传递给 Next.js 中的样式化组件

】将图像作为道具传递给Next.js中的样式化组件【英文标题】:PassingimageaspropstostyledcomponentsinNext.js【发布时间】:2021-11-0212:43:30【问题描述】:我正在尝试传递一个图像以在NextwhitStyledComponents中设置为我的背景,但会导致意外行... 查看详情

Nuxt.js 仅客户端组件

】Nuxt.js仅客户端组件【英文标题】:Nuxt.jsClient-SideOnlyComponent【发布时间】:2021-04-1115:25:32【问题描述】:我在我的Nuxt.js项目中使用plotly.js,但在导入plotly.js时,我一直收到错误消息documentnotdefined。Nuxt.js文档没有提供关于如何... 查看详情

在页面加载时将道具传递给子组件 - 与 next.js 做出反应

】在页面加载时将道具传递给子组件-与next.js做出反应【英文标题】:Passpropstoachildcomponentonpageload-reactwithnext.js【发布时间】:2020-03-1222:24:48【问题描述】:我是React和Next.js的新手。我正在尝试将道具从获取请求传递给子组件到... 查看详情