标签: server-side-rendering
NextJS 13 <button onClick={}> 事件处理程序无法传递给客户端组件 props
错误：事件处理程序无法传递给客户端组件道具。^^^^^^^^^^ 如果您需要交互性，请考虑将其部分转换为客户端组件。
const reqHelp = () => {
Swal.fire({
title: '1',
text: '1',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes',
cancelButtonText: 'No',
})
}
return(
<div className="buttons">
<button onClick={reqHelp} className="stopwatchButton">Request Help</button>
</div>
);
搜索 NextJS 13 官方文档以及关于服务器/客户端渲染
推荐指数
解决办法
查看次数
NextJS 13 文件夹结构最佳实践
我正在学习使用 NextJS，并且正在使用 App Router 的最新版本，我目前陷入如何进行路由的困境，例如将注册和登录页面放在哪里，以及它的一般文件夹结构，在哪里我将组件以及如何将其他相关组件组合在一起，您能否阐明这个主题，请使其尽可能简单，也许可以给出一些示例，因为我仍在学习，任何帮助将不胜感激，谢谢！
推荐指数
解决办法
查看次数
如何使用服务器组件获取查询参数（下13）
Next13 已推出，他们建议使用新app目录，其中每个组件默认都是“服务器组件”
在“服务器组件”内，您可以使用：
async/await获取数据。cookies()检索 cookieheaders()检索请求标头。
但我找不到如何检索查询参数。
在 Next 13 之前getServerSideProps，您可以使用context.query来访问查询参数。
您知道如何使用 Next 13 中的“服务器组件”检索查询参数吗？
推荐指数
解决办法
查看次数
Next.js 选择退出 _app.js 中特定页面的布局组件
如何不使用布局组件包装特定页面_app.js？
例如，我有两个页面 aspages/home和pages/about，现在我怎么能不用组件包装我的pages/home页面Layout呢？
页面/_app.js
import "../styles/globals.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
我尝试过的：
页面/_app.js
function MyApp({ Component, pageProps }) {
console.log(typeof Component); // gives me a function
switch (Component) {
case Home():
return <Component {...pageProps} />;
default:
return (
<Layout>
<Component {...pageProps} />{" "}
</Layout>
);
}
}
页面/home.js
import …推荐指数
解决办法
查看次数
Redux 对 NextJS 13 App 目录仍然有意义吗？
随着新的 NextJS 13 引入app目录，redux 仍然有意义吗？
按照下一个文档，已经可以将 redux 提供程序包装在客户端组件周围。但是与 redux 共享状态将如何影响 Next 性能和优化？
接下来的文档要求在需要数据的地方获取数据，而不是向下传递组件树。请求将被自动删除重复数据。
我对 Redux 的用途是控制应用程序中我希望保持一致的某些部分。
例如：如果我更改用户名，我希望它反映在需要该数据的整个应用程序中。
推荐指数
解决办法
查看次数
SvelteKit 中的 SSR 解释
我最近开始通过 SvelteKit 使用 Svelte，我对这个框架有一些疑问，但我无法在源代码/文档中找到任何直接答案：
- SvelteKit 有SSR，在文档中它说：
如果您需要从外部 API 请求数据，所有服务器端代码（包括端点）都可以访问 fetch。
- 除了端点之外，服务器端还呈现哪些代码以及它如何决定这一点？svelte 页面脚本中的所有代码都在客户端上运行，还是其中一些代码在服务器上运行？
- 为了在本地使用 SSR，您需要一个适配器，还是 svelte 自己启动服务器？
- 例如，SSR如何在像Netlify这样的生产环境中工作。netlify 适配器是否用于 SSR（在netlify 函数中运行端点）？如果未提供 netlify 适配器，端点将如何/在哪里运行？
- 如果我想在sveltekit 项目中使用自定义 netlify 函数，需要哪些配置（除了 netlify.toml 和 netlify 适配器）才能让 netlify 识别函数目录中的函数？
- SSR 和预渲染之间有什么区别？SSR仅用于端点和其他js代码，预渲染用于生成Html并将其发送到客户端，然后将其与编译后的js代码一起发送到浏览器？
谢谢！
prerender server-side-rendering svelte netlify-function sveltekit
推荐指数
解决办法
查看次数
将 React.Context 与 Nextjs13 服务器端组件结合使用
Next13 一周前发布，我正在尝试将 next12 应用程序迁移到 next13。我想尽可能多地使用服务器端组件，但我似乎无法使用
import { createContext } from 'react';
在任何服务器组件中。
我收到此错误：
Server Error
Error:
You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
,----
1 | import { createContext } from 'react';
: ^^^^^^^^^^^^^
`----
Maybe one of these should be marked as a client entry with "use client":
这里有其他选择吗？还是我必须诉诸道具钻探来获得服务器端渲染？
推荐指数
解决办法
查看次数
Next.js 未处理的运行时错误“无法加载脚本：/_next/static/chunks/...”仅在开发模式下触发
我在跑步...开发模式下运行... \na next.js 应用程序。我有一个页面，它映射来自后端的 JSON 数据，并为包含的每个“事件”对象呈现一个组件“EventListItem”。
\n列表页面：
\n- \n
- http://localhost:3000/6/events/2021-08-26 \n
- (http://localhost:3000/[cinemaId]/events/[[...date]]) \n
- 内容根目录的路径：'pages/[cinemaId]/events/[[...date]]' \n
该列表项是可点击的，以便用户可以导航到包含“事件”对象的所有详细信息的详细信息页面。
\n详细页面：
\n- \n
- http://localhost:3000/6/events/detail/2021-08-26/152430 \n
- (http://localhost:3000/[cinemaId]/events/detail/[[...date]]/[[...slug]]) \n
- 内容根目录的路径：'pages/[cinemaId]/events/detail/[...slug]' \n
在开发模式下... \n当我单击链接时，在浏览器导航到正确页面并正确呈现所有信息之前，我会立即触发错误：
\nUnhandled Runtime Error\nError: Failed to load script: /_next/static/chunks/pages/%5BcinemaId%5D/events/detail/%5Bdate%5D/%5BeventTypeId%5D.js\nCall Stack\nappendScript/</script.onerror\nnode_modules/next/dist/client/route-loader.js (83:51)\n但是，正如我所说，错误会短暂闪烁，然后详细信息页面的内容会正确呈现。
\n当我直接导航到 URL 而不单击链接\xe2\x80\xa6 时，一切都会正确呈现，没有错误。
\n当我尝试 git bisect... \n这个错误阻止了我使用 git bisect 查找原因的尝试。我记得第一次发生是在三天前，但是当我签出一周前的提交时，错误就出现了。我不能 100% 确定，但我不记得在进行这些提交时看到过此错误。
\n当代码在生产中运行时... \n我无法复制代码，一切都运行顺利
\n服务器端渲染 \n当前两个页面都只有准系统 SSR 代码。目前，所有数据获取都是在客户端完成的。这将会改变。
\n感谢您的阅读。任何见解都将非常受欢迎。代码如下，供参考...
\n组件中的链接：
\n<Link\nhref={{pathname: "/[cinemaId]/events/detail/[date]/[eventTypeId]",\nquery: {cinemaId: cinemaId, date: date, …javascript runtime-error reactjs server-side-rendering next.js
推荐指数
解决办法
查看次数
不支持的服务器组件类型：undefined/next js 13
当我尝试执行一个简单的操作时，我在 Next js 13 中遇到了一些奇怪的行为。我准备了一个最简单的例子来说明这个问题。我希望你能帮我弄清楚为什么会发生这种情况。
有 3 个组件。
页：
import {Container} from '../components/Container'
export default function index() {
return (
<Container>
<Container.Window>
<h1>12345</h1>
</Container.Window>
</Container>
)
}
容器：
'use client';
import { Window } from './Window';
export const Container = ({ children }) => {
return children;
};
Container.Window = Window;
窗户：
"use client";
export const Window = ({children})=>{
return children
}
页面服务器组件。容器和窗口组件是客户端的。集装箱进出口窗口。
我收到此错误：
“不支持的服务器组件类型：未定义”
单独导入Window组件。
有效，没有错误使容器组件成为服务器组件。
有效，没有错误使页面组件成为客户端。
有效，没有错误
但我认为第一个选择是最方便的。很想让它发挥作用
推荐指数
解决办法
查看次数
在 next.js 应用程序上管理用户的全局状态
我来自SPA和REST/GraphQl API 的世界。现在我正在使用Next.js库为SSR(Server Side Rendered) React App构建个人项目。
由于我在我所有的单页面应用程序中都使用了Redux，我现在想知道我应该如何在每个路由用户访问、加载新链接和刷新页面时管理用户状态。
我找到了一些关于会话和 cookie 的信息，但我对它们都不熟悉。我看了一些关于在Next.js 中使用Redux 的在线文章，但看起来很复杂。
global-state node.js server-side-rendering next.js react-state-management
推荐指数
解决办法
查看次数
标签 统计
next.js ×9
reactjs ×8
javascript ×4
global-state ×1
next.js13 ×1
node.js ×1
prerender ×1
react-redux ×1
redux ×1
svelte ×1
sveltekit ×1