电容器中的 NextJS s-s-r

Posted 2023-03-16

【中文标题】电容器中的 NextJS s-s-r

【英文标题】：NextJS s-s-r in Capacitor

【发布时间】：2021-12-29 13:25:24

【问题描述】：

我们将 Next.js 与服务器端渲染 (s-s-r) 结合使用，并且我们希望使用 Capacitor.js 封装我们的应用程序，以便我们可以将其发布到 android 和 ios 设备上。遗憾的是，这似乎只有在使用静态站点生成 (SSG) 时才有可能，我什至找不到任何关于如何尝试使 s-s-r 工作的信息。

几个线程似乎暗示这是可能的：How to package a hosted web app with Ionic Capacitor（不确定这里使用的是什么类型的渲染）和https://github.com/MicrosoftDocs/cordova-docs/blob/master/articles/getting-started/create-a-hosted-app.md（这是用于 Cordova）。我以前从未使用过 Nuxt.js，但这里有一些提示表明该框架也可以使用：Using Capacitor 3 with Nuxtjs s-s-r

本质上，是否可以使用 Capacitor 的 Webview 来显示托管应用程序，而不必先静态构建它？这可能是 Capacitor 3 现在允许的吗？

如果这是不可能的，您对拥有一个移动应用程序的建议是什么，因为我们已经在 Next.js 中构建了我们的网络（和移动响应）产品，大量使用了 getServerSideProps（即 s-s-r）。任何帮助将不胜感激。

【参考方案1】：

我目前正在调查同样的问题。 希望使用 s-s-r 封装基于 nextjs 的现有响应式 Web 应用程序。

在这个blog 我在 cmets 中读到，您基本上可以将电容器指向任何现有的 URL（您已经运行的网站也是如此）。

虽然我还没有测试过。我现在最大的问题是：

那我们还可以使用原生功能吗（比如推送通知，这是将其捆绑为应用程序的主要原因之一）？可能需要在我现有的网络应用程序中集成所需的库，并检查我们是否以某种方式在电容器环境中运行。 Apple 在提交此类案件时如何处理？我读到他们确实拒绝那些主要只是包装现有网站而没有提供任何类似应用优势的应用。

【讨论】：

感谢您的回复。目前，由于时间和资源的限制，我们选择了经典的 [PWA]((web.dev/install-criteria) ) 和custom install。它暂时填补了空白，但没有解决这个问题。但是，我在这里得到了 Max Lynch 的回复 github.com/ionic-team/capacitor/discussions/3487，说应该可以使用 server 道具。

回答您的其他问题：1）我相信如果您在网络上使用电容器插件，并且他们能够正确检测到您所在的平台，如果在设备上它能够连接到本机功能（至少上面的一篇文章似乎暗示这可能需要一些调整）。对于 2) 很难说，我之前已经提交过电容器包装的应用程序，所以只要你没有 Apple 阻止的东西（例如应用程序内付款），我会说你应该很好。如果我有时间建立一个包含基本用例的存储库，我会报告。

感谢 Miguel，我最近使用 server.url 配置进行了测试。运行安静，至少可以安装它。但是还需要做更多的工作才能让它感觉更本土一点。特别是默认情况下导航处理不好，例如android 上的后退按钮关闭应用程序而不是导航回来。但这肯定是可以解决的...... :)

很高兴听到这个消息。除了导航问题，您的应用程序结构是什么样的？主要是，如果不从 Next 导出，您是否只是创建一个纯 html index.html 文件供应用程序运行？对于后退按钮，希望这会有所帮助：***.com/questions/20373849/….