将事件处理程序放在 NextJS _document 中——以及 NextJS 页面和 React SPA 之间的关系

Putting event handlers inside NextJS _document -- and relationship between NextJS pages and React SPA

我正在学习 NextJS 并试图了解 server-rendered 和 client-side React 代码之间的区别——虽然 NextJS 看起来很棒,但我在概念上理解两种渲染类型之间的差异以及这些差异是什么 mean

例如,我在 NextJS 文档中看到以下评论,在描述 `_document`` 的部分

// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

为什么不能将事件处理程序放在 _document 中?这和把它们 'client side' 有什么区别?

我也有点困惑,因为 NextJS 似乎以构建 'pages' 为导向——也就是说,支持添加 <HEADER> 等,就好像我们正在构建一个静态网站一样。但如果我要构建一个 React SPA,只有一页,不是吗?可以使用 React 路由器模拟不同的 'pages',但实际包含的 HTML(header、body 等)保持不变,不是吗?也就是说,我们从未真正离开实际的 HTML 页面?

我可以使用 NextJS 好的——遵循文档的教程——但显然概念上我错过了森林树。非常感谢任何线索或指示!

pages/_app.js 是您需要 client-side 代码的地方。它在所有页面之间共享。

pages/_document.js 仅在 SSR 中运行。所以你需要把相关的代码放在那里。

话虽如此,如果您需要修改应用程序的正常行为并以您的方式对其进行自定义,则只需创建这些页面。

SSR 表示服务器端呈现,当您在 url 栏中键入 url 并按回车键或使用刷新按钮刷新页面时会发生这种情况.

CSR Client Side Rendering 另一方面是SPA(single page app)的方式。所以 URL 发生了变化,但没有服务器调用。它在 pages 目录中查找资源以进行路由。

Next HEAD 是在每个页面中操纵 header 标签(如 metatitle 等)的方法。它会给你自定义头部标签的自由。