通过Next.js在服务器端渲染中反应状态

Question

我对React和将状态传递给组件并设置CSR应用程序非常满意，但是我对Next.js有点困惑。我有时会理解提供SSR页面的好处，但是很难理解如何将这两个页面结合在一起。我正在使用phillips hue API制作一个基本的应用程序。我认为我在哪里：

• 我想提供一个SSR仪表板
• 在我获取StaticProps（）以更新仪表板上的详细信息之后，我想允许用户与该应用进行交互，并使用React的状态将信息传递给组件。

问题：

• 我现在需要呈现一个客户端页面吗？
• 有没有一种方法可以将状态添加到next.js文件中，以使用户可以在同一页面上进行交互而无需呈现另一页面？
• 如何将JSX添加到Next中，还是应该将Next.js更像是节点服务器？

感谢您的帮助！

Answer 1

• 如何将JSX添加到Next中，还是应该将Next.js更像是节点服务器？

Next.js允许您通过JSX编写React组件（页面/组件），并且还可以像Node服务器一样实现API路由！

• 我现在需要呈现一个客户端页面吗？

  这取决于您的需要，但是我可以说您可以将其设置为SSR或CSR或两者兼而有之。 Next.js构建的页面的常见用例可能按以下顺序发生：

  • 从服务器端加载数据（getStaticProps，getServerSideProps）
  • SSR-通过React的道具渲染该数据
  • CSR（用户互动，useEffect / componentDidMount ...）

• 有没有一种方法可以将状态添加到next.js文件中，以使用户可以在同一页面上进行交互而无需呈现另一页面？

Next.js仅呈现我们正在访问的页面（一次提供一个URL） 您可以添加状态，例如常见的React：useState（功能组件），this.setState（）（基于类的组件），...