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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 477 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

8 条回复 • 2023-10-28 08:10:14 +08:00

estk

2023-07-21 07:14:27 +08:00 via iPhone

Rocketer

2023-07-21 07:25:18 +08:00 via iPhone

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

tomtom9

2023-07-21 08:02:57 +08:00

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

estk

2023-07-21 09:06:36 +08:00

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

hyyou2010

2023-07-21 11:03:22 +08:00

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

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

taine221

2023-07-21 19:09:19 +08:00

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

AsuorZ

2023-08-29 14:34:39 +08:00 via Android

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

rocmax

2023-10-28 08:10:14 +08:00 via Android

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