将事件处理程序放在 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 标签(如 meta
、title
等)的方法。它会给你自定义头部标签的自由。
我正在学习 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 标签(如 meta
、title
等)的方法。它会给你自定义头部标签的自由。