Nextjs App Route 应该如何合理划分 Server Component 和 Client Component
taine221 · 2023-07-21 02:50:40 +08:00 · 2206 次点击这是一个创建于 489 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前对 Server 和 Client 的概念还是比较模糊，可以能用传统前后端场景来举个例子说明吗，十分感谢
 |
1
estk 2023-07-21 07:14:27 +08:00 via iPhone
app 目录和 pages 目录同时用
|
 |
2
Rocketer 2023-07-21 07:25:18 +08:00 via iPhone
你用一个 project 同时做前后端？
|
 |
3
tomtom9 2023-07-21 08:02:57 +08:00
因为 NextJS 13 强调服务器渲染带来的快速响应，所以我看到不少人建议将「有和用户 Interact 」的 Component 抽象出来，用'use client'标注。然后再在需要的地方 import 就好。
综合建议还是能 SSR 就 SSR ，如果你的使用场景不适用 SSR （例如 SinglePageApplication ）那也许 NextJS 并不适合。 |
|
4
estk 2023-07-21 09:06:36 +08:00
|
 |
5
hyyou2010 2023-07-21 11:03:22 +08:00
可以先理解为就是最传统的服务端渲染，这是页面的主干
然后，有一些交互的小卡片是在客户端渲染的，这些小卡片上可以运行 react hook 在实际使用过程中也经常搞混，感觉复杂度增加不少，故也迷惑 next.js 这个方向是否长久 next.js 的优势是服务端渲染的快速以及 SEO ，但随着技术的发展这两项优势是否会削弱？ 平时我喜欢选用 next.js ，但很大程度是因为其是一个快速小全栈 |
 |
6
taine221 OP @hyyou2010 感谢，我也是这么觉得。在组件的合理划分上不再那么随心所欲了...另外我的 Nextjs 项目仅包括前端，写着写着感觉还不如写普通 SPA ...
|
 |
7
AsuorZ 2023-08-29 14:34:39 +08:00 via Android
官网对比图很明显，服务端组件不能触发事件，反之一把梭，哦还有分页
|
 |
8
rocmax 2023-10-28 08:10:14 +08:00 via Android
尽量把客户端组件推到组件树的末端，需要获取数据的时候一律在上层的服务器组件处理。
如果需要在客户端组件的下层导入服务器组件，将服务器组件作为 children props 传入。同理 ui 库的 context 也可以用这种方法在组件树的顶端导入而不影响下方的服务器组件。 类似于 antd 这种强烈依赖 context 的组件库用起来比较麻烦，建议使用 tailwindcss 以及 shadcn/ui 。 |
Select Language