可能是NextJs(使用ssr-api route)打包成桌面端的最佳解决方式

embedded/2024/10/20 17:39:42/

可能是NextJs(使用ssr/api route)打包成桌面端的最佳解决方式

前言

在我使用nextron(next+electron)写了一个项目后打包发现nextron等一系列桌面端框架在生产环境是不支持next的ssr也就是api route功能的这就导致我非常难受,耗费了小半个月结果告诉我只能使用NextJs的单页面模式也就是静态导出模式(因为在开发环境是支持ssr/api route的就导致我以为可以使用)这让我无法理解nextron的意义,我认为api route是NextJs作为全栈框架非常重要的功能,阉割后只能算作react plus,于是不甘心的我就开始在网上查找解决方案。

经历

>> 我在github找到了几个自称是可以在next+electron中使用ssr/api route的代码模板,但是在我不断的是错后得出这些代码模板或多或少都有问题,并不能正常打包,唯一一个让我打包成功的显示next-auth没有生效,询问作者怎么解决,作者告诉我:他不知道,这只是一个模板需要我自己去debug(流泪)。

>>为什么我不抛弃api route使用NextJs(csr)+其他后端?因为我使用了next-auth,这与我的项目不可分割,并且next-auth与api route是绑定的。再者我使用NextJs的缘由就是因为其api route能让我快速搭建全栈项目,若是阉割我还不如不用NextJs直接使用react。

>>之后我打算将NextJS的csr与ssr部分分开,在服务端部署ssr部分,桌面端打包csr部分,然后通过在网页端登录获取个人的_id,然后通过_id登录桌面端(将登录功能分割到网页端),但是依旧失败,因为next-auth要求ssr+csr绑定,如果分割只能去掉next-auth。

>>就在我准备使用下下策:将nextron中的NextJs部分提取成网页然后通过iframe(iframe真的很垃圾,是没有办法的办法)嵌套在electron中进行打包的时候它出现了:

tw93/Pake: 🤱🏻 Turn any webpage into a desktop app with Rust. 🤱🏻 利用 Rust 轻松构建轻量级多端桌面应用

Pake:一款基于Rust语言和Tauri框架的桌面应用开发框架,可以将网页内容转化为小巧玲珑的桌面应用。

它可以将任何网页直接打包成桌面端,所以我们只需要将NextJs部署然后通过Pake打包即可

省流

Pake的部署及其简单,你只需要以下几步:

  1. 安装rust

    直接去官网安装,点击exe安装时会出现选项,一直选择1即可,实在不会网上教程也很多随便找一个就行。

  2. 打开你的管理员终端输入:

    npm i -g pake-cli

    安装依赖,这边不建议使用淘宝镜像,因为我使用淘宝镜像出现了问题。

  3. 安装成功后输入:

    pake url —name yourname

    url就是你想打包的网页的网址,而yourname是你想给你应用起的名字。

成功之后会显示打包应存储的路径,找到路径打开安装即可。

最后的最后,感谢Pake!!!


http://www.ppmy.cn/embedded/129048.html

相关文章

AI开发-三方库-PyTorch

1 需求 2 接口 3 示例 4 参考资料 PyTorch 狂肝两万字带你用pytorch搞深度学习!!!_狂干两万字带你用pytorch搞深度学习-CSDN博客

004_django基于Hadoop的短视频数据分析的设计与实现2024_xui698zi

目录 系统展示 开发背景 代码实现 项目案例 获取源码 博主介绍:CodeMentor毕业设计领航者、全网关注者30W群落,InfoQ特邀专栏作家、技术博客领航者、InfoQ新星培育计划导师、Web开发领域杰出贡献者,博客领航之星、开发者头条/腾讯云/AW…

TDesign腾讯高保真Axure RP中后台交互模板及元件组件库

TDesign腾讯Axure RP中后台交互模板部件及元件组件库素材基于腾讯TDesign素材库,进行二次创作,并非官网的免费静态版。具体内容,可以看右侧的预览按钮,确认内容。 元件库部分包含以下模块: 全局样式 基础 布局 导航 …

开发语言最佳实践

目录 一、开发IOS最好的语言是什么? 二、开发安卓的最好语言是什么? 三、开发鸿蒙应用最好的语言是什么? 四、做大模型训练最好的开发语言是什么? 一、开发IOS最好的语言是什么? 开发iOS最好的语言是Swift。Swift…

Linux 中文件的权限说明

目录 一:文件权限类型二:默认权限管理1. 查看当前用户的umask值2. 修改当前用户的umask值3. 根据umask计算默认权限 三:普通权限管理1. 三种普通权限说明1.1 对于非目录文件来说1.2 对于目录文件来说 2. 查看某个文件的权限信息2.1 使用 ls -…

计算机网络——第三章 数据链路层

文章目录 1.数据链路的几个重点问题1.1数据链路和帧1.2三个基本问题 2.使用广播信道的数据链路层2.1局域网的数据链路层2.1.1局域网的基本概念2.1.2共享信道的问题2.1.3以太网 2.2CSMA/CD协议2.2.1以太网提供的服务2.2.2CSMA/CD协议2.2.3用集线器的星形拓扑 2.4以太网的 MAC 层…

如何使用Python对Excel、CSV文件完成数据清洗与预处理?

在数据分析和机器学习项目中,数据清洗与预处理是不可或缺的重要环节。 现实世界中的数据往往是不完整、不一致且含有噪声的,这些问题会严重影响数据分析的质量和机器学习模型的性能。 Python作为一门强大的编程语言,提供了多种库和工具来帮…

算法Day-4

24. 两两交换链表中的节点 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换)。 示例 1: 输入:head [1,2,…