如何在Next.js中创建可重用组件_Next.js

如何在Next.js中创建可重用组件

next.js

如何在Next.js中创建可重用组件,next.js,Next.js,我不确定是否在Next.js文档中遗漏了一些内容，但似乎在Next.js应用程序中重用组件而不破坏组件是不可行的根据我的理解： Next.js使用SSR通过getStaticProps、getstaticpath或getServerSideProps在页面级别获取数据一旦获取了这些数据，它就会通过道具返回到页面然后，页面可以访问道具，然后可以按照自己的意愿处理这些数据为了对页面的子组件使用SSR技术，我们必须在页面级别获取子组件数据，然后将这些数据传递给我们的组件这给我带来了一些担

我不确定是否在Next.js文档中遗漏了一些内容，但似乎在Next.js应用程序中重用组件而不破坏组件是不可行的

根据我的理解：

Next.js使用SSR通过
```
getStaticProps
```
、
```
getstaticpath
```
或
```
getServerSideProps
```
在页面级别获取数据
一旦获取了这些数据，它就会通过道具返回到页面
然后，页面可以访问道具，然后可以按照自己的意愿处理这些数据
为了对页面的子组件使用SSR技术，我们必须在页面级别获取子组件数据，然后将这些数据传递给我们的组件

这给我带来了一些担忧和问题：

这意味着我们的子组件总是依赖于父页面
我们不能在其他页面上重用我们的组件而不重复逻辑或破坏组件
如何在没有客户端渲染的情况下重用组件
我是否可以在应用程序的入口点获取所有内容，然后使用Redux将其存储在各种状态变量中，并在需要时在组件级别调用它们

通过使用客户端渲染，它有点违背了使用Next.js的目的。是的，我可以使用

useffect

hook在组件级别获取数据，但这对我来说似乎不合适

我是否在架构模式中遗漏了什么，或者这只是使用Next.js时的一个漏洞

我越是思考这个问题，就越意识到继电器和GraphQL是未来。

你的最后一个问题提供了答案。您确实可以在入口点（通常是

\u app

页面）从服务器端获取所需的所有数据，并将其存储在context/redux中，以供需要的组件使用。但是这会限制您对页面的控制，不是吗？因为您只能选择最初使用getServerSideProps或getStaticProps加载数据的方式。在逐页的基础上，您可以更好地控制如何加载特定用例的数据。因为您可以根据所面临的场景在两者之间进行选择。