Nextjs App Route 应该如何合理划分 Server Component 和 Client Component

[taine221]

目前对 Server 和 Client 的概念还是比较模糊，可以能用传统前后端场景来举个例子说明吗，十分感谢

[estk]

app 目录和 pages 目录同时用

[Rocketer]

你用一个 project 同时做前后端？

[tomtom9]

因为 NextJS 13 强调服务器渲染带来的快速响应，所以我看到不少人建议将「有和用户 Interact 」的 Component 抽象出来，用'use client'标注。然后再在需要的地方 import 就好。
综合建议还是能 SSR 就 SSR ，如果你的使用场景不适用 SSR （例如 SinglePageApplication ）那也许 NextJS 并不适合。

[estk]

@tomtom9 #3
SSR 好多 UI 组件库不支持，'use client' 除外
都 'use client' 还不如再建个 pages 目录

[hyyou2010]

可以先理解为就是最传统的服务端渲染，这是页面的主干
然后，有一些交互的小卡片是在客户端渲染的，这些小卡片上可以运行 react hook

在实际使用过程中也经常搞混，感觉复杂度增加不少，故也迷惑 next.js 这个方向是否长久
next.js 的优势是服务端渲染的快速以及 SEO ，但随着技术的发展这两项优势是否会削弱？
平时我喜欢选用 next.js ，但很大程度是因为其是一个快速小全栈

[taine221]

@hyyou2010 感谢，我也是这么觉得。在组件的合理划分上不再那么随心所欲了...另外我的 Nextjs 项目仅包括前端，写着写着感觉还不如写普通 SPA ...

[AsuorZ]

官网对比图很明显，服务端组件不能触发事件，反之一把梭，哦还有分页

[rocmax]

尽量把客户端组件推到组件树的末端，需要获取数据的时候一律在上层的服务器组件处理。
如果需要在客户端组件的下层导入服务器组件，将服务器组件作为 children props 传入。同理 ui 库的 context 也可以用这种方法在组件树的顶端导入而不影响下方的服务器组件。
类似于 antd 这种强烈依赖 context 的组件库用起来比较麻烦，建议使用 tailwindcss 以及 shadcn/ui 。