如何在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加载数据的方式。在逐页的基础上,您可以更好地控制如何加载特定用例的数据。因为您可以根据所面临的场景在两者之间进行选择。