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

时间:2019-01-20 16:27:25

标签: reactjs next.js ssr

我正在学习NextJS,并且试图把我的头放在服务器渲染和客户端React代码之间的差异上。虽然NextJS看起来很棒,但在概念上理解这两种类型之间的区别时遇到了一些麻烦渲染以及这些差异平均值

例如,我在描述`_document``

的部分中遇到了NextJS文档中的以下注释。
// _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中?与将它们置于“客户端”之间有什么区别?

我还有些困惑,因为NextJS似乎是围绕构建“页面”而来的-也就是说,支持添加<HEADER>等,就像我们在构建静态网站一样。但是,如果我要构建一个React SPA,那么只有一页,不是吗?可以使用React路由器模拟不同的“页面”,但是实际包含的HTML(标题,正文等)保持不变,不是吗?也就是说,我们从未真正离开过实际的HTML页面吗?

我可以使用 NextJS OK -按照文档的教程进行操作-但显然从概念上讲我缺少树木的森林。任何线索或指针,不胜感激!

1 个答案:

答案 0 :(得分:1)

pages/_app.js是您需要客户端代码的地方。在所有页面之间共享。

pages/_document.js仅在SSR中运行。所以您需要在其中放置相关代码。

也就是说,只有在需要修改应用程序的正常行为并以自己的方式自定义它时,才需要创建这些页面。

SSR 表示服务器端呈现,它发生在您在网址栏中键入url并按Enter或使用刷新按钮刷新页面时。

另一方面,

CSR 客户端渲染是SPA(单页应用)的方式。因此网址会更改,但没有服务器调用。它在pages目录中寻找资源以进行路由。

下一个HEAD 是在每个页面中操作诸如metatitle等标题标签的方法。它将使您可以自由自定义头部标签。